В JQuery UI вкладываете нам форму и с помощью ajax отправьте ее

Question

Я использовал плагин jquery UI tabs на своей странице и на одной из вкладок я поместил форму. Так, например, вкладка вызывает страницу form.php, которая имеет тег формы html. Теперь form.php использует ajax и jquery для отправки формы. Это звучит выполнимо.

    $(document).ready(function(){

    $("form#formdata").submit(function() {

            var str = $("#formdata").serialize();
            $.ajax({
            type: "POST",
            url: "submit.php",
            data: $("#formdata").serialize(),
            success: function(msg){
                     alert(msg);
                    }
    });

return false; });

});

ТАК, приведенный выше код входит в мою форму. Php

Форма отправляется, но не через ajax и направляется на submit.php Я хочу отразить результат на вкладках своего пользовательского интерфейса.

Пожалуйста, предложите .. спасибо

РЕДАКТИРОВАТЬ: я поставил предотвратимую ошибку () и вернул ложь, но это не помогло ..

Answer 1

event.preventDefault () является предпочтительным способом обработки этого

$(document).ready(function() {
  $('form#formdata').submit(function(event) {
    event.preventDefault();
    var str = $('#formdata').serialize();
    $.ajax({
      type: 'POST',
      url:  'submit.php',
      data: $('#editmachine').serialize(),
      success: function(msg) { alert(msg); }
    });
  });
});

Answer 2

поместите return false в функцию отправки формы после вызова ajax.

Answer 3

Наконец-то я все заработал.

Это то, что я сделал.

в коде моих вкладок пользовательского интерфейса

<div id="tabs">
            <ul>
                <li><a href="link.html">Link1</a></li>
                <li><a href="form.html">Data</a></li>
            </ul>
</div>

form.html содержал детали формы, и оттуда я использовал ajax.

ТАК, чтобы исправить это, я использовал детали формы на той же странице под div, как это

<div id="tabs">
                <ul>
                    <li><a href="link.html">Link1</a></li>
                    <li><a href="#form">Data</a></li>
                </ul>

<div id = "form">
//form details here
</div>

    </div>

И использовал код jjery ajax на этой странице.

Спасибо всем, кто ответил на мой вопрос и особая благодарность @ cheekysoft

Надеюсь, это пригодится и пригодится ..

Answer 4

Вы должны предотвратить это поведение, возвращая false в событие submit:

$(document).ready(function(){

    $("form#formdata").submit(function() {

            var str = $("#formdata").serialize();
            $.ajax({
            type: "POST",
            url: "submit.php",
            data: $("#editmachine").serialize(),
            success: function(msg){
                     alert(msg);
                    }
    });
return false;
    });

});