JavaScript value not set during form submit

Question

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.

The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.

For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.

Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.

<form  method="post" name="something" action="xxSome.php">
  <div class="s_row">
    <label for="zippy">Enter Zip Code</label>
    <input id="zipcode_home"  tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
    <input id="state3" name="state3"type="hidden"/>
    <input id="city3" name="city3" type="hidden"/>
    <input type="submit"  value="Start Now!"/>
  </div>
</form>

I've tried adding onsubmit @ the form level as such:

<form  method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
  <div class="s_row">
    <label for="zippy">Enter Zip Code</label>
    <input id="zipcode_home"  tabindex="2" type="text"  name="zipcode_home"/>
    <input id="state3" name="state3"type="hidden"/>
    <input id="city3" name="city3" type="hidden"/>
    <input type="submit"  value="Start Now!"/>
  </div>
</form>

And I've tried onblur without any luck @ the input level as such:

<form  method="post" name="something" action="xxSome.php">
  <div class="s_row">
    <label for="zippy">Enter Zip Code</label>
    <input id="zipcode_home"  tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
    <input id="state3" name="state3"type="hidden"/>
    <input id="city3" name="city3" type="hidden"/>
    <input type="submit"  value="Start Now!"/>
  </div>
</form>

After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.

I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.

Answer 1

您应该以onSubmit的形式执行getcitybyzip和getstatebyzip。

Answer 2

Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?