Apply this jQuery code to 2 different contact forms.

[Anonymous]

I have a “Contact me” and a “Hire me” form. They each use separate PHP files and work as they should. The “contact me” form has this jQuery code

//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);
}
);
}
});

The code is to change the “send” text in the “contact me” form when the user sends the message. I want to apply this same code to the “hire me” form.
What i tried to do was duplicate that jquery code, paste it bellow and simply link it to the “hire me” contact form, but when i did that both contact forms stopped working. How can i apply the code to the “hire me” form? I posted a thread relating to the form here https://css-tricks.com/forums/discussion/26623/how-do-i-disable-page-redirect-in-contact-form#Item_22

[Website](http://reallycoolstuff.net/PROJECTS/jobmagnet/ “”)

[Anonymous]

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.

[Author]

Posts