2013-09-06 2 views
0

사용자가 뉴스 레터에 가입 할 수있는 양식이 있지만 제대로 제출할 수 없습니다.Jquery ajax 양식이 제출되지 않았습니다. 오류 기능에 곧바로 돌아 가기

제출 버튼을 클릭하면 "실패"라는 경고 메시지가 표시되므로 ajax 요청이 ajax 요청의 오류 집계로 곧바로 전환됩니다.

내 PHP에서는 $ _POST 변수를 모두 가져 와서 데이터베이스에 삽입하고 스크립트가 작동하고 있음을 알고 있습니다. 메시지를 사용자에게 표시 할 수 있도록 아약스 성공으로 메시지를 되돌리고 싶습니다.

나는 해결책을 찾아 본 적이 없으므로 찾을 수 없습니다.

<?php 
    echo "done"; 
?> 

및 JQuery와

<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#mlbutton').click(function() { 

      var name = $('#mlName').val(); 
      var email = $('#mlEmail').val(); 

      $.ajax({ 
       type:'POST', 
       url: 'storeAddress.php', 
       data:$('#addressform').serialize(), 
       success: function(response) { 
        $('#addressform').find('#response').html(response); 
        alert(response); 
       }, 
       complete: function() { 
        $('#addressform').each(function() { 
         this.reset(); 
        }); 
       }, 
       error: function(){ 
        alert('failure'); 
       } 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
<form id="addressform"> 
    <div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div> 
    <div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div> 
    <div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="dffhfdh" class="button-signup" /></div> 
    <p id="response" style="text-align: left"> </p> 
</form> 
</body> 
</html> 

업데이트

추가 e.preventDefault와 형태(); // 이벤트가 발생했을 때 기본값으로 전화를 겁니다

이제 오류 메시지가 중지되지만 PHP 파일이 호출되지 않은 것 같습니다. 나는 php 파일을 테스트했고 아무런 이메일 주소도 제공하지 않았기 때문에 나는 예상했던 메시지를 얻는다. 이메일 주소를 입력하지 않고 양식을 클릭하면 같은 메시지가 표시되지만 아무 것도 기대하지 않습니다. 이메일 주소를 입력하면 이메일이 데이터베이스에있을 것으로 예상되지만 아무 일도 일어나지 않습니다. php 파일이 호출되지 않는 것 같습니다

+1

event.preventDefault(); – bwoebi

+0

파일이 있습니까? 'storeAddress.php'? – undone

+0

요청 및 응답을 보려면 브라우저에서 일종의 개발자 도구를 사용해보십시오 (예 : 브라우저에서 F12를 클릭하십시오). – Alex

답변

1

폼의 기본 동작을 방지 할 수 있어야합니다.

$('#mlbutton').click(function(e) { //added event as argument 
    e.preventDefault(); //call prevent default on event 
    var name = $('#mlName').val(); 
    var email = $('#mlEmail').val(); 

    $.ajax({ 
     type:'POST', 
     url: 'storeAddress.php', 
     data:$('#addressform').serialize(), 
     success: function(response) { 
      $('#addressform').find('#response').html(response); 
      alert(response); 
     }, 
     complete: function() { 
      $('#addressform').each(function() { 
       this.reset(); 
      }); 
     }, 
     error: function(){ 
      alert('failure'); 
     } 
    }); 
}); 
+0

나는 이것을 시도했지만 양식이 제출하지 않을 실패 메시지를 막습니다. 나는 메시지를 기대하고 있지만 아무 것도 ... 어떤 생각? – AdRock

+0

경고가 발생합니까? 그래서 아약스 요청을 제출하고 제출할 양식을 원하십니까? 당신이 뭘 기대하는지 조금 더 말해줘. –

+0

사용자가 양식을 작성하고 제출 버튼을 클릭합니다. Ajax는 storeAddress.php에 양식을 제출해야합니다. StoreAddress.php는 POST 변수를 가져 와서 데이터베이스에 삽입합니다. Ok를 삽입하면 표시 및 오류 메시지를 확인하는 메시지를 사용자에게 표시합니다. – AdRock

1

버튼이 페이지를 전송하지 못하게해야 AJAX를 실행할 수 있습니다.

$('#mlbutton').click(function(e) { 
    e.preventDefault(); 
    .... 
관련 문제