クリックした送信ボタンに基づいて親フォームを選択するにはどうすればよいですか?


124

3つのフォームを含むWebページがあります。入れ子になっておらず、次々に並んでいます(ほとんど同じですが、1つの隠し変数だけが異なります)。ユーザーが入力するフォームは1つだけです。JSスクリプトを1つだけ使用して、すべてのフォームを検証などしたいと思います。

では、ユーザーがform#1の送信ボタンをクリックしたときに、jsスクリプトでform1のフィールドのみを処理するようにするにはどうすればよいでしょうか。$(this).parentsと関係のあるものを集めましたが、どうすればよいかわかりません。

私の検証スクリプト(他の場所で使用し、フォームが1つだけ)は次のようになります。


$(document).ready(function(){
    $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;

        var nameVal = $("#name").val();
        if(nameVal == '') {
            $("#name").after('Please enter your name.');
            hasError = true;
        }


        if(hasError == false) {blah blah do all the processing stuff}

$( "#name")。val()などを$(this).parents( 'form')。name.val()に置き換える必要がありますか?または、これについてより良い方法はありますか?

ありがとう!

回答:


190

次のようなフォームを選択できます。

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

ただし、いずれかのフィールドからEnterキーを押して送信した場合でもトリガーされるため、通常はフォーム自体の送信イベントにイベントを添付する方が適切です。

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

フォーム内のフィールドを選択するには、フォームコンテキストを使用します。例えば:

$("input[name='somename']",form).val();

すべての入力子を選択するために使用することもできます:$(this).children()。filter( "input")
Pim Jager

または$( "input、textarea、select"、form)
Eran Galperin

1
var form = $(this).form通常のJavascriptのように使用できないのはなぜですかfunction onClick(button) { var form = button.form; }
クロエ

65

この答えは、入力要素の形式を見つける方法を検索したときに見つかりました。使用するより良い方法があるので、私はメモを追加したかった:

var form = $(this).parents('form:first');

jQueryにいつ追加されたかはわかりませんが、closest()メソッドは、parents()を使用するよりも必要なものをより正確に実行します。最も近いコードを次のように変更できます。

var form = $(this).closest('form');

それは上に移動して、探しているものと一致する最初の要素を見つけてそこで停止するため、:firstを指定する必要はありません。


47

送信が中にあるフォームを取得するには

this.form

結果への最も簡単で迅速な道。


3
なぜjqueryラッパーが必要なのですか?
redsquare 2013

3
これはjQueryの質問としても質問されたためです。そして、受け入れられた答えもjQueryオブジェクトを返すので、それはそれでいいでしょう。「なぜそれがなくても同じ方法で実行できるのに、なぜjQueryでそれを実行するのか」ということはすべて無視します。
インフルエンザ2013

4

私は次の方法を使用しました、そしてそれは私のためにうまくいきました

$('#mybutton').click(function(){
        clearForm($('#mybutton').closest("form"));
    });

$('#mybutton').closest("form") 私のためにトリックをしました。


3

アイリーン:いいえ、そうではありませんvar nameVal = form.inputname.val();。それはどちらかです...

jQuery:

// you can use IDs (easier)

var nameVal =  $(form).find('#id').val();

// or use the [name=Fieldname] to search for the field

var nameVal =  $(form).find('[name=Fieldname]').val();

またはJavaScriptで:

var nameVal = this.form.FieldName.value;

または組み合わせ:

var nameVal = $(this.form.FieldName).val();

jQueryを使用すると、次の形式のすべての入力をループすることもできます。

$(form).find('input, select, textarea').each(function(){

  var name = this.name;
  // OR
  var name = $(this).attr('name');

  var value = this.value;
  // OR
  var value = $(this).val();
  ....
  });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.