1

我有一个问题，当我的 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

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

在此处输入图像描述

在此处输入图像描述

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 回答