I am trying to form a javascript function from this form:
<form class="responseForm" action="javascript:parseResponse123<?php echo $id; ?>()" id="responseForm<?php echo $id; ?>">
<input name="hiddenField5<?php echo $id; ?>" id="hiddenField5<?php echo $id; ?>" type="hidden" value="<?php echo $id; ?>" />
<input name="hiddenField4<?php echo $id; ?>" type="hidden" id="hiddenField4<?php echo $id; ?>" value="<?php echo $qty; ?>" />
<font color="red"><?php echo $val; ?></font><br />
<?php
$i=1;
while($i<=$qty)
{
?>
Participant <?php echo $i; ?>:<input name="hiddenField2[]" id="hiddenField2" type="text" /><br />
<?php $i++;
}
?>
<input name="submit" type="submit" value="Submit" />
</form>
the participant input field(hiddenfield2) can be anywhere from 1 or more of the field by same name and id.
I then have this code for submission to php page:
function parseResponse123<?php echo $id; ?> ()
{
var hiddenField2<?php echo $id; ?> = $("#hiddenField2<?php echo $id; ?>");
var hiddenField4<?php echo $id; ?> = $("#hiddenField4<?php echo $id; ?>");
var hiddenField5<?php echo $id; ?> = $("#hiddenField5<?php echo $id; ?>");
var hiddenField1<?php echo $id; ?> = $("#hiddenField1<?php echo $id; ?>");
var url = "insert.php";
$.post(url,{ hiddenField2: $('[name="hiddenField2<?php echo $id; ?>[]"]').serialize(),hiddenField: hiddenField5<?php echo $id; ?>.val(), hiddenField1:hiddenField1<?php echo $id; ?>.val(), hiddenField4:hiddenField4<?php echo $id; ?>.val() } ,
function(data) {
});
setTimeout(function() {
$.ajax({
type:"POST",
data:"getNews=true",
success: function(r){
$("#newsContent").html(r);
},
error: function(){
alert($(".hiddenField2<?php echo $id; ?>").val());
$("#error").text($(".hiddenField2<?php echo $id; ?>")).fadeIn(300)
}
})
},200);
}
please ignore all the echo id's that are in there, they are there more for future use than anything. I need help forming the array for hiddenField2 using javascript, then submitting it to insert.php, then how to decode the array so that php can use a foreach loop. any help with this?
You should look into the jQuery Serialize function:
http://api.jquery.com/serialize/
$.ajax({
type:"POST",
data: $("#form-id").serialize(),
success: function(r){
// do something here after success
});
edit: elaborated
I did not test this but you could do something like this
<form class="responseForm" action="">
<input name="formData[id]" type="hidden" value="<?php echo $id; ?>" />
<input name="formData[qty]" type="hidden" value="<?php echo $qty; ?>" />
<font color="red"><?php echo $val; ?></font><br />
<?php
$i=1;
while($i<=$qty)
{
?>
Participant <?php echo $i; ?>:<input name="formData[participants][]" type="text" /><br />
<?php $i++;
}
?>
<input name="submit" type="submit" value="Submit" />
</form>
Use something this for the javascript
<script>
$("form.responseForm").submit(function(e){
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
url : '/insert.php', // assuming from root of your domain dir
type:"POST",
data: formData,
success: function(response){
$("#newsContent").html(response);
},
error: function(){
}
});
});
</script>
and in your insert.php
<?php
$formData = $_POST['formData']; // an array of the form
foreach($formData['participants'] as $participant){
// do something
}
?>