The html form prohibits sending when clicking input on a specific input

Question

I have an html form with some input fields in it, one of the input fields is a search field, when I click the search button next to this search field, the search results will be returned from the server using ajax, what I want is to prevent sending forms when the user focuses on that particular search input field and press enter. By the way, I use AngularJS, so the solution may be slightly different from jQuery or pure javascript, as I think .. Do-able? Any advice would be appreciated!

Answer 1

In the button click handler, execute e.preventDefault()

 function clickHandler(e){ e.preventDefault(); } 

You can also use button instead of submit button.

Answer 2

Use a function such as:

 function doNothing() { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if( keyCode == 13 ) { if(!e) var e = window.event; e.cancelBubble = true; e.returnValue = false; if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } } 

 <form name="input" action="http://www.google.com" method="get"> <input type="text" onkeydown="doNothing()"> <br><br> <input type="submit" value="Submit"> </form> 

JSFIDDLE HERE

Answer 3

 When you submit form using enter key on particular text fields or submit button(focus). To prevent form submit twice, we can use both approach 1. define var isEnterHitOnce=true globally which loaded at the time of form load on keyPress Event or on submitForm() if(event.keycode==13 && isEnterHitOnce){ isEnterHitOnce=false; //Process your code. Sent request to server like submitForm(); } isEnterHitOnce=false; 2. disable the field object from where you received the action like beginning of method in formSubmit() document.getElementById(objName).disabled=true; // objName would be your fields name like submitButton or userName //At the end of method or execution completed enable the field document.getElementById(objName).disabled=false;