jQuery가 양식 및 페이지 새로 고치기를 회수하지 않습니다.

Question

제출해야하는 양식이 있고 Ajax 및 jQuery를 사용하여 mysql에 데이터를 전송했지만 제출을 클릭하면 페이지가 새로 고쳐지고 jQuery 코드가 실행되지 않습니다. 여기

<form class="form-horizontal" role="form" action="" method="post"> 
     <input type="text" id="firstname" class="form-control" placeholder="Firstname" required=""></br> 
     <input type="text" id="lastname" class="form-control" placeholder="Lastname" required=""></br> 
     <input type="text" id="signup_email" class="form-control" placeholder="Email address" required=""></br> 
     <select id="gender" class="form-control"> 
      <option>Select Gender</option> 
      <option value="male">Male</option> 
      <option value="female">Female</option> 
     </select></br> 
     <input type="password" id="signup_password" class="form-control" placeholder="Password" required=""> 
     <input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up"> 
    </form> 

그리고 내 jQuery를 다음과 같습니다 :

<script type="text/javascript"> 
    $(function()){ 
     $("#signup_button").click(function() { 
      var firstname = $("input#firstname").val(); 
      var lastname = $("input#lastname").val(); 
      var email = $("input#signup_email").val(); 
      var gender = $("select#gender").val(); 
      var password = $("input#signup_password").val(); 

      var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname'&email='+email+'&gender='+gender+'&password='+password; 

      $.ajax({ 
       type:"POST"; 
       url:"api/signup.php"; 
       data: datastring; 
       cache: true; 
       success: function(html) { 
        $.("#alert_succes_congrats").css('display', ''); 
       } 
      }) 
      return false; 
     }) 
    } 
</script> 

감사합니다

여기 내 HTML 코드입니다.

이

1 옵션 :

변경

<input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up"> 

<input type="button" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up"> 

너무 버튼이 양식을 트리거하지 않습니다

Answer 1

당신의 코드가 구문 오류가 많이 있습니다

$(function()){ 

이

$(function(){ 

이어야한다 플러스 아약스 회원 쉼표가 아닌 세미콜론으로 구분되어야한다, 문자열 연결에 문제가 거기 있었다 잘. 다음에 이런 일이 발생하면 브라우저 콘솔에서 자바 스크립트 문제를 확인하십시오.

이 클릭 이벤트로 양식 제출을 수신하지 마십시오

<script type="text/javascript"> 
$(function(){ 
    $("#signup_button").click(function() { 
     var firstname = $("input#firstname").val(); 
     var lastname = $("input#lastname").val(); 
     var email = $("input#signup_email").val(); 
     var gender = $("select#gender").val(); 
     var password = $("input#signup_password").val(); 

     var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname+'&email='+email+'&gender='+gender+'&password='+password; 

     $.ajax({ 
      type:"POST", 
      url:"api/signup.php", 
      data: datastring, 
      cache: true, 
      success: function(html) { 
       $("#alert_succes_congrats").css('display', ''); 
      } 
     }); 
    return false; 
    }); 
}); 

Answer 2

당신은 당신의 문제를 해결하기 위해 두 가지 옵션이 있습니다 제출하십시오.

2 옵션 :

당신의 클릭 핸들러에서에서는 event.preventDefault을 넣습니다.

$("#signup_button").click(function(event) { 
    /* Your stuff */ 
    event.preventDefault(); 
} 

따라서 제출 버튼을 구성하기위한 브라우저 기본 동작을 트리거하지 않습니다.