2013-12-03 8 views
6

У меня есть обычная форма HTML, в которой предполагается предотвратить отправку формы по умолчанию и отправку значений с помощью Ajax. Он не работает с моей настройкой. Пожалуйста, помогите мне, где я ошибся. Посмотрите на меня, как новичка в Jquery, JavaScripAjax Form submit with preventDefault

<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.css"> 

<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery-ui.css"> 
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.js">  </script> 
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.form.js"></script> 
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery-ui.min.js"></script> 
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.js"></script> 
<script type="text/javascript"> 
    $(function(){ 

     $("select").multiselect({ 
      selectedList: 4 
     }); 

    }); 
</script> 
<script type="text/javascript"> 
var frm = $('#contactForm1'); 
frm.submit(function (ev) { 
    $.ajax({ 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function (data) { 
      alert('ok'); 
     } 
    }); 

    ev.preventDefault(); 
}); 

Моя форма выглядит

<form action=index1.php id="contactForm1" method="post"> 
<p> 
    <select name="example-list[]" multiple="multiple" style="width: 400px; display: none;"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3">Option 3</option> 
    <option value="option4">Option 4</option> 

    </select> 
</p> 
<input class="text" type="submit" value='GO'> 
</form> 
</body> 
</html> 
+1

AFAIK, 'ev.preventDefault();' должен прийти на первый. а также вы должны обернуть свой код в событии dom. –

+0

@Mr_Green. Большое спасибо. – Prem

ответ

0

установить кнопку отправки в type="button" вместо type="submit",

и скажем, представить Кнопка имеет идентификатор submit-button. Вы можете отправить форму в JavaScript, как это:

$("#submit-button").click(function(){ 
//send ajax 
}) 
13

Оберните свой код в DOM Ready

$(function() { 
    var frm = $('#contactForm1'); 
    frm.submit(function (ev) { 
     $.ajax({ 
      type: frm.attr('method'), 
      url: frm.attr('action'), 
      data: frm.serialize(), 
      success: function (data) { 
       alert('ok'); 
      } 
     }); 
     ev.preventDefault(); 
    }); 
}); 
+0

Я бы переместил preventDefault до того, как Ajax не будет иметь форму, представляемую обычно в случае ошибки в части ajax – mplungjan