我的表格总是发送第一个选项

Question

我有一个非常简单的 HTML 表格。该表单连接到一个 PHP 文件，因此它将结果通过电子邮件发送给我。但我对单选按钮有疑问。无论用户选择什么单选按钮，电子邮件总是说用户选择了第一个单选按钮。

我做了一些研究，我认为我需要在 PHP 文件的某个地方写入 "echo $gender;"。我试过了，Dreamweaver 总是将其标记为语法错误。

这是基本代码：

HTML:

<form>
<input type="radio" name="gender" id="gender" value="female" /> Female<br>
<input type="radio" name="gender" id="gender" value="male" checked /> Male<br>
</form>

Javascript:

$(function() {
$("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        // Prevent spam click and default submit behaviour
        $("#btnSubmit").attr("disabled", true);
        event.preventDefault();

        // get values from form
        var gender = $("input#gender").val();

        $.ajax({
            url: "././mail/contact_me.php",
            type: "POST",
            data: {gender: gender},
            cache: false,
            success: function() {
                // Enable button & show success message
                $("#btnSubmit").attr("disabled", false);
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry, it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});
});

PHP:

<?php   
$gender = $_POST['gender'];
// Create the email and send the message
$to = 'me@myemailaddress.com'; 
$email_subject = "New message from contact form";
$email_body = "Gender: $gender \n\nPress 'reply' to respond to the sender.";
$headers = "From: me@myemailaddress\n";
return true;            
?>

Answer 1

两个id一样，会出大问题。 ID 在页面上应该始终是唯一的。它会找到第一个，因为 id 首先绑定到它。

Answer 2

你需要使用 php 代码，比如 $gender = $_REQUEST['gender']; 如果你使用 jquery 来获取复选框的值，那么你需要获取选中的单选按钮的值

对于jQuery你可以这样得到：

var gender = jQuery('input[name="gender"]:checked').val();

Answer 3

我猜你的意思是 jQuery 而不是 PHP。另外，您要找的是：

<form>
    <input type="radio" name="gender" class="gender" value="female" /> Female<br>
    <input type="radio" name="gender" class="gender" value="male" checked /> Male<br>
</form>

var gender = $("input.gender:checked").val();

我所做的是将 id # 更改为 class .。我向您的 jQuery 选择器添加了一个 :checked，因此它总是会获得所选项目。

祝你好运！

Answer 4

请尝试使用以下代码获取所选的性别单选按钮。

   $(document).ready(function(){
     $('input[type=radio][name=gender]').change(function() {
      var c= $("input[name='gender']:checked").val();
     alert(c)
     });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
     <input type="radio" name="gender" class="gender" value="female" /> Female<br>
     <input type="radio" name="gender" class="gender" value="male" checked /> Male<br>
    </form>

我的表格总是发送第一个选项

My form always sends the first option

html

php

radio