Submit page after 3 attempts

Question

I have this simple form:

    <form class="form-horizontal"  >
<fieldset>

<!-- Text input-->
<div class="form-group" align="center">
  <label class="col-md-4 control-label" for="textinput"></label>  
  <div class="col-md-4">
  <input id="textinput" name="textinput" type="text" placeholder="Login " class="form-control input-md">
  <span class="help-block"></span>  
  </div>
</div>

<!-- Password input-->
<div class="form-group" align="center" >
  <label class="col-md-4 control-label" for="passwordinput"></label>
  <div class="col-md-4">
    <input id="passwordinput" name="passwordinput" type="password" placeholder="Senha " class="form-control input-md" >
    <span class="help-block"></span>
  </div>
</div>

<!-- Button -->
<div class="form-group" align="center" id=addCount>
  <label class="col-md-4 control-label" for="singlebutton"></label>
  <div class="col-md-4">
   <button id="contador" name="singlebutton"  class="btn btn-primary">Enviar</button>

  </div>
</div>

</fieldset>
</form>

I need three alerts to be issued after submitting this form on the fourth attempt to direct to the destination page. Is it possible? I tried via javascript, but without success.

Answer 1

Although you don’t understand the reason, you can keep the event .submit() using the .preventDefault() to prevent the submission of the form and then using the .unbind("submit").submit() to ignore the .preventDefault() and submit the form normally.

$(document).ready(function(){
  var tentativa = 0;
  $("form").submit(function(event){
    event.preventDefault();
    tentativa++;
    if (tentativa > 3) {
      $("form").unbind("submit").submit();
    } else {
      alert("Tentativa " + tentativa);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="submit" value="enviar">
</form>

If you are using jquery 3.X replaces the .unbind() for .off(), since the unbind was discontinued as of version 3.x

Answer 2

Pure Javascript without library

Create a javascript function that counts the clicks on the button type="button" and after third try change the button to type="submit"

	var clicks=0;
	var incrementCount = function(){
	    clicks++;
	    
	    if (clicks==1){
	      alert("alerta 1");
	    }else if (clicks==2){
	      alert("alerta 2");
	    }else if (clicks==3){
	      alert("alerta 3");
	      document.getElementById("demo").innerHTML = '<button type="submit"  id="contador" name="singlebutton"  class="btn btn-primary" />Enviar</button>';
	    }   
	}

<form class="form-horizontal" action="/">
<fieldset>

<!-- Text input-->
<div class="form-group" align="center">
  <label class="col-md-4 control-label" for="textinput"></label>  
  <div class="col-md-4">
  <input id="textinput" name="textinput" type="text" placeholder="Login " class="form-control input-md">
  <span class="help-block"></span>  
  </div>
</div>

<!-- Password input-->
<div class="form-group" align="center" >
  <label class="col-md-4 control-label" for="passwordinput"></label>
  <div class="col-md-4">
    <input id="passwordinput" name="passwordinput" type="password" placeholder="Senha " class="form-control input-md" >
    <span class="help-block"></span>
  </div>
</div>

<!-- Button -->
<div class="form-group" align="center" id=addCount>
  <label class="col-md-4 control-label" for="singlebutton"></label>
  <div class="col-md-4">
   <div id="demo"><button type="button" id="contador" name="singlebutton"  class="btn btn-primary"  onclick="incrementCount();">Enviar</button>
</div>

  </div>
</div>

</fieldset>
</form>

About the type attribute of Buttons

1. Submit: The button sends the form data to the server.
2. button: The button has no default behavior. It may have client-side scripts associated with element events, in which they are triggered when the event occurs.

<button> - Mozilla Developer Network