Saturday, 17 August 2013

How to submit form data via ajax if form is also loaded via ajax?

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