2 forms with one submit button $_POST method

Question

i want to combine 2 forms into one submit button on separate parts of the website. its pretty much a check box deletion mysql row script. here is a picture.

What I am trying to do is have DELETE SELECTED, delete the selected checkedboxes rows that are on the left side.

I am unable to get that to work.

My form names are delete1 for the button and delete2 for the whole table as a form.

I tried to combine both forms into one by using javascript.

function functionCaller()
{
document.getElementById('delete1').submit();
document.getElementById('delete2').submit();
}

It doesnt seem to work.

Does anyone have any ideas, I pretty much want to use a submit button on another part of the page that corresponds to being the submit button for the check boxes, while not being part of the same form. I hope it makes sense.

UPDATE. ADDED CODE.

The form for the DELETE SELECTED button seperated from the table

<form action="" method="post" name="delete">
<div style=" float: right;">
<input type="submit" value="Delete Selected" id="delete" onclick="functionCaller()" name="delete">
</div>
</form>

Here is the form that contains the table

<form action="" method="post" name="delete">
   <div class="table">
      <div class="table-head">
         <div data-label="select" class="column"><input type="checkbox" id="selectall"></div>
         <div data-label="id" class="column">ID</div>
         <div data-label="avatar" class="column">Avatar</div>
         <div data-label="username" class="column">Username</div>
         <div data-label="email" class="column">Email</div>
         <div data-label="active" class="column">Active</div>
         <div data-label="level" class="column">Level</div>
         <div data-label="modify" class="column">Modify</div>
      </div>
      <div class="row">
         <div data-label="select" class="column"><input type="checkbox" class="selectedId" name="checkbox[]" id="checkbox[]" value="94" onclick="resetSelectAll();"></div>
         <div data-label="id" class="column">94</div>
         <div data-label="avatar" class="column"><img alt="" src="uploads/540d248343caa.JPG"></div>
         <div data-label="username" class="column">admin</div>
         <div data-label="email" class="column">brian.cherdak@gmail.com</div>
         <div data-label="active" class="column">Yes</div>
         <div data-label="level" class="column">Admin</div>
         <div data-label="modify" class="column"><a href="admin_update.php?id=94"><img alt="" src="images/tool.png"></a>  <a onclick="delete_user(94);" href="#"><img alt="" src="images/delete.png"></a></div>
      </div>
      <div class="row">
         <div data-label="select" class="column"><input type="checkbox" class="selectedId" name="checkbox[]" id="checkbox[]" value="287" onclick="resetSelectAll();"></div>
         <div data-label="id" class="column">287</div>
         <div data-label="avatar" class="column"><img alt="" src="uploads/54052a0accd62.gif"></div>
         <div data-label="username" class="column">Quyn</div>
         <div data-label="email" class="column">brian.cherdak@gmail.com</div>
         <div data-label="active" class="column">Yes</div>
         <div data-label="level" class="column">Regular</div>
         <div data-label="modify" class="column"><a href="admin_update.php?id=287"><img alt="" src="images/tool.png"></a>  <a onclick="delete_user(287);" href="#"><img alt="" src="images/delete.png"></a></div>
      </div>
   </div>
</form>

They are both on seperate sides of the page, but I want the delete button to pretty much be the delete button for the table form.

This is what my delete php code looks like

<?php
if(isset($_POST['delete']))
{
for($i=0;$i<count($_POST['checkbox']);$i++){
$del_id = $_POST['checkbox'][$i];
$sql_del = "DELETE FROM users WHERE id='$del_id'";
$result_del = mysql_query($sql_del);
}
}
?>

Answer 1

Updated answer after comment:

<form action="" method="post" name="delete1" id='form1' method="POST" onsubmit="merge(); return true;">
<div style=" float: right;">
<input type="submit">
</div>
</form>

<form action="" method="post" name="delete2" id='form2'>
    // your checkboxes...
</form>

<script type="text/javascript">
    function merge() {
        $result = $("#form1");
        $("#form2 input, #form2 select").each(function() {
            if($(this).is(':checked')){
                $result.append("<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"' />");
            }
        });
    }
</script>

Answer 2

That submit function is no good. Only the first submission is happening. I would set a hidden input value in the delete form. I haven't tested this, but I think everyone will get the idea.

Here's some jQuery:

functionCaller = function(e){
    e.preventDefault(); // Just to be sure the submit doesn't go without us
    var a = []
    $(':checkbox').each(function(){
        if($(this).prop('checked') === true) a.push($(this).val());
    });
    $('#hidden_input').val(a.toString()); // Explode by , (comma) in php
    document.getElementById('delete1').submit(); // Do form submit now
}

Some PHP:

if(isset($_POST['delete'])){
$a = explode(','$_POST['hidden_input']);
    for($i=0;$i<count($a);$i++){
        $del_id = $a[$i];
        $sql_del = "DELETE FROM users WHERE id='$del_id'";
        $result_del = mysql_query($sql_del);
    }
}

HTML!:

<form action="" method="post" name="delete">
<div style=" float: right;">
<input type="submit" value="Delete Selected" id="delete" onclick="functionCaller()" name="delete">
<input type="hidden" value="" id="hidden_input" name="hidden_input">
</div>
</form>