Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Apply this jQuery code to 2 different contact forms. Re: Apply this jQuery code to 2 different contact forms.

#143027
Anonymous
Inactive

Okay thanks. Well basically all i did was copy the jquery code, paste it bellow it, and link it to the “hire me form”.

//Contact form code
var form = $(‘#contact_me form’),
submit = form.find(‘[type=”submit”]’);
form.on(‘submit’, function(e) {
e.preventDefault();
// avoid spamming buttons
if (submit.text() !== ‘Send’)
return;
// very simple validator, just checks if no input is empty
var valid = true;
form.find(‘input, textarea’).removeClass(‘invalid’).each(function() {
if (!this.value) {
$(this).addClass(‘invalid’);
valid = false;
}
});
if (!valid) {
// notify user (or use .invalid class as style hook)
} else {
submit.text(‘Sending…’) // notify user it’s sending
// this actually submits the form data
$.post(
form.attr(‘action’),
form.serialize(),
function(data){
submit.text(data)
.css({boxShadow: ‘none’});
setTimeout(function() {
// reset form if you want (optional)
form.find(‘input, textarea’).val(”);
submit.text(‘Send’)
.css({backgroundColor: ”});
}, 3000);
}
);
}
});

//hire me form code
var form = $(‘#hire_me_container form’),
submit = form.find(‘[type=”submit”]’);
form.on(‘submit’, function(e) {
e.preventDefault();
// avoid spamming buttons
if (submit.text() !== ‘Send’)
return;
// very simple validator, just checks if no input is empty
var valid = true;
form.find(‘input, textarea’).removeClass(‘invalid’).each(function() {
if (!this.value) {
$(this).addClass(‘invalid’);
valid = false;
}
});
if (!valid) {
// notify user (or use .invalid class as style hook)
} else {
submit.text(‘Sending…’) // notify user it’s sending
// this actually submits the form data
$.post(
form.attr(‘action’),
form.serialize(),
function(data){
submit.text(data)
.css({boxShadow: ‘none’});
setTimeout(function() {
// reset form if you want (optional)
form.find(‘input, textarea’).val(”);
submit.text(‘Send’)
.css({backgroundColor: ”});
}, 3000);
}
);
}
});

//Hire me container display and scroll to
$(“#hire_me_button”).click(function() {
$(“#hire_me_container”).slideDown();
$(‘html, body’).animate({scrollTop: $(“#hire_me_container”).offset().top}, 500);
});

And that caused both to stop working.