-1

So I've google this problem, they all give the same code but it never works. I want to be able to only click on the button once so you can't spam click the button sending the from more than once.

Here my HTML from.

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

Now the fix people are saying on Google is to add this code to the submit input type.

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

or

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

Now this disables the submit button after it's been clicked like I want but it stops the form being submitted which defects the point in doing it in the first place.

Finally code that doesn't work

<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>
likeluke11 Kerr
  • 11
  • The `this.form.submit()` part is what should be submitting the form, try replacing it with `document.getElementById('sign').submit();` – 2pha Dec 19 '15 at 23:52
  • Your code works perfectly for me (Firefox 40). Test in all browsers and tell us for which ones it works and which not. I am downvoting your question until then. – Tomáš Zato Dec 19 '15 at 23:56
  • It doesn't work for me `` – likeluke11 Kerr Dec 19 '15 at 23:58
  • So do you just want to have the button disabled why it's processing the POST request? – Luca Steeb Dec 19 '15 at 23:59
  • I want the from only to be send once so users don't spam the button as my http server is slow so users will probably click it again. – likeluke11 Kerr Dec 20 '15 at 00:05
  • @Tomáš Zato I've tried it in firefox and chrome both don't work. Firefox refreshes the page but doesn't post the from. Chrome just disables the button and doesn't post the from. – likeluke11 Kerr Dec 20 '15 at 00:09
  • 2
    sessions and tokens and a header. – Funk Forty Niner Dec 20 '15 at 00:09
  • You can't achieve it that simple. You would have to use sessions or read out IPs to check whether the user has already sent it, which is much too complicated. Maybe you would want a captcha that every time when somebody wants to send this form he/she/it has to verify that it's not a robot. – Luca Steeb Dec 20 '15 at 00:14
  • @Luca Steeb I'm wanting it to be simple, I don't mind it people are finding ways to spam my site. I just don't want users using my site sending a form twice. For example they signup but click the submit button twice they get the last one replying saying "Someone using this email/username" but its actually them as all that info was pass in the first from which creates the user account. – likeluke11 Kerr Dec 20 '15 at 00:24
  • @likeluke11Kerr - added demo code to prove it works - put it on a `.php` page and have a play. – Steve Jan 04 '16 at 20:03

2 Answers2

0

If I understood you correctly, you should try the following:

Instead of using inline javascript, I gave the submit input an id and use this javascript code:

var form = document.getElementById('sign'),
    submit = document.getElementById('submit');

submit.onclick = function() {
    submit.value='Submitting ..';
    form.submit();
};

https://jsfiddle.net/5kn2L7m9/3/

I also removed the .disabled = true because I think that's why the form wasn't submitting at all before. You should maybe do it by adding a class and removing the onclick event listener or check in the javascript if the form has been already sent.

Luca Steeb
  • 1,795
  • 4
  • 23
  • 44
  • Your understanding my point but It still doesn't work for me? Tried it on firefox and chrome. Have you tried getting the submitted from data? – likeluke11 Kerr Dec 20 '15 at 00:45
  • I still don't know whether me and the others who commented here get what you want to achieve.. – Luca Steeb Dec 20 '15 at 00:47
  • I tried your new code but now you can just spam the button. Its either the user can spam hit the button sending forms or disable the button after clicking on it which stops the from. Its really annoying. – likeluke11 Kerr Dec 20 '15 at 00:51
  • I have this too on my site and it works but with jquery and not my posted pure javascript solution. Are you using jquery? – Luca Steeb Dec 20 '15 at 01:03
0

You would need to make one of your required inputs enable the submit button - it arrives disabled - set by the init() function. I have done it for a textbox here to illustrate.

You will need to set a value in your JavaScript for $hidden_input when the textbox is typed into - it should be 0 when the page loads but be set to 1 when it is ready to submit. You could set it up in different ways with the value being set in PHP as well. That depends exactly how you want it to perform.

You should also set your form action to <?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>

You can use the value from the hidden input to block future submission - 

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

Bear in mind that this page is mostly dependent on JavaScript - just in case that may be an issue for those who don't like JavaScript dependency.

Steve
  • 808
  • 1
  • 9
  • 14