How to create an array from multiple Form fields with Jquery?

Question

I have a multiple Forms in a single page and i want to create an ajax call for each of them. I was thinking to do it by creating and object of the form's elements name and values and then pass them to the ajax call - by looping each form, so the result i'm looking for is something like this:

<form>
      <input type="text" name="name_1">

      <input type="password" name="password_1">

      <input type="email" name="email_1">

      <input type="submit" id="submit_1">    
</form>

In Jquery

var formInputs = $(form);

for(var i=0; i < formInputs.length; i++){
   var formInputItem = formInputs[i];

   var formSubmitId = formInputItem - get the submit id // not sure how to do it

   $(formSubmitId).click(function(e){

    e.preventDefault();

    // var name = $(formInputItem input[name=name]).val(); not show how to extract the element to achive this 
    var name = $("input[name=name]").val(); 

    var password = $("input[name=password]").val();

    var email = $("input[name=email]").val();

    $.ajax({

       type:'POST',

       url:'/ajaxRequest',

       data:{name:name, password:password, email:email},

       success:function(data){

          alert(data.success);

       }

    });



});

}

I know my explanation is a little vague but the idea is simple, I have multiple forms, and since each form has a different submit button's id, as well as different input names - the how can i pass the data to the Ajax call?

Thanks, as you see the important part is just an examle...i can't get the elements base on their type — RoyBarOn
– RoyBarOn, Commented Aug 19, 2019 at 0:08
Because i need the name of the inputs....and the id of the the submit button — RoyBarOn
– RoyBarOn, Commented Aug 19, 2019 at 5:47

JL Barcelona · Accepted Answer · 2019-08-19 07:56:18Z

1

I don't know if this is your goal. but i hope it helps.

HTML

<div id="myForm"></div>

Javascript

$(document).ready(function(){
    var data ='';

    for (var i = 0; i < 2; i++) {
     data += '<form id="form_'+i+'" class="form">';
     data += '<input type="text" id="name_form_'+i+'"><br>';
     data += '<input type="password" id="password_form_'+i+'"><br>';
     data += '<input type="email" id="email_form_'+i+'"><br>';
     data += '<input type="submit" id="submit_form_'+i+'"><br>';
     data += '</form>';
     data += '<br>';
    }
    $("#myForm").html(data);


  $('.form').on('submit', function(e){
    e.preventDefault();
    var id = $(this).attr('id');
    //alert(id); you can alert the form id to check it.
    var name = $("#name_"+id).val();
    var password = $("#password_"+id).val();
    var email = $("#email_"+id).val();

    alert('Name:'+name+' Password:'+password+' Email:'+email);
  });

});

As you can see from the javascript i just add the multiple form using for loop. and i add id+(increment number from loop) and display it to div first.

and another one i put the class to form tag which is class="form".

and add the onsubmit function.

try: https://jsfiddle.net/26rmpewx/57/

answered Aug 19, 2019 at 7:56

JL Barcelona

2281 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

RoyBarOn Over a year ago

-Thanks for your time, but unfortunately it's not what i'm looking for, i need to extract the input's attributes from the Form, so each Ajax request will get a UNIQE set of Form elements - with the names & id's , so the for loop will produce $('#submit_1'), $('#submit_2'), and the same for the inputs.

JL Barcelona Over a year ago

you mean you want to get all the values from all forms in one request ? I'm sorry not really good in english.

RoyBarOn Over a year ago

JL Barcelona, Thanks, not just their values ( that's the easy part) - i need to get the input's class, or id or any other attribute that will allow me to get it's value from the for loop -i want to address to inputs directly....

JL Barcelona Over a year ago

No problem bro.

JL Barcelona Over a year ago

jsfiddle.net/mkox49w3/3 can you try this bro i get the attributes.

|

Sathees karan · Accepted Answer · 2019-08-19 07:32:34Z

0

<form>
  <input type="text" name="name_1">
  <input type="password" name="password_1">
  <input type="email" name="email_1">
  <input type="submit" id="submit_1">    
</form>

$(document).ready(function() {

// Submit form with id function.

  $("#btn_id").click(function() {
      var name = $("#name").val(); 
      var email = $("#email").val();

      $.ajax({
      type:'POST',
      url:'/ajaxRequest',
      data:{name:name, email:email},
      success:function(data){
          alert(data.success);
        }
      });
  });

Just try with submit id to click function in jquery like upwards code.

answered Aug 19, 2019 at 7:32

Sathees karan

911 silver badge6 bronze badges

3 Comments

RoyBarOn Over a year ago

Thanks....that's a part of my question...how to extract to input attributes (class, name) from the form inputs...

Sathees karan Over a year ago

$("#name").val();. #name mean input name attribute's id

RoyBarOn Over a year ago

Sorry buddy, you don't understand the problem, thanks for your help and time.

RoyBarOn · Accepted Answer · 2019-08-19 21:20:11Z

Got it,

 <form>
  <input class="useremail" type="email" name="email_1" value="[email protected]" />
  <input class="username" type="text" name="username_1" value="John" />
  <input type="button" id="submit_1" value="send" />
</form>

<form>
  <input class="useremail" type="email" name="email_2" value="[email protected]" />
  <input class="username" type="text" name="username_2" value="Ben" />
  <input type="button" id="submit_2" value="send" />
</form>

Script.js

  $("form").each(function() {
    var userEmail = $(this).find('.useremail').val();
    var userName = $(this).find('.username').val();
    var sendIdButton = $(this).find(':input[type="button"]');

    var ajaxDataObj = {
      name: userName,
      email: userEmail,
    } 

  $('#' + sendIdButton.attr('id')).on('click', function() {
    console.log(ajaxDataObj);

    $.ajax({

       type:'POST',

       url:'/ajaxRequest',

       data:ajaxDataObj,

       success:function(data){

          alert(data.success);

       }

    });
  })
});

This will produce the following payload in the ajax request.

name: Ben email: [email protected]

Here is an example.

Collectives™ on Stack Overflow

How to create an array from multiple Form fields with Jquery?

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related