jQueryとAJAXでフォームを処理する

Question

jQueryとAJAXでフォームを送信する方法はさまざまでしたが、どれも動作していないようです。現在、フォームが提出されると、出力を表示するためにバックエンドPHPスクリプトにリダイレクトされるように、コード化されています。

私がしたいことは、バックエンドスクリプトからこの出力を取り出し、別のページにリダイレクトせずにフォームが提出されたら、そのページのdivに表示することです。

フォームと私は結果が、それはまだServerManagerのにリダイレクトし、このコードで

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

に行きたいのdiv：ここでは、今のようにコードがあります。 phpページにジョブの投稿テキストが表示されます。どのようにこれを修正することができます任意のアイデア？私はそれがあまりにも難しいものではないと確信していますが、私は今かなり長い間これに固執しています。どんな助けでも大歓迎です。

Answer 1

onSubmit=document.form1.submit();を削除し、<input type='SUBMIT'を<input type='BUTTON'に変更してください。

これはすでにjQueryで処理されています。

また、フォームの名前はIDである必要があります。

Answer 2

はあなたのjs右トリガーを使用していませんでした。この

<input type='BUTTON' value='GO' name='btnGo' /> 

Answer 3

にこの

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

を変更します。

このような何か試してみてください：たとえば

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

Answer 4

を、あなたはこのようなフォームの送信を防ぐことができます：

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

    evt.preventDefault(); 

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

Answer 5

私はエヴァンに同意します。 AJAX呼び出しを使用しているため、HTMLにonSubmitを入れる必要はありません。

また、JQuery Ajaxフォームプラグインを参照することをお勧めします.JQuery Ajaxフォームプラグインを使用すると、フォームの処理が簡単になります。

リンク：http://jquery.malsup.com/form/

あなたがする必要があるすべては、あなたのHTMLの頭の中でスクリプトを含めると、あなたは覚えて、入力＃btnGo &フォーム＃1のForm1を使用している以下の

$(document).ready(function() { 

     $('yourFormID').ajaxForm(function() { 
      alert("prepare your form to be submitted."); 
     }); 
     $('yourFormID').ajaxSubmit(); 
     return false; 
}); 

Answer 6

ような何かを行うです＃あなたがIDを提供する必要があるので、これを試してみてください。

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