停止为html提交多个提交

时间:2015-12-19 23:36:22

标签: javascript php html

所以我谷歌这个问题,他们都提供相同的代码,但它永远不会有效。我希望只能点击按钮一次,这样你就不会垃圾邮件点击多次发送的按钮。

这是我的HTML。

<form id="sign" name="sign" method="post">
    <input type="text" name="username" placeholder="Username"><br>
    <input type="text" name="email" placeholder="Email"><br>
    <input type="password" name="password" placeholder="Password"><br>
    <input type="submit" name="submit" value="Signup">

</form>

现在修复人们在谷歌上说的是将此代码添加到提交输入类型。

onclick="this.value='Submitting ..'; this.disabled=true; this.form.submit();"

onclick="this.value='Submitting ..'; this.disabled=true;"

现在这会按照我想要的方式单击后禁用提交按钮,但它会停止提交的表单,这首先使得这样做有缺陷。

最后不起作用的代码

<form id="sign" name="sign" method="post">
    <input type="text" name="username" placeholder="Username"><br>
    <input type="text" name="email" placeholder="Email"><br>
    <input type="password" name="password" placeholder="Password"><br>
    <input type="submit" name="submit" value="Signup" onclick="this.value='Submitting ..'; this.disabled=true;">

</form>

1 个答案:

答案 0 :(得分:0)

您需要使其中一个必需的输入启用提交按钮 - 它已禁用 - 由init()功能设置。我已经在这里用文本框来说明了这一点。

当输入文本框时,您需要在JavaScript中为$hidden_input设置一个值 - 当页面加载时它应为0,但在准备提交时设置为1。您可以使用PHP中设置的值以不同的方式进行设置。这完全取决于您希望它如何执行。

您还应将表单操作设置为<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>

<?php   
if (isset($_POST['hidden_input'])) $hidden_input = intval($_POST['hidden_input']);

$submit_count_input = intval($_POST['submit_count_input']);

if ($hidden_input == 1){
// do your processing here
$hidden_input = 2;
echo "Thank you. Form processed";
}else{
$hidden_input = 1;
echo "Form not processed.";
}    
// remove this section - just for testing
echo " Control Token: " . $hidden_input . " ";
echo " Submit Count: " . $submit_count_input; // to show it submits but does not process form
$submit_count_input++; 
?>
<!DOCTYPE html>
  <html>
    <head>
    <script language="javascript">
    function init(){
    if (document.getElementById('hidden_input').value == 2){
    document.getElementById('sbutton').value = "   Submitted   ";
    }else{
    document.getElementById('sbutton').value = "   Submit  ";
    }
    document.getElementById('sbutton').disabled = true;
    }
    function enable_it(){
    // could reset it here but you will be able to submit again
    //document.getElementById('hidden_input').value = 1;
    document.getElementById('sbutton').disabled = false;
    document.getElementById('sbutton').value = "   Submit  ";
    }
    function submit_this(){
    document.form.submit();
    }
    </script>
    </head>
    <body onload="init()">

      <form name="form" id="form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">
      <input type="text" name="text_box" onKeyPress="enable_it();" required />

      <input type="hidden" name="hidden_input" id="hidden_input" value="<?php echo $hidden_input ?>" />
      <input type="hidden" name="submit_count_input" id="submit_count_input" value="<?php echo $submit_count_input ?>" />

      <input type="button" name="sbutton" id="sbutton" value="" onclick="submit_this();" />
      </form>
      <a href="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">Click to start a new submission</a>

    </body>
   </html>

您可以使用隐藏输入中的值来阻止将来提交 -

 if (intval($_POST['hidden_input']) == 1){
  // skip your signup code
 }

请记住,此页面主要依赖于JavaScript - 以防万一对于那些不喜欢JavaScript依赖的人来说可能是一个问题。