使用javascript后的表单提交

Question

I have two pages in php. First page is the following:

<?php

// --- please consider that my form is inside a while statement...


<form action='deletepost.php' method='post' >
  <input type='hidden' name='var' value='$comment_id;'>
  <input type='submit' value='delete' >
</form>

?>

and page deletepost.php is the following:

<?php

    $comment = mysql_real_escape_string($_POST['var']);
    echo" $comment ";

    // --- then starts successfully the delete process I have created...

?>

So first page includes a form button delete that when I press it passes the value that I want to page deletepost.php successfully (I use echo to see it as you can see). I have decided to use a javascript lightbox for my form in first page. I have changed my code to that:

<?php

<a href = javascript:void(0) onclick = document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'><h2><font color=green size=3>Delete All</font></h2></a>
<div id=light class=white_content>


<form action='deletepost.php' method='post' >
  <input type='hidden' name='var' value='$comment_id'>
  <input type='submit' value='delete' onClick=submit(); >
</form>


<a href=javascript:void(0) onclick=document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'><button style='margin-left:250px; width:95px;'>Cancel</button></a>
</div>
<div id=fade class=black_overlay></div>  

the problem is that after using javascript, values are not passed to deletepost.php .Any idea why this might happend?

Answer 1

I see no point of having javascript over a submit button. You either do it on <a> or <button> , and you should refer to the form name.

<form name='form1' action='deletepost.php' method='post'>

...


<button onclick='document.form1.submit()'>delete</button>

Calling submit() only will do nothing, because there is no such built in alone method. You can aliase the refering in a wrapper method

function submit() {
    document.form1.submit();
}

---

Here are my tests:

test1.php:

<?php $comment_id = 1 ?>
<?php while($comment_id < 10): ?>
    <a href="javascript:void(0)" onclick="document.getElementById('light<?=$comment_id;?>').style.display='block';document.getElementById('fade<?=$comment_id;?>').style.display='block'"><h2><font color=green size=3>Delete All</font></h2></a>
    <div id="light<?=$comment_id;?>" class="white_content" style="display: none">


    <form action="test2.php" method="post" name="form1">
      <input type="hidden" name="var" value="<?=$comment_id;?>" />
      <button onClick="document.form1.submit();">Delete</button>
    </form>


    <a href="javascript:void(0)" onclick="document.getElementById('light<?=$comment_id;?>').style.display='none';document.getElementById('fade<?=$comment_id;?>').style.display='none'"><button style="margin-left:250px; width:95px;">Cancel</button></a>
    </div>
    <div id=fade class=black_overlay></div>
<?php $comment_id++; ?>
<?php endwhile;?>

It generates me 9 comment lightboxes. On fifth one I click on Delete all it expands the button Delete . Then I click the button and it redirects me to test2.php Where I have

<?php var_dump($_POST); ?>

And the output in the webpage is:

array (size=1)
  'var' => string '5' (length=1)

Answer 2

I don't think you need the onClick property for your submit input. ESPECIALLY if you don't actually have a submit method defined anywhere in your JS. Setting that attribute could be enough to stop the default submit behavior of the form and will stop your php from running.