What I'm trying to do:
How to add additional inputs on page (with jquery), and then get their contents in php?
You 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 !
