Question

 <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?

Answer 1

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.