如何允许使用“提交”按钮和Enter键提交表单？

Question

I want the user to be able to submit a form by clicking the submit button or the enter key. I'm using jQuery and here's my code:

    <input id="weather"/>
    <button id="myButton" type="text">Response</button>
</div>

<script type="text/JavaScript">
    $("#myButton").keypress(function(event) {
        if (event.which == 13) {
            event.preventDefault();
            $("#myButton").submit();
        }
    });

    document.getElementById("myButton").onclick = function() {
        if (document.getElementById("weather").value.toLowerCase() != "nice" && document.getElementById("weather").value.toLowerCase() != "crappy") {
            alert("Please enter only either 'Nice' or 'Crappy.'");
        } else if (document.getElementById("weather").value.toLowerCase() == "nice") {
            alert("GREAT! Let's go the the BEACH!!");
        } else {
            alert("Hmm. That blows. Well then, I just won't be going outside today.")
        }
    };
</script>

Answer 1

<input type="text" id="weather" />
<input type="button" id="myButton" value="Response"/>

The onclick script should be

document.getElementById("myButton").onclick(function(){
  if (document.getElementById("weather").value.toLowerCase() !="nice" && document.getElementById("weather").value.toLowerCase() !="crappy") {
    alert("Please enter only either 'Nice' or 'Crappy.'");
  } 
  else if (document.getElementById("weather").value.toLowerCase() =="nice"){
    alert("GREAT! Let's go the the BEACH!!");
  } else {
    alert("Hmm. That blows. Well then, I just won't be going outside today.")
  }
});

Answer 2

You should use submit type of button. It should not be a text type.

Answer 3

Wrap the whole thing in a form tag and change the button type to submit . Enter will then submit the form.

<form> 
    <input id="weather"/>
    <button id="myButton" type="submit">Response</button>
</form>

JSFiddle

Answer 4

Best way is to wrap input and button with form and check input only in case of form submit like:

 $(function() { $("#weatherForm").submit(function(event) { event.preventDefault(); var $weatherElement = $('#weather'); if ($weatherElement.val() != "Nice" && $weatherElement.val() != "Crappy") { alert("Please enter only either 'Nice' or 'Crappy.'"); } else if ($weatherElement.val() == "Nice") { alert("GREAT! Let's go the the BEACH!!"); } else { alert("Hmm. That blows. Well then, I just won't be going outside today.") } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" id="weatherForm"> <input id="weather" name="weather" /> <input type="submit" id="myButton" value="Response" /> </form>