Select input with a certain class within a form

Asked

Viewed 1,118 times

3

I have a form and within this form I am adding a certain input dynamically via jquery using a button, these inputs go to a array in a controller C#. inserir a descrição da imagem aqui

Currently I’m doing so:

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

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

What I want to do is get all the inputs with the 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 didn’t work, If anyone can help me, if anyone knows any better way to do it, I’d appreciate it.

javascript jquery

4 answers

2


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);
  • 1

    Cool, I’ll try this way too, a quick question what the .map I’m very lay in that part.

1

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

jQuery('form').serialize();

Here an example of the code :

JSFIDDLE EXAMPLE

1

Give a read on delegation of events, more specifically about event propagation, in official documentation from the jQuery library.

Briefly:

The delegation of events refers to the process of using the event propagation (Bubbling) to deal with events on a level higher in the GIFT than the element in which the event originated. That allows us to attach a single Event Listener for elements that exist now or in the future.

A minimal example would be 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>
<div id="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 the form and delegating the event change for the inputchildren who have the class .inputPiscina.

0

I ended up solving right after posting the question

I used the following code:

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

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

Browser other questions tagged javascript jquery

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