Question

我有一个带有2套单选按钮的表格。一个带有5个选项，另一个带有2个选项。该表格效果很好。但是当我单击提交时，电子邮件仅显示第一个选项，而不是用户选择的选项。该代码的错误在哪里？

<div class="form-group">
    <label>Products</label><br>
    <input type="radio" name="Products" id="Products" class="form-check-input" value="option 1" onkeypress=chkEnter(event);>
    <label for="Products">option 1</label><br>
    <input type="radio" name="Products" id="Products" class="form-check-input" value="option 2" onkeypress=chkEnter(event);>
    <label for="Products">option 2</label><br>
    <input type="radio" name="Products" id="Products" class="form-check-input" value="option 3" onkeypress=chkEnter(event);>
    <label for="Products">option 3</label><br>
    <input type="radio" name="Products" id="Products" class="form-check-input" value="option 4" onkeypress=chkEnter(event);>
    <label for="Products">option 4</label><br>
    <input type="radio" name="Products" id="Products" class="form-check-input" value="option 5" onkeypress=chkEnter(event);>
    <label for="Products">option 5</label><br>
</div>

<div class="form-group">
    <label>Title</label>
    <input type="radio" name="EnqTitle" id="EnqTitle" value="Mr." required="required" checked onkeypress=chkEnter(event);><label for="EnqTitle">Mr.</label>
    <input type="radio" name="EnqTitle" id="EnqTitle" value="Ms." required="required" onkeypress=chkEnter(event);><label for="EnqTitle">Ms.</label>
</div>

$(document).ready(function () {
    var startTime = Date.now();
    var currentTime = [];
    var score = 0;
    var value;



    $( "#form1" ).submit(function( event ) {


        params = {
            "Products":$("#Products").val(),
            "EnqTitle":$("#EnqTitle").val(),

        };

        console.log(params);

        $.ajax({                
                type: 'POST',
                url: 'form.php',
                data: params,
                dataType: 'json',
                complete: function(data)
                {
                    window.open('Thank You.html','_self')                 
                }
        });
        return false;
    });
});


</script>

Answer 1

您在这里遇到问题。应该是这样的：

params = {
     "Products": $("input[name='Products']:checked").val(),
     "EnqTitle": $("input[name='EnqTitle']:checked").val()
};

Answer 2

您的代码中存在一些问题-例如您不能有多个具有相同ID的元素-在HTML中无效。而且ID必须是唯一的-否则从逻辑上讲它不是ID！

而且，对于您的问题更重要的是：

params = { "Products":$("#Products").val(), "EnqTitle":$("#EnqTitle").val(), };

是不正确的，因为它总是选择具有确切ID的元素。由于您有多个具有该ID的元素，因此仅第一个元素将被视为有效，并且始终会返回该元素。其他元素将被忽略，因为预计只有一个具有特定ID的元素。这不是您找到单选按钮的选定选项的方式。

幸运的是，这也是不必要的。只需写

data: $(this).serialize()

在AJAX选项中，让jquery自动为您收集表单数据-有关详细信息，请参见https://api.jquery.com/serialize

这是演示序列化过程的演示

$(document).ready(function() {
  $("#form1").submit(function(event) {
    console.log($(this).serialize());
    return false;
  });
});

function checkEnter(event) {
  //dummy
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">

  <div class="form-group">
    <label>Products</label><br>
    <input type="radio" name="Products" class="form-check-input" value="option 1" onkeypress=chkEnter(event);>
    <label for="Products">option 1</label><br>
    <input type="radio" name="Products" class="form-check-input" value="option2" onkeypress=chkEnter(event);>
    <label for="Products">option 2</label><br>
    <input type="radio" name="Products" class="form-check-input" value="option 3" onkeypress=chkEnter(event);>
    <label for="Products">option 3</label><br>
    <input type="radio" name="Products" class="form-check-input" value="option 4" onkeypress=chkEnter(event);>
    <label for="Products">option 4</label><br>
    <input type="radio" name="Products" class="form-check-input" value="option 5" onkeypress=chkEnter(event);>
    <label for="Products">option 5</label><br>
  </div>

  <div class="form-group">
    <label>Title</label>
    <input type="radio" name="EnqTitle" value="Mr." required="required" checked onkeypress=chkEnter(event);><label for="EnqTitle">Mr.</label>
    <input type="radio" name="EnqTitle" value="Ms." required="required" onkeypress=chkEnter(event);><label for="EnqTitle">Ms.</label>
  </div>
  <input type="submit" value="Submit" />
</form>

通过电子邮件发送时，单选按钮无法正常工作

2 个答案: