2016-10-11 18 views
0

私は2つのサブミットボタンのうち1つの値を自分のフォーミュラから取得しようとしますが、私はそれを試みるたびに失敗しました。クリックしたサブミットボタンの値を取得

希望、誰かが私を助け、私がそれをやり遂げる方法を私に見せることができます。

これはこれは、JSコードでHTMLフォーム

<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post" > 
    <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i></button> 
    <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i></button> 
</form> 

で、ここで私は1つ、これを行うには多くの方法があります

$(document).on('submit', '.save_form', function (event) { 
    event.preventDefault();  
// var submitbutton = !???? 
    var formID = $(this).attr('id'); 
    var formDetails = $('#'+formID); 
    var fileurl = $(this).attr('action'); 
    ... 
+0

に役立つことを願っていますし、フォーム情報はまだ利用可能です.. }); ' – Gavin

+0

' $(document) 'のようなものは、 – robbmj

+0

という形式のidセレクタでなければなりません@robbmjなぜそれをお勧めしますか? – Gavin

答えて

2

名またはクリックされたボタンのIDが必要ですボタンにイベントハンドラを追加することです。クリックは送信前に行われ、クラスや何かを使用して、送信ハンドラ内でクリックされたボタンを識別します。
あなたはまだ、ボタンから開始されなかった送信を捕まえて防ぎます。

あなたが特に提出をキャッチする必要がない場合は、あなただけの代わりに、フォームのボタンのイベントハンドラを使用することができ

$(document).on('click', '.save_form button', function() { 
 
    $('.save_form button').removeClass('clicked'); 
 
    $(this).addClass('clicked'); 
 
}); 
 

 
$(document).on('submit', '.save_form', function(event) { 
 
    event.preventDefault(); 
 
    var formID = $(this).attr('id'); 
 
    var formDetails = $('#' + formID); 
 
    var fileurl = $(this).attr('action'); 
 

 
    var id = $(this).find('button.clicked').prop('id'); 
 
    alert(id) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post"> 
 
    <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i> 
 
    </button> 
 
    <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i> 
 
    </button> 
 
</form>

+0

フォームのリロード(エラーなど)の場合には、この方法でもう2回か何度か作業しないと思います! – 4usolutions

+0

フォームがリロードされ、イベントハンドラがドキュメントに添付されているときに動作しない理由はありません – adeneo

+0

あなたは正しいと思います。 – 4usolutions

2

にイベントを結合してみ提出このような送信ボタン:

$('.save_form').on('click', '[type=submit]', function(event) { 
 
    event.preventDefault(); 
 
    var submitbutton = $(this).attr('id'); 
 
    var formDetails = $(this).closest('form'); 
 
    var formID = formDetails.attr('id'); 
 
    var fileurl = formDetails.attr('action'); 
 
    console.log(submitbutton); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post"> 
 
    <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i> 
 
    </button> 
 
    <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i> 
 
    </button> 
 
</form>

+0

こんにちは、方法は正しいかもしれませんが、私は送信イベントだけを使用すると、alleのフォームはこの関数からキャッチします!どうすればフォームid = "new_contact" class = "save_form"だけがこの関数で実行できるのですか? – 4usolutions

0

letが

<form id="sForm"> 
     <input type="text" name="toSearch" id="toSearch" /> 
     <input type="submit" id="mysubmit"/> 
</form> 

、フォーム怒鳴るを持っていると言うと、フォーム入力のidが「toSearch」と命名された私の例をsubmitted.Inされたとき、あなたは値を取得します。ちょうど次のことをしてください。

$('#sForm').on("submit",function(e){ 
var myvar = $('#toSearch').val(); 
//Now you can do anything you wish with the variable myvar 
// Put more code here. 

    e.preventDefault(); 

}); 

値は送信時に取得されますが、Onclickまたは他の種類の操作に変更できます。

は `$(文書).on( 'クリック'、 'ボタン[タイプ= "提出"]'、関数は(){ // 'これは' ボタンであるんでないのはなぜそれが

関連する問題