Как я могу отправить значение переключателя в PHP с помощью javescript? [дубликат]
На этот вопрос уже есть ответ здесь:
Я занимаюсь этим уже неделю и прочитал весь stackoverflow и Google, и я не могу решить эту проблему. Каждый раз, когда я его тестирую, я получаю первый переключатель, независимо от того, на какой из них я нажимаю.
Что я получаю в адрес электронной почты:
Name: test
Email: [email protected]
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 = '[email protected]'; // 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";
3 answers
Во-первых, вы используете один и тот же идентификатор 4 раза. Идентификатор должен быть уникальным в документе , вы не можете установить один и тот же идентификатор для 4 элементов. Также я думаю, что способ, которым вы получаете значение с помощью переключателя, неправильный.
Это более или менее то, как вы можете получить значение с помощью переключателя: ( пример из другой вопрос SO )
var optionu = $('input[name=optionu]:checked', '#controls').val()
Также удалите идентификатор из всех входных элементов [радио].
<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>
Вы должны найти проверенное значение радио. Вы просто получаете значение первого радиоэлемента.
Как я могу узнать, какой переключатель выбран с помощью jQuery?
Изменить: Вы также не можете использовать один и тот же идентификатор для каждой переключающей кнопки. Вам нужно будет дать ему имя класса или обратиться к кнопке по имени с помощью jQuery.
Попробуйте это:
$('input[name=optionu]:checked').val()