jQueryを使用してフォームを送信する



Answers

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

一般的には、関数内からこれを呼び出します。

例えば:

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

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

submit()でこれに関する詳細を得ることができます。

Question

私はjQueryを使用してフォームを送信したいと思います。 誰かがコード、デモ、またはリンクの例を提供できますか?




既存のフォームがあれば、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()関数を動作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'];



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

submit()参照してください。




あなたはこれを次のようにすることができます:

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



これはプリローダー付きのフォームを送信します:

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 //www.jackart4.com/article.html




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

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

            **OR**

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



私はAjax経由でフォームを(実際に提出することなく)提出するために以下のものを使用しました:

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



これまでのソリューションでは、フォームのIDを知る必要があります。

このコードを使用して、IDを知らずにフォームを送信します。

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

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

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



次のように使用することができます:

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

または

document.formName.submit();



私のアプローチは少し異なるボタンを送信ボタンに変更してから、をクリックします。

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



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

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



Related



Tags

jquery jquery