jQueryを使用してフォームを送信する[終了]

jQueryを使用してフォームを送信したい。誰かがコード、デモ、またはサンプルリンクを提供できますか？

フォームを通常どおり送信するか、AJAX呼び出しで送信するかによって異なります。jquery.comで、例付きのドキュメントを含む多くの情報を見つけることができます。フォームを正常に送信するには、submit()そのサイトでメソッドを確認してください。以下のためにAJAXあなたはおそらくいずれかを使用したいけれども、多くの異なる可能性があるajax()かpost()の方法を。これpost()はajax()、シンプルで制限されたインターフェースでメソッドを呼び出す便利な方法にすぎないことに注意してください。

私が毎日使用している重要なリソースは、jQueryの仕組みです。です。jQueryの使用に関するチュートリアルがあり、左側のナビゲーションからすべてのドキュメントにアクセスできます。

例：

正常

$('form#myForm').submit();

AJAX

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

上記のajax()およびpost()メソッドは同等です。ajax()エラーなどを処理するためにリクエストに追加できる追加のパラメーターがあります。

使用する必要があります$("#formId").submit()。

通常、これは関数内から呼び出します。

例えば：

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

これについて詳しくは、JqueryのWebサイトを参照してください。

あなたが既存のフォームを持っているとき、それは今jqueryで動作するはずです-ajax / post今あなたはできるでしょう：

• 送信-フォームのイベント
• 送信のデフォルト機能を防止する

• 自分でやる

  $(function() {
      //hang on event of form with id=myform
      $("#myform").submit(function(e) {
  
          //prevent Default functionality
          e.preventDefault();
  
          //get the action-url of the form
          var actionurl = e.currentTarget.action;
  
          //do your own request an handle the results
          $.ajax({
                  url: actionurl,
                  type: 'post',
                  dataType: 'application/json',
                  data: $("#myform").serialize(),
                  success: function(data) {
                      ... do something with the data...
                  }
          });
  
      });
  
  });

serialize()上記の例で関数が機能するためには、すべてのフォーム要素のname属性が定義されている必要があることに注意してください。

フォームの例：

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@PtF-このサンプルではPOSTを使用してデータが送信されるため、次の方法でデータにアクセスできます

 $_POST['dataproperty1'] 

ここで、dataproperty1はjsonの「変数名」です。

CodeIgniterを使用する場合のサンプル構文は次のとおりです。

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

jQueryでは、次のようにします。

$("#form-id").submit()

しかし、繰り返しになりますが、そのタスクを実行するためにjQueryは本当に必要ありません。通常のJavaScriptを使用するだけです。

document.getElementById("form-id").submit()

マニュアルから：jQuery Doc

$("form:first").submit();

誰かが使用する場合の情報

$('#formId').submit();

このようなことはしないでください

<button name = "submit">

submit（）がこのように機能しないことを見つけるのに何時間もかかりました。

jqueryを使用してフォームを送信するために使用します。ここにリンクがありますhttp://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

これにより、プリローダー付きのフォームが送信されます。

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

フォームデータポストをランダムな方法で再作成するいくつかのトリックがありますhttp://www.jackart4.com/article.html

$("form:first").submit();

events / submitを参照してください。

フォームの送信イベントリスナーをすでにインストールしている場合は、submit（）の内部呼び出し

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

しません仕事、それはのは、イベント（失敗）を提出し、このフォームの新しいイベントリスナーをインストールしようとします。したがって、HTML要素自体にアクセスし（jQqueryからアンラップ）、この要素でsubmit（）を直接呼び出す必要があります。

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

jquery formプラグインを使用して、ajaxを使用して送信することもできます。

http://malsup.com/jquery/form/

jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Internet Explorerでは、動的に作成されたフォームに問題があることに注意してください。このように作成されたフォームはIE（9）では送信されません。

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

IEで機能させるには、フォーム要素を作成し、送信する前に添付します。

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

例1のようにフォームを作成してからアタッチすると機能しません-IE9ではJScriptエラーがスローされます DOM Exception: HIERARCHY_REQUEST_ERR (3)

トミーW @ https://stackoverflow.com/a/6694054/694325への小道具

これまでの解決策では、フォームのIDを知っている必要があります。

このコードを使用して、IDを知らなくてもフォームを送信できます。

function handleForm(field) {
    $(field).closest("form").submit();
}

たとえば、ボタンのクリックイベントを処理したい場合は、

$("#buttonID").click(function() {
    handleForm(this);    
});

ボタンがフォームタグの間にある場合、私はこのバージョンを好みます：

$('.my-button').click(function (event) {
    var $target = $( event.target );
    $target.closest("form").submit();
});

あなたはこのようにそれを使うことができます：

  $('#formId').submit();

または

document.formName.submit();

動的フォームのIEトリック：

$('#someform').find('input,select,textarea').serialize();

私のアプローチは少し異なりますボタンを送信ボタンに変更してからクリックしてください

$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});

function  form_submit(form_id,filename){
    $.post(filename,$("#"+form_id).serialize(), function(data){
        alert(data);
    });
}

AJAXを介して、指定したファイル名のフォームデータを投稿します。

すべてのフォームにコードを追加する必要がないように、一般的なソリューションをお勧めします。jqueryフォームプラグイン（http://jquery.malsup.com/form/）を使用して、このコードを追加します。

$(function(){
$('form.ajax_submit').submit(function() {
    $(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

あなたはこのようにそれを行うことができます：

$('#myform').bind('submit', function(){ ... });

また、Ajaxを介してフォームを（実際には送信せずに）送信するために、以下を使用しました。

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });