Question

I have a parent page which has a drop down list in it. using the onchange event, data is posted to a second page using $.post(). This page uses the posted variables to output mysql data with a checkbox for each line. This page output is then inserted into the parent page using jquery $('#DIV name').html(output).show();

The user can then see the mysql table rows with corresponding checkboxes. They then select the checkboxes they want and say delete. Delete is a form submit button.

My question is, when they click delete how do I take the form data from the second page and post it with that of the parent page so that I can then use $_POST[] to get the checkbox info and delete the selected table rows?

example of the parent page code is:

javascript/jquery

<script type="text/javascript">
        function get(row){      //row being processed, defined in onchange="get(x)"
            ('getpeopleinjobs.php',{        //data posted to external page
        postvarposition: form["position"+row].value,        //variable equal to input box, sent to external page
        postvarjob: form["job"+row].value,      //variable equal to input box, sent to external page
        postvarperson: form["person"+row].value,        //variable equal to drop down list, sent to external page
        postrow: row},      //variable equal row being processed, sent to external page
            function(output){ 
                $('#training'+row).html(output).show();     //display external results in row div
                //popupWindow = window.open('t4.php?variable1Name=Vicki&amp;variable2Name=Maulline','popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
                    });
                }
</script>

Form data is

 <tr>
    <td>
    <?PHP echo $i; ?>
    </td>
    <td>
        <input type=text NAME="position<?PHP echo $i; ?>" id="position<?PHP echo $i; ?>"  style="border: 1px solid #2608c3;color:red; width=200px" value="<? echo mysql_result($resultpositionjob,$r,0);?>"> 
    </td>
    <td>
        <input type=text NAME="job<?PHP echo $i; ?>" id="job<?PHP echo $i; ?>"  style="border: 1px solid #2608c3;color:red; width=200px" value="<? echo mysql_result($resultpositionjob,$r,1);?>"> 
    </td>
    <td>
        <SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" style="border: 1px solid #2608c3;color:red; width=200px" onchange="get(<? echo $i; ?>);"> 
        <OPTION VALUE=0 >
        <?=$optionpeople?> 
        </SELECT>
    </td>
    <td onclick="train(<? echo $i; ?>);" style="color:grey; cursor: pointer;">
    <div id="training<?PHP echo $i; ?>"><font color=grey size=2></div>
    </td>
    <td>
        &nbsp;
    </td>
    </tr>
    <?PHP
        $i++;
        $r++;
        }
    ?>

The second page or page called by jquery, the output is:

        echo 
        "
        <table border=0 width=400>
            <tr>
                <td width=20>
                    &nbsp;
                </td>
                <td width=150>
                    <b>Position<b>
                </td>
                <td>
                    <b>Job<b>
                </td>
            </tr>
        ";
        while($line = mysql_fetch_array($result))
   {
        echo "
            <tr>
                <td>
                ";
        ?>
        <input type=checkbox name="delete[]" id="delete[]" value="<?php echo $rows['id']; ?>">
        <?PHP
        echo    "
                </td>
                <td>
                ";
        echo $line['position'];
        echo    "
                </td>
                <td>
                ";
        echo $line['job'];
        echo    "
                </td>           
            </tr>
            ";
        } 
            ?>
            <tr>
                <td>
                    <input type=submit name="update" id="update" value="Update">
                </td>
            </tr>
        </table>
        <?PHP       
 }

To repeat I want the table checkbox element from the second page posted with the form data of the parent page.

Is this possible as my testing hasnt given me any luck.

Am I doing something wrong or do I need to modify the jquery code?

Thanks as always for the assistance.

Answer 1

There is no second page. Really – you’re loading HTML content from the second page, but it’s being inserted into the parent page. All content, from your browsers perspective, is in the same page. The fields should be included as long as they’re inside the DOM inside the element. Use the developer tools for your browser or Firebug for Firefox to make sure that the content is placed within the form element in the DOM. The developer tools should also be able to show you exactly which variables are submitted to the server when the form is submitted.

The ‘action’ parameter of ‘form’ will indicate where the content gets submitted (and it seems you’ve left that part out of your HTML, so it’s impossible to say if you’ve left out or just not included it in the paste.