How to send an object of multiple input field values with jquery ajax

Question

I have a page from which I can add users. There is a button to dynamically add user input fields (username - password) up to 25 times.

So all those fields have the same names. My question is, how can I get them all together in an object to send to my php script through ajax?

Currently this is how I post (only for one user):

$username = $form.find( "input[name='username']" ).val(),
$pass = $form.find( "input[name='password']" ).val(),
url = $form.attr( "action" );

var posting = $.post( url, {
  username: $username,
  pass: $pass,
});

However there is a possibility for multiple input fields with the same name, so my HTML might look something like this:

<div class="card-body">
  <!-- <div class="form-group row">
      <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
      <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
      </div>
  </div>
  <div class="form-group row">
      <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
      <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value='' type="text" id="example-text-input">
      </div>
  </div> -->


  <div class="form-group fieldGroup">

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
            <div class="col-sm-8">
                <input class="form-control" name="username[]" value="" type="text">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
            <div class="col-sm-8">
                <input class="form-control" name="password[]" placeholder="" value="" type="text">
            </div>
        </div>
          <div class="input-group-addon">
              <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Extra gebruiker</a>
          </div>

  </div><div class="form-group fieldGroup">

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
            <div class="col-sm-8">
                <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
            <div class="col-sm-8">
                <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
            </div>
        </div>
          <div class="input-group-addon">
              <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
          </div>

  </div><div class="form-group fieldGroup">

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
            <div class="col-sm-8">
                <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
            <div class="col-sm-8">
                <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
            </div>
        </div>
          <div class="input-group-addon">
              <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
          </div>

  </div><div class="form-group fieldGroup">

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
            <div class="col-sm-8">
                <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
            <div class="col-sm-8">
                <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
            </div>
        </div>
          <div class="input-group-addon">
              <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
          </div>

  </div><div class="form-group fieldGroup">

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
            <div class="col-sm-8">
                <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
            <div class="col-sm-8">
                <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
            </div>
        </div>
          <div class="input-group-addon">
              <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
          </div>
  </div>


  <!-- copy of input fields group -->
  <div class="form-group fieldGroupCopy" style="display: none;">

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
            <div class="col-sm-8">
                <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
            <div class="col-sm-8">
                <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
            </div>
        </div>
          <div class="input-group-addon">
              <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
          </div>

  </div>
</div>

I tried something similar before with productquantities:

var elements = tpj('.quantity input[name="quantity"]'),
    url = 'includes/cartoverzicht.php',
    url1 = 'includes/shoppingcart.php',
    postBody = [];
for (var i=0; i<elements.length; i++) {
    var element = tpj(elements[i]);
    postBody.push({
        product: element.attr('id'),
        quantity: element.val()
    })
}

What is the best way to do this? In my PHP script I need to loop the contents of the object so every username and password must stay together.

Zakaria Acharki · Accepted Answer · 2018-08-15 15:00:11Z

You could simply use jQuery method .serialize() like :

var postBody = $form.serialize();

var posting = $.post( url, postBody, function(response){
    //console.log( response );
});

console.log($('form').serialize());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="card-body">
    <div class="form-group fieldGroup">
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
        <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text">
        </div>
      </div>
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
        <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value="" type="text">
        </div>
      </div>
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Extra gebruiker</a>
      </div>

    </div>
    <div class="form-group fieldGroup">

      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
        <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
        <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
      </div>

    </div>
    <div class="form-group fieldGroup">

      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
        <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
        <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
      </div>

    </div>
    <div class="form-group fieldGroup">

      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
        <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
        <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
      </div>

    </div>
    <div class="form-group fieldGroup">

      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
        <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
        <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
      </div>
    </div>


    <!-- copy of input fields group -->
    <div class="form-group fieldGroupCopy" style="display: none;">

      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Gebruikersnaam</label>
        <div class="col-sm-8">
          <input class="form-control" name="username[]" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="form-group row">
        <label for="example-text-input" class="col-sm-4 col-form-label">Wachtwoord</label>
        <div class="col-sm-8">
          <input class="form-control" name="password[]" placeholder="" value="" type="text" id="example-text-input">
        </div>
      </div>
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Verwijder velden</a>
      </div>

    </div>
  </div>
</form>

Collectives™ on Stack Overflow

How to send an object of multiple input field values with jquery ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related