What I'm trying to do:
- We have one input on the page
- We press "add" button and one more input adds after first
- On submit we get all their values and add them into an array.
How to add additional inputs on page (with jquery), and then get their contents in php?
What I'm trying to do:
- We have one input on the page
- We press "add" button and one more input adds after first
- On submit we get all their values and add them into an array.
How to add additional inputs on page (with jquery), and then get their contents in php?
Share Improve this question asked Sep 12, 2010 at 12:39 JamesJames 43.7k54 gold badges137 silver badges163 bronze badges 1- Define "inputs" please. It's not clear what an "input" represents – spender Commented Sep 12, 2010 at 12:42
3 Answers
Reset to default 5You don't need to add the inputs into an array explicitly. If you name the input fields correctly, PHP will automatically parse them into an array.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery dynamic input sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// Input adding function
function addInput() {
$('#inputs').append('<p><input type="text" name="input[]"></p>');
}
// Event handler and the first input
$(document).ready(function () {
$('#adder').click(addInput);
addInput();
});
</script>
</head>
<body>
<form id="form" method="post" action="jquery.php">
<a id="adder" href="#">Add Input</a>
<div id="inputs">
</div>
<input type="submit" />
</form>
</body>
</html>
PHP
foreach ($_POST['input'] as $key => $value) {
echo "$key $value";
}
Maybe this will work (if I understand question correctly)
$('#add').click(function(){
$(this).before('<input name="array[]"/>');
});
and i php
<?php
if (isset($_GET['array'])) {
for ($i=0; $i<count($_GET['array']); $i++) {
echo "array[$i] -> {$_GET['array'][$i]}";
}
}
?>
I have posted this for a similar question, although this one deals with only one input that's being cloned, not multiple ones. So basically, you HTML would be something like:
<form id="my_form">
<input name="my_input[1]" id="my_input[1]">
</form>
<a href="#" id="add_input">Add one more</a>
And the jQuery for it would look like this:
$("#add_input").click(function(event) {
// Get the number of current inputs and set the new count ...
var inputCount = parseInt($("input[id^=my_input]").size());
var newInputCount = inputCount++;
// ... then create new clone based on the first input ...
var newInput = $("#my_input[1]").clone();
// .. and do the cleanup, make sure it has
// an unique ID and name for server-side parsing
newInput.attr('id', 'my_input[' + newInputCount + ']').attr('name', 'my_input[' + newInputCount + ']').val('');
// .. and finally insert it after the last fieldset
newInput.insertAfter("#my_input[" + inputCount + "]");
event.preventDefault();
});
Then, on the PHP side, $_POST['my_input'] would be an array of all the added fields' values, and it's easy to iterate through them with a foreach(), for example.
Hope this helps !