How to submit form data via ajax if form is also loaded via ajax?
after spending lots of time on this, finally i decided to post here .
actually i'm trying to make a single page webapp so due to this the
contact form is loaded via ajax '.load()' function :
$('.formWrap').load('contactForm.html',function(){
after loading successfully, I tried to use ajax for submission process, so
I used this code :
var form = {
load: function(){
$('.formWrap').load('contactForm.html',function(){
form.formFunc.formBind();
});
***form.click();***
},
****click: function(){
$('html').on("click","#contactSubmitButton",function(e) {
e.preventDefault();
form.formFunc.sidebarvalidateForm($(this).attr('data-formId'));
});
},****
formFunc: {
formBind: function(){
$('#sidebarformSuccessMessageWrap').hide();
$('.sidebarformValidationError').hide();
$('input[type="text"], input[type="password"],
textarea').focus(function(){
if($(this).val() == $(this).attr('data-dummy')){
$(this).val('');
};
});
$('input, textarea').blur(function(){
if($(this).val() == ''){
$(this).val($(this).attr('data-dummy'));
};
});
},
sidebarsubmitData: function(currentForm, formType){
Anu.Config.sidebarformSubmitted = 'true';
var formInput = $('#' + currentForm).serialize();
$.post($('#' + currentForm).attr('action'),formInput, function(data){
$('#' + currentForm).hide();
$('#sidebarformSuccessMessageWrap').fadeIn(500);
setTimeout(function(){
$('#sidebarformSuccessMessageWrap').fadeOut(500);
$('#successinfo').fadeIn(500);
$('.contact-form').slideUp("slow", function() {
$('.contact-form').hide();
});
},5000);
});
},
sidebarvalidateForm: function(currentForm, formType){
$('.sidebarformValidationError').hide();
$('.sidebarfieldHasError').removeClass('sidebarfieldHasError');
$('#' + currentForm + ' .sidebarrequiredField').each(function(i){
if($(this).val() == '' || $(this).val() ==
$(this).attr('data-dummy')){
$(this).val($(this).attr('data-dummy'));
$(this).focus();
$(this).addClass('fieldHasError');
$('#' + $(this).attr('id') + 'Error').show();
return false;
};
if($(this).hasClass('sidebarrequiredEmailField')){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var tempField = '#' + $(this).attr('id');
if(!emailReg.test($(tempField).val())) {
$(tempField).focus();
$(tempField).addClass('sidebarfieldHasError');
$(tempField + 'Error2').show();
return false;
};
};
if(Anu.Config.sidebarformSubmitted == 'false' && i == $('#' +
currentForm + ' .sidebarrequiredField').length - 1){
Anu.formFunc.sidebarsubmitData(currentForm, formType);
};
});
}
}
}
and call this function as :
$(document).ready(form.load);
and the form html (contactForm.html) code is : [there are 6 forms on this
file with different IDs. but I post here only one]
<form class="contactForm" id="contactForm" action='contact-send.php'
method='post' enctype='multipart/form-data'>
<span
class="sidebarformValidationError"
id="contactNameFieldError">
<div
class="sidebar-small-notification">
<p>Error Sending! Please
enter your name!</p>
</div>
</span>
<span
class="sidebarformValidationError"
id="contactEmailFieldError">
<div
class="sidebar-small-notification">
<p>Error Sending! Mail
address required!</p>
</div>
</span>
<span
class="sidebarformValidationError"
id="contactEmailFieldError2">
<div
class="sidebar-small-notification">
<p>Error Sending! Valid
Email Address Required</p>
</div>
</span>
<span
class="sidebarformValidationError"
id="contactSubjectFieldError">
<div
class="sidebar-small-notification">
<p>Error Sending! Subject
field is empty!</p>
</div>
</span>
<span
class="sidebarformValidationError"
id="contactMessageTextareaError">
<div
class="sidebar-small-notification">
<p>Error Sending! Message
field is empty!</p>
</div>
</span>
<input type="text" class="sidebar-input required
sidebarrequiredField first" autocomplete="off"
placeholder="Name" required
name="contactNameField" id="contactNameField"
/><span class="clear-input"></span>
<input type="text" class="sidebar-input
sidebarrequiredEmailField required
sidebarrequiredField" placeholder="Email" required
name="contactEmailField" id="contactEmailField"
/><span class="clear-input"></span>
<input type="text" class="sidebar-input required
sidebarrequiredField" placeholder="Subject"
required name="contactSubjectField"
id="contactSubjectField" /><span
class="clear-input"></span>
<textarea class="sidebar-textarea required
sidebarrequiredField last" required
placeholder="Enter Your message Here"
name="contactMessageTextarea"
id="contactMessageTextarea"></textarea><span
class="clear-area"></span>
<input type="submit" value="Submit"
class="sidebar-button" id="contactSubmitButton"
data-formId="contactForm"/>
</form>
now. with this code, I'm unable to submit the form data. So, please
somebody can improve/correct this code...
Thanks and Regrads
No comments:
Post a Comment