it-swarm.com.de

Ajax Form mit preventDefault senden

Ich habe ein normales HTML-Formular, in dem verhindert werden soll, dass Standardformulare die Werte von Ajax senden und veröffentlichen. Es funktioniert nicht mit meinem Setup Bitte helfen Sie mir, wo ich schief gelaufen bin. Sehen Sie mich als Neuling in 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();
});

Mein Formular sieht aus wie

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

Wickeln Sie Ihren Code in 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();
    });
});
14
Tushar Gupta

Wird Ihre Seite aktualisiert, wenn Sie das Formular auch mit preventDefault() absenden?

  1. Fügen Sie in Ihrem Formular # in das Aktionsattribut ein und entfernen Sie method.
  2. Ändern Sie Ihren JS-Code

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

Setzen Sie preventDefault, bevor Ihr Ajax ausgelöst wird. Was in Ihrem Code passiert, ist, dass Ihr Formular mit der in HTML bereitgestellten Aktion und Methode ausgeführt wird. Daher kann Ihr JS es nicht erfassen.

0
Adis
$('#submit').click(function(e){

    //call ajax

e.preventDefault();
})
0
swathi