How to get all values(input,select) from a table in a form?

Question

I have a table and i am adding rows by cloning it. I want to know if there is any way by which i can get all the input and drop-down values from my table.(Using form.serialize() will give me unnecessary values which i don't need )

HTML

<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>

    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
      <td class="headingalign" width="05%"></td>

    </tr>
  </thead>
  <tbody>

    <tr id="id0" class="vals" name="id0">

      <td>
      <div class="id_100">
    <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
        <option value="S">Select</option>
        <xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description"/>
            <option value="#{description}">
                <xsl:value-of select="description"/>
            </option>
        </xsl:for-each>
        </select>
     </div> </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500"  disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50"  disabled="true" class="objinputtext2" size="45" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="{//RESPONSE}"  />

      </td>
      <td>
      <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
      </td>
    </tr>
  </tbody>
</table>

this may help https://stackoverflow.com/questions/2403179/how-to-get-form-data-as-a-object-in-jquery — Srikanth Gowda, Jan 20 '20 at 13:35
If you're cloning rows be very careful you don't duplicate `id` attributes, as you seem to have *a lot* of them in the row. — Rory McCrossan, Jan 20 '20 at 13:37
With every cloned row my id is also getting increased such as flddesc,flddesc1,flddesc2... — Saurav, Jan 20 '20 at 13:55

Bhushan Kawadkar · Accepted Answer · 2020-01-20T13:58:06.380

You can iterate all input and select elements from table and read values using .val() method.

See below code snippet

$(function(){
    var data = {};
    $('#dataTable input,select').each(function(){
       var id= $(this).attr('id');
       var val = $(this).val();
       data[id]=val;
    });
    console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>

    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
      <td class="headingalign" width="05%"></td>

    </tr>
  </thead>
  <tbody>

    <tr id="id0" class="vals" name="id0">

      <td>
      <div class="id_100">
    <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
        <option value="S">Select</option>
        <xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description"/>
            <option value="#{description}">
                <xsl:value-of select="description"/>
            </option>
        </xsl:for-each>
        </select>
     </div> </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500"  disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50"  disabled="true" class="objinputtext2" size="45" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="{//RESPONSE}"  />

      </td>
      <td>
      <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
      </td>
    </tr>
  </tbody>
</table>

Thanks for the answer but it seems like it always take the last values only. — Saurav, Jan 20 '20 at 13:52
if name are same for multiple inputs then it will override in the `data` map. You can use unique ids instead of name or put values in array instead of map. Check updated answer using ids. — Bhushan Kawadkar, Jan 20 '20 at 13:55

How to get all values(input,select) from a table in a form?

1 Answers1