Iterate a form with JS

Asked

Viewed 155 times

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 inputs distinguished, one checkbox and a hidden. I need to iterate and get the values of all checkboxes that are marked, including field value hidden cell. This field is the code of the database to generate the ticket.

That means you can have more than one account receivable from the same bank. I need after iterate send each incoming account to your due ticket.

Below is an excerpt of 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 jquery html

2 answers

2


I suggest you get first the elements that are "checked" with 

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

then you can use this collection/array and map to have other content inside. So iterating you can return an object with information from this checkbox and also from the next element hidden which is its sibing and can be obtained through the method .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: https://jsfiddle.net/3me57xrh/

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!';
    }
});

  • Very good example. In addition to helping me a lot it made me go to the Jquery api to study what you used in the resolution example you gave me. If it’s not too much I’d like you to tell me how to generate more than one ticket for a bank.

  • @Fininhors what is "boleto"? in Portugal we do not use that name.

  • Boleto bancário, is a document that has a value to be paid in a bank(local fisico) or by internet banking.

  • @Fininhors means you want to generate one more <form> and send to the server?

  • I want to say that I need to take the Hidden.value and this.value code pairs and generate a document. For each Hidden.value you take these values of chekbox and generate your document. Got it??

  • @Fininhors the variable checked in my example there is this. Do you want to generate this in PHP or Javascript? for the database or for the client... I don’t quite understand. Maybe I should ask another question so you have more room to explain

  • @Sergio If I understand correctly, he basically wants to make one ajax for each checkbox.

Show 2 more comments

2

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

  1. td:has(input[type='checkbox']): get all the td who own a input whose type='checkbox'

  2. owned by tds, 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>
<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>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.