How can I send radio button value in PHP using javascript?

html, javascript, jquery, php

Solution

First of all you use same id 4 times. ID have to be unique in document, you cannot set same id to 4 elements. Also I think the way you are getting value from radio button is wrong.

This is more or less how you can get value from radio button: ( example from another SO question )

  var optionu = $('input[name=optionu]:checked', '#controls').val()

Also remove id from all input[radio] elements.

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

Problem

I've been at this for week and read all the stackoverflow and google and I can not fix this problem. Every time I test it I get the first radio button no matter which one I click. What i get in the email is: ``` 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'>&times;") .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"; ```

Original source

Related problems