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