Skip to content

Instantly share code, notes, and snippets.

@extrasleepy
Last active December 5, 2019 19:35
Show Gist options
  • Save extrasleepy/a4a3ed5e21f61d387777 to your computer and use it in GitHub Desktop.
Save extrasleepy/a4a3ed5e21f61d387777 to your computer and use it in GitHub Desktop.
contact_me.js
$(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 name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").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,
message: message
},
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 " + 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('');
});
@nidhishm
Copy link

nidhishm commented Feb 8, 2016

dcsdc

@radbeard
Copy link

radbeard commented Feb 8, 2016

trying to make this work on: http://quantumcircuits.com/#contact

keep getting: Uncaught TypeError: Cannot read property 'indexOf' of undefined

do you know why this is? thanks for any feedback.

@Nick-Steele
Copy link

How do you route the information to a specific email ?

@Angelluc
Copy link

Angelluc commented Feb 11, 2018

How do you get the 'selected radio button' from a bootstrap form where one can choose one option out of a few radiobuttons? What do you fill in: var radiobuttons = $("input#radiobuttons").val(); doesn't give a result. I tried with "checked" (var radiobuttons = $("input[name='radiobuttons']:checked").val();) -->tried in different variations) but that didn't work either. Do you have a solution?

@adm0442
Copy link

adm0442 commented Feb 28, 2019

Hi Team
Again this is around using the select field, as pointed out by @ Angelluc. This doesnt work !! Its 2 years now that i have been looking for the ans and solution to this and i am yet to give up cos i know there is some one out there that knows this. Please Help.

Like Angelluc said, i have tried the following without any success

$("#contactForm input,#contactForm textarea,#contactForm select").jqBootstrapValidation({
I have added #contactForm select

Then
var radiobuttons = $("input#radiobuttons").val();
var message = $("select#message").val();

Html Files Below

None Volvo Saab Mercedes Audi

Please what are my doing wrong - I need the Select field to validate in red as well

Thanks in Advance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment