我已经在这一周了，并阅读了所有的stackoverflow和谷歌，我无法解决这个问题。 每当我测试它时，无论我点击哪一个，我都会得到第一个单选按钮。
我在电子邮件中收到的是：
Name: test
Email: test@live.com
phone: 9545027557
type: Residential
HTML：
<form name="controls" id="controls" novalidate>
<div class="control-group">
<div class="controls">
<input type="text" class="form-control"
placeholder="Full Name" id="name" required
data-validation-required-message="Please enter your name" />
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="email" class="form-control" placeholder="Email"
id="email" required
data-validation-required-message="Please enter your email" />
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="btn-group" data-toggle="buttons" id="optionu" style="padding-left:25px">
<label class="btn btn-primary active">
<input type="radio" class="form-control" id="optionu" name="optionu"
value="Residential" checked > Residential
</label>
<label class="btn btn-primary ">
<input type="radio" class="form-control" id="optionu" name="optionu"
value="Commercial" > Commercial
</label>
<label class="btn btn-primary ">
<input type="radio" class="form-control" id="optionu" name="optionu"
value="Handyman" > Handyman
</label>
</div>
</div>
</div>
<p></p>
<div id="success"> </div> <!-- For success/fail messages -->
<button type="submit" class="btn btn-danger pull-right">Request</button><br />
</form>
contact_me.js：
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var optionu = $("input#optionu").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "bin/contact_me.php",
type: "POST",
data: {name: name, email: email, optionu: optionu, phone: phone},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
contact_me.php：
$name = $_POST['name'];
$optionu_value = $_POST['optionu'];
$phone = $_POST['phone'];
$email_address = $_POST['email'];
// create email body and send it
$to = 'test@gmail.com'; // put your email
$email_subject = "Contact form submitted by: $name";
$email_body = "You have received a new message. \n\n".
" Here are the details:\n \nName: $name \n ".
"Email: $email_address\n phone: $phone\n type: $optionu";
答案 0 :(得分：6)
首先，你使用相同的id 4次。 ID have to be unique in document，您无法将相同的ID设置为4个元素。另外我认为你从单选按钮获得价值的方式是错误的。
这或多或少可以从单选按钮获取价值：（example来自another SO question）
var optionu = $('input[name=optionu]:checked', '#controls').val()
同时从所有输入[radio]元素中删除id。
<label class="btn btn-primary active">
<input type="radio" class="form-control" name="optionu" value="Residential" checked /> Residential
</label>
<label class="btn btn-primary ">
<input type="radio" class="form-control" name="optionu" value="Commercial" /> Commercial
</label>
<label class="btn btn-primary ">
<input type="radio" class="form-control" name="optionu" value="Handyman" /> Handyman
</label>
答案 1 :(得分：0)
您必须找到收音机的选中值。你只是得到了第一个无线电元素的价值。
How can I know which radio button is selected via jQuery?
编辑：您也无法为每个单选按钮使用相同的ID。您必须为其指定一个类名，或者使用jQuery按名称引用该按钮。
答案 2 :(得分：0)