web-dev-qa-db-ja.com

変更の選択時にフォームを送信する方法

次のフォームがあります。ユーザーが選択を行ったときに、送信ボタンを押す必要なく、jQueryを介して自動的に送信されるようにします。どうすればいいですか？

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>

アデネオ、あなたの提案を試みましたが、まだ機能していません。ここに完全なコードがありますが、何か間違っていますか？

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#cars').on('change', function() {
                this.form.submit();
            });
        });
        </script>
    </head>
    <body>
        <form action="" method="post">
            <select name="id" id="cars">
                <option value="">Select...</option>
                <option value="1">Toyota</option>
                <option value="2">Nissan</option>
                <option value="3">Dodge</option>
            </select> 
            <input type="submit" name="submit" value="Submit">
        </form>
    </body>
</html>
jqueryformsselectsubmit
14
Rick Helston

フォームにアクション値がないため、最後にフォームを送信できません。ただし、途中でこのコードを修正する必要があります。

$(document).ready(function() {
  $('#cars').on('change', function() {
     document.forms[myFormName].submit();
  });
});

送信ボタンのクリックイベントをトリガーしてフォームを送信することもできます。

$(document).ready(function() {
  $('#cars').on('change', function() {
    var $form = $(this).closest('form');
    $form.find('input[type=submit]').click();
  });
});
12
Sigismundus

私の場合、これは完璧に機能し、送信ボタンがあってもなくても機能します。

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
</form>

 <script type="text/javascript">

  jQuery(function() {
    jQuery('#car').change(function() {
        this.form.submit();
    });
});
</script>
5
Oskar

私はこれが少し古いことを知っていますが（すでに答えられています）、答えはどれも私が望んでいたほど柔軟性がありませんでしたので、私が終わった解決策は次のとおりです：

$(document).ready(function() {
   $('#cars').change(function() {
     var parentForm = $(this).closest("form");
     if (parentForm && parentForm.length > 0)
       parentForm.submit();
   });
});
2
Dan Sinclair

あなたもこれを行うことができます：

<form action="" method="post">
<select name="id" id="cars">
    <option value="">Choose</option>
    <option value="1">Toyota</option>
    <option value="2">Nissan</option>
    <option value="3">Dodge</option>
</select> 
<input id='submit' type="submit" name="submit" value="Submit">

$(document).ready(function() {
   $('#cars').on('change', function() {
     $('#submit').click();

   });
});
2
praveenraj

コードのさらに速いバージョンは次のようになります。

_<form action="" method="post">
    <select name="id" id="cars" onchange="javascript:this.form.submit()">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>
_

ここで行っているのは、送信アクションを起動するフィールドにonchange="javascript:this.form.submit()"を追加することです。もちろん、これはonchange htmlプロパティをサポートする要素でのみ機能します

0
larrytech