1

私のajaxフォームがその後送信されたときに、ラジオの値に空の値を取得するという問題があります。

順次、次のようになります。

  1. ユーザーがラジオを選択してフォームを送信
  2. 選択したラジオの値を取得しますvar enable = $('input[name=enable]:checked').attr('value');
  3. AJAX 経由で値を投稿するdata: { 'enable' : enable, },

それはすべてうまくいきます。ただし、ユーザーがフォームを再度送信すると、radio の値が空になり、何も送信されません。

スタイルと Jquery を使用して「標準」ラジオを非表示にし、スタイル付きバージョンに置き換えています。スタイルをオフにすると、ラジオが正しく選択されていることがわかりますが、値は送信されません。

必要に応じて、さらにコードを投稿できます。ありがとう。

<form method="post" id="add-form" class="form" onsubmit="return false;">
<label>Enable Location</label>
<input type="radio" name="location_enable" id="location_enable" value="enable" checked="checked" />
<input type="radio" name="location_enable" id="location_disable" value="disable" />
<button>Submit</button>
</form>

フォームを検証する

        <script type="text/javascript">
        $().ready(function() {
            $("#add-form").validate({
                rules: {
                    location_enable: { required: true }
                },
                success: function(span) { 
                    span.html(" ").addClass("checked"); 
                },
                submitHandler: function(form) {
                    $('#add-form').submitForm();
                }
            });
        });
        </script>

データを投稿する

            <script type="text/javascript">
            $(document).ready(function() {
                $.fn.submitForm = function() {
                    var location_enable = $('input[name=location_enable]:checked').attr('value');

                    $.ajax({
                        type: 'POST',
                        data: { 'location_enable' : location_enable },
                        url: 'script.php',
                        dataType: 'json',
                        success: function($data) {
                            var result = $data.result;
                            var msg = $data.msg;

                            if (result == "success") {
                                formMessageDisplay(msg, result);
                                $(':input', '#add-form').each( function() {
                                    // Set the values to empty
                                    $(':input').val('');
                                });
                            }
                            else {
                                formMessageDisplay(msg, result);
                            }
                        },
                        error: function($data) {
                            formMessageDisplay('<?php echo AJAX_ERROR; ?>', result);
                        }
                    })
                }
            });
        </script>

ユーザーが「有効」を選択した場合、最初の送信で、AJAX は「有効」を値として script.php に送信します。ユーザーがフォームを再度送信した場合にページをリロードせずに、ユーザーが「有効」を選択した場合でも、AJAX は空の値を投稿します。

申し訳ありませんが、以前に jsFiddle を使用したことがありません。

Firebug 内では、これはページをリロードせずに 2 つの送信からの出力です。

json_action addEloc
location_address    Test
location_desc   Test
location_enable enable
location_loc    Test
location_map    enable
location_name   Testing radio
location_postcode   Test
location_state  QLD

無線フィールドからの 2 つの「イネーブル」に注意してください。

2 回目の提出:

json_action addEloc
location_address    Test
location_desc   Test
location_enable 
location_loc    Test
location_map    
location_name   Testing radio
location_postcode   Test
location_state  QLD

2 回目の送信では、2 つの無線には価値がありませんでした。

ここに画像の説明を入力

ここに画像の説明を入力

4

1 に答える 1

2

この問題は、このスクリプトが原因で発生します

if (result == "success") {
                formMessageDisplay(msg, result);
                $(':input', '#add-form').each( function() {
                    // Set the values to empty
                     $(':input').val('');
                });
}

すべての入力型要素に '' を設定しています

$(':input').val('');

そのため、ラジオ ボタンの値も '' に設定され、ページを更新するまで空白の応答が返されます。

これを行う代わりに、reset()関数を使用してフォームの値をリセットできます。

$('#add-form').reset();
于 2012-06-18T18:21:02.887 に答える