Skip to content

Instantly share code, notes, and snippets.

@extrasleepy extrasleepy/contact_me.js
Last active Feb 28, 2019

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented Feb 8, 2016

dcsdc

@radbeard

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Sep 25, 2017

How do you route the information to a specific email ?

@Angelluc

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.