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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.