CODEWITHSUNDEEP
javascriptjqueryhtml
Benjamin Warren
Benjamin Warren

Reputation: 3

Pressing Enter reloads page instead of submitting form

I have a form that takes a ZIP Code input and forwards the user to one of two URLs depending on the input. Everything works great when you click the submit button, however, pressing enter reloads the page, I have gone through about 30 similar forums to no avail. I have tried multiple things including changing the submit button type from button to submit. I have tried several snippets to force the enter key to do what I want but none of them have worked. It just keeps reloading the page. Here is the code that I currently have on the site: 

<div align="center">
  <script type="text/javascript">
    //<![CDATA[
    function zipValidate() {

        val = document.zipForm.zip.value;

        switch (val) {
          case '94005':
            document.location = 'http://www.crossborderscheduling.com/home/calendar/';
            break;

          default:
            document.location = 'http://crossborder.fedex.com/us/';
            break;

        }
      }
      //]]>
  </script>
  <form name="zipForm" id="zipForm" method="post">
    <input name="zip" type="text" id="zip" maxlength="5" size="10%" placeholder="Zip Code" />
    <input name="zipButton" type="button" id="zipButton" value="Submit" onclick="zipValidate()" />
  </form>
</div>

Upvotes: 0

Views: 4008

Answers (2)

zzzzBov
zzzzBov

Reputation: 179046

<form> has a default [action] of "" which means that when the form is submitted, the data will be posted to the current page.

Your <input name="zipButton"...> element uses type="button" instead of type="submit" and you've bound an onclick event handler to it.

Clicking the #zipButton element doesn't actually submit the form, which is why your zipValidate callback works.

Pressing Enter while focused on the #zip field will trigger the implicit submission behavior for the form, which triggers the submit event on the form element, and completely ignores the #zipButton click callback.

So how do you fix it?

Let's start by fixing the HTML:

<form name="zipForm" id="zipForm" method="post">
  <input name="zip" type="text" id="zip" maxlength="5" size="10" placeholder="Zip Code" aria-label="Zip Code" />
                                                    1: ^^^^^^^^^                     2: ^^^^^^^^^^^^^^^^^^^^^
  <input name="zipButton" type="submit" id="zipButton" value="Submit"  />
                       3: ^^^^^^^^^^^^^                            4: ^
</form>
  1. the [size] attribute should have a value that is a non-negative integer
  2. as you're not using a <label> element, it's important to provide a label for accessibility. The [placeholder] attribute is not an adequate substitute.
  3. the button should use the submit type
  4. keep your JavaScript out of your HTML

Now that the HTML has been cleaned up, let's look at the JavaScript:

<script>
// 1 ^^^,
// 2
function zipValidate() {
  // 3
  var val,
      action;
  // 4
  val = document.getElementById('zip').value;
  switch (val) {
    case '94005':
      // 5
      action = 'http://www.crossborderscheduling.com/home/calendar/';
      break;
    default:
      action = 'http://crossborder.fedex.com/us/';
      break;
  }

  // 6
  this.setAttribute('action', action);
}

// 7
document.getElementById('zipForm').addEventListener('submit', zipValidate, false);
</script>
  1. don't use [type="text/javascript"], it hasn't been necessary for a very long time
  2. don't use CDATA, it too hasn't been necessary for a very long time
  3. declare your variables
  4. don't use implicit global references by ID, instead query the DOM using one of the DOM searching methods: getElementById, getElementsByTagName, getElementsByClassName, querySelector, or querySelectorAll
  5. store the URL you want to submit the form to. An if statement or ternary operator would have sufficed, but I left the switch because it hardly matters for this case.
  6. set the [action] attribute for the form to tell the form where it's about to submit to. You don't need to call preventDefault on the event, because the submission behavior will take care of the redirect that you're after.
  7. bind the event handler to the form from JavaScript. You may need to rearrange where the script is executed in the DOM, or wait for document.onreadystatechange so that the #zipForm element exists when you attempt to bind an event to it.

Upvotes: 4

user212514
user212514

Reputation: 3130

To prevent the form from submitting you need to return false in your onclick code. To do that you might change it to:

onclick="zipValidate() && return false;"

Alternatively you could modify your function to return false and then change onclick to:

onclick="return zipValidate();"

Upvotes: -1

Related Questions