Обработка формы с помощью jQuery и AJAX - PullRequest
Новая
       8

Обработка формы с помощью jQuery и AJAX

0 голосов
/ 02 августа 2011

Я пробовал много разных способов отправки формы с помощью jQuery и AJAX, однако ни один из них, похоже, не работает.То, как это кодируется прямо сейчас, делает так, чтобы при отправке формы он перенаправлялся в мой php-скрипт бэкэнда для отображения вывода.

Что я хочу сделать, это взять этот вывод из бэкэнд-скриптаи отобразить его в div на странице после отправки формы, без перенаправления на другую страницу.Вот код на данный момент:

Форма и div Я хочу, чтобы результаты вводились в 

    <form method='post' action='serverManager.php' name='form1'>
        <input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); />
        <input type='HIDDEN' name='ACTION' value='GO' />
    </form>
    <div id="result"></div>

Ajax-вызов 

  $('input#btnGo').click( function() {
  $.ajax({
        url: 'serverManager.php',
        type: 'post',
        data: $('form#form1').serialize(),
        success: function(data) {
               $('#result').html(msg);
             }
   });
});

С этим кодомпо-прежнему перенаправляет на страницу serverManager.php с текстом заявки на работу.Есть идеи, как это можно исправить?Я уверен, что это не так уж сложно, но я застрял в этом довольно давно.Любая помощь будет высоко ценится.

Ответы [ 6 ]

2 голосов
/ 02 августа 2011

Я согласен с Эваном. Нет необходимости помещать onSubmit в HTML, потому что вы используете вызов AJAX.

Кроме того, я бы посоветовал вам взглянуть на JQuery Ajax Form Plugin, который значительно облегчит работу с формой.

Ссылка: http://jquery.malsup.com/form/

Все, что вам нужно сделать, это включить скрипт в заголовок HTML и сделать что-то вроде следующего: 

$(document).ready(function() { 

      $('yourFormID').ajaxForm(function() { 
          alert("prepare your form to be submitted."); 
      }); 
       $('yourFormID').ajaxSubmit();
       return false;
});
1 голос
/ 02 августа 2011

вы используете input # btnGo & form # form1, помните, что # относится к идентификатору, а не к имени, поэтому вам нужно указать идентификатор, также попробуйте это, 

    <form method='post' action='serverManager.php' name='form1' id='form1'>
    <input type='SUBMIT' value='GO' name='btnGo' id='btnGo' />
    <input type='HIDDEN' name='ACTION' value='GO' />
    </form> 

    $('input#btnGo').click( function() {
          $.ajax({
             url: 'serverManager.php',
             type: 'post',
             data: $('form#form1').serialize(),
             success: function(data) {
                   $('#result').html(msg);
         });
     });
0 голосов
/ 02 августа 2011

Например, вы можете запретить отправку формы следующим образом: 

$("form[name='form1']").submit(function(evt){

   evt.preventDefault();

   $.ajax({
        url: 'serverManager.php',
        type: 'post',
        data: $('form#form1').serialize(),
        success: function(data) {
               $('#result').html(msg);
             }
   });
});
0 голосов
/ 02 августа 2011

Вы не использовали правильный триггер в вашем JS.

Попробуйте что-то вроде этого: 

$('input#btnGo').submit(function(event) {
    event.preventDefault();  
    $.ajax({
        url: 'serverManager.php',
        type: 'post',
        data: $('form#form1').serialize(),
        success: function(data) {
           $('#result').html(msg);
         }
   });
});
0 голосов
/ 02 августа 2011

изменить это 

<input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); />

к этому 

<input type='BUTTON' value='GO' name='btnGo' />
0 голосов
/ 02 августа 2011

Удалите onSubmit=document.form1.submit(); и измените <input type='SUBMIT' на <input type='BUTTON'.

С jQuery об этом уже позаботились.

Кроме того, имя вашей формы должно быть идентификатором.

...