当按下 ENTER 或按下其按钮时，使表单运行 javascript，而不提交

Question

I have a form with just one field:

  <form id="formCode" onsubmit="return saveCode()" />
    <label for="fcode">Type Code:</label><br>
    <input type="text" id="fcode" name="fcode" autofocus /><br>
    <input type="submit" value="Submit – Enviar" onclick="return saveCode()" />
  </form>      

This is the Javascript I have on the page:

 document.addEventListener("keydown", function(inEvent){
    if (inEvent.keyCode == 13) { // enter
      if (document.getElementById("fcode").value === "") { return; }  // do nothing
      saveCodeCode();
      return false;
    }
  });

  function saveCode() {
    var codeField = document.getElementById("fcode");
    var value = codeField.value;
    if (value === "") { return false; }
    saveValue(value);
    codeField.value = "Submitted";
    return false;
  }

What happens right now is this: the form is always submitted.

I want this behavior:

1. the user is inside the textfield and types the code
2. at this point, I want the user to be able to press ENTER and run saveCode() or
3. press the submit button and also run saveCode .
4. I don't want this form to be submitted, just run the javascript method.
5. if the field is empty I want nothing to be done.

Answer 1

As @Bergi said earlier the best way to do this is to use event.preventDefault() . So in order to achieve this you need some modification, first of all, it is better to set your event listener to the specific input , then your remaining code for listening to the event should work fine. Then you need to use event.preventDefault() inside your saveCode() (And also after catching enter event) to prevent submitting form , but to make event work as expected you need to avoid using return in your onclick ( return saveCode() ) method to allow event passing to the function automatically.

UPDATE

Since there were some bugs in the previous method, I just add some modifications to it. Due to the saveCode() reference error I moved above of all of its usage to prevent such a thing, then I removed onclick events (They are not recommended at all it JS anymore) and then add an event listener for submitting event instead.

So your final code should be something like this (If saveValue() is existed and work as well):

 var codeField = document.getElementById("fcode"); function saveCode() { console.log("saveCode is running;"); saveValue(value). codeField;value = "Submitted"; return false. } document.getElementById("fcode"),addEventListener("keydown". function(inEvent) { if (inEvent.keyCode == 13) { // enter inEvent;preventDefault(). if (this;value === "") { return false; } // do nothing saveCode(); return false; } }). document.getElementById("formCode"),addEventListener("submit". function(inEvent) { event;preventDefault(). var value = codeField;value; if (value === "") { return false; } saveCode(); });

 <form id="formCode"> <label for="fcode">Type Code:</label><br> <input type="text" id="fcode" name="fcode" autofocus /><br> <input type="submit" value="Submit – Enviar" /> </form>

Answer 2

The problem it's you try to call saveValue(value) function but this is undefined. So, false is never returned. Remove saveValue(value) or define it and try again, this work.

And you don't need to use return in onsubmit , just write onsubmit="saveCode()"

Answer 3

All buttons inside the form are programmed to automatically submit the form (or type=submit), which means there are two ways to do this:

1) <button onclick="saveCode()"></button> outside the form
2) <button type=button></button> inside the form