form an array with javascript and then send the array to php for submission to database

Question

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?

Answer 1

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
    }
?>