Can't get radiobuttons to email with php/js
Question
Im trying to make the "geef een cijfer van 1 t/m 10" into radio buttons so that the user can click on a value from 1 to 10 and then the result gets emailed to us. I can't get this to work for some reason though.
I was wondering if someone could help me.
Thanks in advance!
$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, submitSuccess: function($form, event) { event.preventDefault(); // prevent default submit behaviour // get values from FORM var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var cijfer = $("input#cijfer").val(); var message = $("textarea#message").val(); var work_abroad = $("input#work_abroad").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: "././mail/contact_me.php", type: "POST", data: { name: name, phone: phone, email: email, cijfer: cijfer, message: message }, 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>Uw deelname is verzonden. </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'>×") .append("</button>"); $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", 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"); }); }); /*When clicking on Full hide fail/success boxes */ $('#name').focus(function() { $('#success').html(''); });
<?php // Check for empty fields if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || empty($_POST['cijfer']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) { echo "No arguments Provided!"; return false; } $name = $_POST['name']; $email_address = $_POST['email']; $phone = $_POST['phone']; $message = $_POST['message']; $message = $_POST['cijfer']; // Create the email and send the message $to = 'donny@zenze.eu'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. $email_subject = "Klanttevredenheid onderzoek: $name"; $email_body = "U heeft een waardering ontvangen via de landingspagina.\\n\\n"."Hier zijn de gegevens:\\n\\nNaam: $name\\n\\nEmail: $email_address\\n\\nBedrijf: $phone\\n\\nCijfer: $message\\n\\nMotivatie:\\n$message"; $headers = "From: noreply@canconnect.nl\\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true; ?>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>CanConnect - Graag uw mening</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/kerstkaart.css" rel="stylesheet"> <!-- Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <!-- Header --> <header> <div class="container"> <div class="row"> <div class="col-lg-12"> <img class="img-responsive" src="img/cct.png" alt="" style="margin-top:10px;"> </div> </div> </div> </header> </div> <!-- Navigation --> <nav class="navbar navbar-default" role="navigation"> <div class="container"> </div> <!-- /.container --> </nav> <div class="container"> <div class="row"> <div class="box"> <div class="col-lg-12"> <!-- Contact Section --> <section id="contact"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Enquête</h2> <hr class="star-primary"> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. --> <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. --> <form name="sentMessage" id="contactForm" novalidate> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Bedrijfsnaam</label> <input type="text" class="form-control" placeholder="Uw bedrijfsnaam" id="name" required data-validation-required-message="Vul uw bedrijfsnaam in."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Naam</label> <input type="text" class="form-control" placeholder="Uw naam" id="phone" required data-validation-required-message="Vul uw naam in"> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>E-mailadres</label> <input type="email" class="form-control" placeholder="Uw emailadres" id="email" required data-validation-required-message="Vul uw emailadres in."> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Uw waardering voor CanConnect</label> <input type="text" class="form-control" placeholder="Geef een cijfer van 1 t/m 10" id="cijfer" required data-validation-required-message="Graag uw cijfer"> <input type="radio" id="work_abroad" name="work_abroad" value="y" /><label for="work_abroad_y">Yes</label> <input type="radio" id="work_abroad" name="work_abroad" value="n" /><label for="work_abroad_n">No</label> <p class="help-block text-danger"></p> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Uw motivatie</label> <textarea rows="10" class="form-control" placeholder="Uw motivatie" id="message" required data-validation-required-message="Voer een bericht in"></textarea> <p class="help-block text-danger"></p> </div> </div> <br> <div id="success"></div> <div class="row"> <div class="form-group col-xs-12"> <button type="submit" class="btn btn-success btn-lg">verstuur</button> </div> </div> </form> </div> </div> </div> </section> <div id="carousel-example-generic" class="carousel slide"> <!-- Wrapper for slides --> </div> </div> </div> </div> </div> <!-- /.container --> <!-- Contact Section --> <section class="success" id="informatie"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Geachte gebruiker van CanConnect,</h2> <hr class="star-light"> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-2"> <p>Op deze pagina kunt u ons laten weten welk rapportcijfer u geeft voor de totale performance van CanConnect. </br> </br> Naast het rapportcijfer kunt u ook in eigen woorden laten weten wat u van ons vind. Gebruik hiervoor het onderste veld bij motivatie. Uw mening is voor ons erg belangrijk en stelt ons in staat onze dienstverlening en producten te verbeteren. </p> </div> <div class="col-lg-4"> <p> Zodat onze dienstverlening bijdraagt aan het succes van uw bedrijf. </br></br>Alvast bedankt voor uw vriendelijke medewerking,</br></br> Ivo van Herwaarde</br> <i>CanConnect</i></br> </p> </div> <div class="col-lg-8 col-lg-offset-2 text-center"> <a href="http://www.canconnect.nl" class="btn btn-lg btn-outline"> <i class="fa fa-download"></i> Naar onze website </a> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> Copyright © <a href="http://www.canconnect.nl">Canconnect</a> | Website by <a href="http://www.zenze.nl">Zenze</a> </div> </div> </div> </footer> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Script to Activate the Carousel --> <script> $('.carousel').carousel({ interval: 5000 //changes the speed }) </script> <!-- Contact Form JavaScript --> <script src="js/jqBootstrapValidation.js"></script> <script src="js/contact_me.js"></script> </body> </html>
1 answers
solution1
0 2015-05-13 13:16:22
You're using <input type="text"> rather than <input type="radio">
Just use the same name for each radio button. You can try it out here http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_input_radio
Or more fitting to your needs would be a <input type="range"> in my opinion http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_input_range
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Can't change radiobuttons display to none again
js + php : Why is the EventSource can't get any responses?
HTML email confirmations - can I us js or php within the email?
Can't send Email using PhP
Can't get the value from Email Input
Phonegap: Can't get Email Composer to work
Get RadioButtons By Row - Javascript
JS removes form data before PHP can send email
Can't create a button dynamically with php and js
Can't use PHP variable in JS
Related Tags