Iterate a form with JS

Question

Iterate a form with JS

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I have a form with some items, and some cells contain the bank code data and account code to receive.

In the same cell, I have 2% with% distinct, inputs and checkbox . I need to iterate and get the values of all hidden that are marked, including the value of the checkboxes field of this cell. This field is the bank code for generating the ticket.

In other words, you can have more than one account to receive from the same bank. I need after iterating to send each incoming account to your due ticket.

Here is an excerpt from the code:

<form id="frmGrid">
<table>
    <tr>
        <td>
            <input type="checkbox" name="chkboleto" value="119" checked />
            <input type="hidden" name="hdn_banco" value="001" />
        </td>
        <td>
            <input type="text" name="name" />
        </td>
        <td>
            <input type="text" name="lastname" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="chkboleto" value="120" />
            <input type="hidden" name="hdn_banco" value="001" />
        </td>
        <td>
            <input type="text" name="name" />
        </td>
        <td>
            <input type="text" name="lastname" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="chkboleto" value="130" checked/>
            <input type="hidden" name="hdn_banco" value="100" />
        </td>
        <td>
            <input type="text" name="name"/>
        </td>
        <td>
            <input type="text" name="lastname" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="chkboleto" value="140" checked/>
            <input type="hidden" name="hdn_banco" value="100" />
        </td>
        <td>
            <input type="text" name="name" />
        </td>
        <td>
            <input type="text" name="lastname" />
        </td>
    </tr>
</table>

javascript html jquery

asked by anonymous 09.04.2015 / 01:07

2 answers

2

It's just a matter of using jQuery selectors to find the elements. I'll explain:

td:has(input[type='checkbox']) : get all td that has a input whose type='checkbox'

of the td s, for each of them, get the input checkbox and the input text , respectively:

input[type='checkbox']
input[type='text']

var tds = $("td:has(input[type='checkbox'])");

var msg = "";

$.each(tds, function(i, v) {
  var checkbox = $("input[type='checkbox']", this).val();
  var hidden = $("input[type='hidden']", this).val();
  var data = JSON.stringify({
    checkbox: checkbox,
    hidden: hidden
  });
  msg += data + "\n";
});

alert(msg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="frmGrid">
  <table>
    <tr>
      <td>
        <input type="checkbox" name="chkboleto" value="119" checked />
        <input type="hidden" name="hdn_banco" value="001" />
      </td>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="lastname" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="chkboleto" value="120" />
        <input type="hidden" name="hdn_banco" value="001" />
      </td>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="lastname" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="chkboleto" value="130" checked/>
        <input type="hidden" name="hdn_banco" value="100" />
      </td>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="lastname" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="chkboleto" value="140" checked/>
        <input type="hidden" name="hdn_banco" value="100" />
      </td>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="lastname" />
      </td>
    </tr>
  </table>

09.04.2015 / 02:52

Read a string of characters with scanf () Hide HTML code

score 2 · Accepted Answer

I suggest you first search for elements that are "checked" with

$('input[type="checkbox"]:checked')

Then you can use this collection / array and map to have other content in there. So by iterating you can return an object with information about that checkbox and also the next hidden element that is its sibing and can be obtained through the .next() .

A function with this would be:

var checked = $('input[type="checkbox"]:checked').map(function(){
   var hidden = $(this).next()[0];
    return {
        checkbox: {name: this.name, value: this.value},
        hidden: {name: hidden.name, value: hidden.value}
    }
}).get();

jsFiddle: link

and would be ready to send to the server with AJAX as JSON. Something like this:

$.ajax({
    url: "pagina.php",
    method: "POST",
    data: JSON.stringify(checked),
    dataType: "json",
    success:function(data) {
         alert('dados enviados!';
    }
});