web-dev-qa-db-fra.com

Ajax Form submit avec preventDefault

J'ai un formulaire HTML normal dans lequel il est censé empêcher le formulaire par défaut de soumettre et de publier les valeurs par Ajax. Cela ne fonctionne pas avec ma configuration S'il vous plaît, aidez-moi là où je me suis trompé. Me voir comme novice à 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();
});

Ma forme ressemble à

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

Enveloppez votre code dans Prêt pour DOM

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

Votre page est-elle rafraîchissante lorsque vous soumettez le formulaire, même avec preventDefault()?

  1. Sur votre formulaire, mettez # dans l'attribut d'action et supprimez method.

  2. Modifier votre code JS

    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'); } }); });

Mettez preventDefault avant que votre ajax se déclenche. Ce qui se passe dans votre code est que votre formulaire est en cours d'exécution avec l'action et la méthode fournies en HTML. Par conséquent, votre JS ne peut pas l'attraper.

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

    //call ajax

e.preventDefault();
})
0
swathi