jquery – 使用preventDefault提交Ajax表单

我有一个普通的 HTML表单,它应该阻止默认表单提交并通过Ajax发布值.它无法使用我的设置请帮助我出错的地方.
在 Jquery,javascrip看到我作为新手

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

解决方法

在 DOM Ready中包装您的代码

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

jquery – 使用preventDefault提交Ajax表单

解决方法

猜你在找的jQuery相关文章