jQuery: toggle button issues with form action

 开发者_如何学Go<form action="index.php?page=checkin" method="post" name="regForm">
            Fullständiga namn: <input name="full_name" type="text" id="full_name" class="required"> 
    <br >
    Email: <input name="usr_email" type="text" id="usr_email3" class="required email"> 
    <br>
            Sex: <select name="sex"><option value="male">Kille</option><option value="female">Tjej</option></select>
   <input type="submit" id="t" value="CheckIn">
      <script>
   $("#t").click(function () {
$("#Next_2").toggle();
});
</script>
  <br>
  <div id="Next_2" style="display: none">
       Lösenord: <input name="pwd" type="password" class="required password" id="pwd"> <br>
            En gång till..
     <input name="pwd2" id="pwd2" class="required password" type="password" >

   <br>
          <input name="doRegister" type="submit" id="doRegister" value="Register">
    </div>
      </form>

I have this form. But my problem is when i press on the CheckIn that toggles the two other form elements, it thinks it should action="index.php?page=checkin", which i want it to do on the next button (register), how should i do this right?

---

You should return false; to prevent the default behavior of the button.

$("#t").click(function () {
    $("#Next_2").toggle();
    return false;
});

Alternatively, you could call event.preventDefault():

$("#t").click(function ( event ) {
    event.preventDefault()
    $("#Next_2").toggle();
});

• http://api.jquery.com/event.preventDefault/

The difference is that return false; will also prevent the event from bubbling. I don't think that's an issue here, so either method should work.

---

You should change this:

<input type="submit" id="t" value="CheckIn">

To this:

<input type="button" id="t" value="CheckIn">

The "submit" input type is actionable by implementation to submit the form it is contained in, so clicking it forces the browser to do so.

---

theres 2 ways you can solve it.

1) leave your markup the same and change the script:

$("#t").click(function () {
    $("#Next_2").toggle();
    return false; // this will stop the button from continuing its regular event
});

2) while 1. is ok its better to change your markup to something semantic. It makes no sense to have a submit button that doesn't submit. Therefore its better semantically to change your submit button to just a regular button:

<button type="button" id="t">CheckIn</button>

also this way you don't have to change your script