后续提交表单时收音机的Jquery空值

Question

我遇到了一个问题，即当我的 ajax 表单随后提交时，我得到一个空值作为收音机的值。

接下来会发生这样的事情：

1. 用户选择电台并提交表单
2. 获取选中电台的值var enable = $('input[name=enable]:checked').attr('value');
3. 通过 AJAX data: { 'enable' : enable, }, 发布值

一切正常。但是，如果用户再次提交表单，则单选的值为空，则不会提交任何内容。

我正在使用样式和 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 中，这是两次提交的输出，无需重新加载页面。

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

注意无线电字段中的两个“启用”。

第二次提交：

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

第二次提交的两台收音机没有任何价值。

Answer 1

由于您的此脚本而出现此问题

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

您正在为所有输入类型元素设置 ''

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

这就是为什么单选按钮的值也将设置为 ''，并且会返回空白响应，因为它现在正在返回，直到您刷新页面为止。

您可以使用reset() 函数来重置表单值，而不是这样做。

$('#add-form').reset();