Submit page after 3 attempts

Asked

Viewed 167 times

-1

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.

javascript jquery

  • What do you mean, "on the fourth point to the destination page"? Even if the data is wrong to direct? And what did you try to do? You can ask the question the code?

  • "Submitting" and "trying to submit" are separate things.

  • It is an internal project, for security awareness.

  • But what exactly are you trying to do? If the user informs the wrong data appears a message, but the fourth time submit the independent form if the data are correct or not? That doesn’t seem to make sense.

  • @Anderson, It’s like a Wargame. To know how many people would fall into a Phishing. And the number of times typed to validate whether there was a typo or not.

2 answers

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

  • I wanted to understand the -1

  • I was not the one who gave -1, but I would like to comment: the unbind has already been discontinued from jQuery. Nor have I analyzed its response.

  • Ah, the unbind was replaced by . off

  • Well eh, isn’t it better to use an updated code? Version 3 is already in 3.2 already has a little time.

  • The . off was added in version 1.7

  • @Erlon, tomorrow I will study your code and integrate if possible. Thank you for your help.

  • @Erlon, your code did not work as I expected, I believe that due to lack of knowledge on my part, our friend above, it worked and I also managed to understand. Grateful for your help.

  • @dvd, grateful for your help too.

Show 3 more comments

1


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

  • :D Now liked the "Javascript Puro" right rascal? rss

  • @dvd hehehe, that is, if they had given answer with pure javascript, I maybe give an answer with jquery, the business is to show alternatives

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.