0

Select要素の値に基づいてjQueryを使用してURLにパラメーターを追加しようとすると問題が発生します。これまでの私のコードは次のとおりです。

<script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        $(this).closest("form").submit();
});
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
});
</script>

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>

        <input type="submit" class="hidden"/>
    </fieldset>
</form>

何らかの理由で、どのオプションを選択しても、URLはprocess.php？state=Selectになります。私がそれをする必要があるのは、process.php？state=TXまたはユーザーが選択するオプションになることです。

どんな助けでも大歓迎です！

4

5 に答える 5

1

非表示の入力の値を更新する必要があります。

$(document).ready(function () {
    $("#sel-1").change(function() {
        $('[name=state]').val($('#sel-1').val()); 
        $(this).closest("form").submit();
});

ここでの例：http：//jsfiddle.net/wKvLm/1/show/

また...現在のコードでは、JSを介してその入力を作成する必要はありません。次のようにHTML内で定義できます。

<script type="text/javascript">
    $(document).ready(function () {
        $("#sel-1").change(function() {
            $('[name=state]').val($('#sel-1').val());        
            $(this).closest("form").submit();
        });
    });
</script>

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>
        <input type="hidden" name="state" value="Select"/>
        <input type="submit" class="hidden"/>
    </fieldset>
</form>​

ここでの作業例：http：//jsfiddle.net/wKvLm/2/show/

于 2012-11-29T01:26:56.733 に答える
0

これは、ページの読み込み時に値を取得するために発生しています。

試す：

<script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        if ($("#sel-1").val() != "Select") {
            var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
            $('.start-form').append($(input));
            $(this).closest("form").submit();
        }
    });
});
</script>
于 2012-11-29T01:25:56.703 に答える
0

これを試して。

    <script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
        $(this).closest("form").submit();
});

});
</script>
于 2012-11-29T01:28:28.810 に答える
0 
<script type="text/javascript">
$(document).ready(function () {

    $("#sel-1").change(function() {

      var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
        $('.start-form').append($(input));
        $(this).closest("form").submit();
});


});
</script>

onchangeイベントで変数データを設定する必要があります。

ここで行っているのは、ドロップダウンが変更されたときに値をドロップする新しい入力非表示フィールドを追加することです。次に、入力フィールドを追加してフォームを送信します。

于 2012-11-29T01:28:55.980 に答える
0

簡単な方法は、jQueryのserializeメソッドを使用することです。

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>
        <input type="submit" onlick="alert($(this).closest('form').serialize()); return false;" class="hidden"/>
    </fieldset>
</form>
于 2012-11-29T01:33:00.993 に答える