Select input with a given class within a form

Question

Select input with a given class within a form

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

3

I have a form and inside this form I am adding a certain input dynamically via jquery using a button, these inputs go to array in a C # controller.

CurrentlyI'mdoingthis:

for(varj=0;j<numeroDePiscinas;j++){formdata.append("Piscinas", $("#piscina"+j).val());
        }

The problem is that this logic will not work anymore because the user will be able to you can remove these inputs, I used the Id of the input of acorodo that was added, ex posição 1 , id=piscina1

What I want to do is to get all inputs with class inputPiscina and send its value to the controller, I tried something like this:

 $("#form:formPiscina").each(".inputPiscina",
            function() {
                formdata.append("Piscinas", $(this).val());
            });

But it did not work, so anyone can help me, if anyone knows some better way to do this, I'd be grateful.

javascript jquery

asked by anonymous 06.06.2017 / 15:09

4 answers

1

You can use jQuery's .serialize () with this function you get all the data of your form correctly for sending. would look like this:

jQuery('form').serialize();

Here is an example of the code:

JSFIDDLE EXAMPLE

06.06.2017 / 15:18

1

Read about event delegation , more specifically on event propagation , at official documentation of the jQuery library.

Briefly:

Event delegation refers to the process of using the events ( bubbling ) to handle events at one level higher than the element in which the event originated. That allows us to append a single event listener to elements that exist now or in the future.

A minimal example would look like this:

// "click": evento
// ".inputPiscina": elemento filho que esse evento deve ser aplicado
$( "#meuform" ).on( "click", ".inputPiscina", function( event ) {
    event.preventDefault();
    console.log( $( this ).attr("id") );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><body><divid="container">
    <form id="meuform">
        <input id="piscina1" type="text" class="inputPiscina">
        <input id="piscina2" type="text" class="inputPiscina">
        <input id="piscina3" type="text" class="inputPiscina">
    </form>
</div>
</body>
</html>

You can adapt the example to your case by selecting form and delegating the change event to the input s children that have the .inputPiscina class.

06.06.2017 / 15:49

0

I solved it shortly after posting the question

I used the following code:

   $("input:text.inputPiscina").each(
            function() {
                formdata.append("Piscinas", $(this).val());
            });

So I went on all the inputs of type text that had class inputPiscina and I sent the data to my controller.

06.06.2017 / 15:25

How to make a sample space using 4.6 and 8-sided data? calculate percentage of iterated items in a loop

score 2 · Accepted Answer

If you already have an object formdata you can send an array to that key. Something like this:

var piscinas = $("#form:formPiscina .inputPiscina").map(function() {
    return this.value;
}).get(); // o ".get()" é para gerar uma array nativa e não uma coleção jQuery
formdata.append("Piscinas", piscinas);