После того, как потратив много времени на это, наконец -то я решил опубликовать здесь.
На самом деле я пытаюсь сделать одну страницу веб -приложение, поэтому из -за этого форма контакта загружается через Ajax .load () < /code> Функция: < /p>
$('.formWrap').load('contactForm.html',function(){
< /code>
После успешной загрузки я попытался использовать Ajax для процесса отправки, поэтому я использовал этот код: < /p>
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);
};
});
}
}
}
< /code>
и назовите эту функцию как: < /p>
$(document).ready(form.load);
< /code>
и код формы html (contactform.html):
[есть 6 форм в этом файле с разными идентификаторами формы. Но полевое классное имя одинаково. Я публикую здесь только одну форму, все остальные одинаковы]
Error Sending! Please enter your name!
Error Sending! Mail address required!
Error Sending! Valid Email Address Required
Error Sending! Subject field is empty!
Error Sending! Message field is empty!
< /code>
сейчас. С помощью этого кода я не могу отправить данные формы. Когда все поля заполняются и нажимают кнопку «Отправить», чем в месте представления данных, он показывает первое сообщение об ошибке проверки поля.
и я думаю, что корень этой проблемы: наличие более одной формы с одинаковыми полями класса. Поэтому, когда я нажимаю кнопку «Отправить», она проверяю одно и то же поле из других форм.>
Подробнее здесь: https://stackoverflow.com/questions/182 ... hat-ajax-l
Как отправить данные формы через AJAX, если форма также загружается через AJAX, и что загруженный файл AJAX имеет более ⇐ Html
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Загруженный на aws s3 видеофайл не воспроизводится, он загружается автоматически
Anonymous » » в форуме Python - 0 Ответы
- 18 Просмотры
-
Последнее сообщение Anonymous
-