jQuery заставляю эти функции работать вместе
Вопрос
Я новичок в jQuery и пытался искать ответ на то, как это сделать. У меня есть 2 функции, и я бы хотел, чтобы обе работали вместе. Одной функцией является Simithandler и используется для скрытия формы и в то же время добавить класс к скрытому элементу, чтобы не понизить ее - то есть спасибо за отправку H1. Другая функция состоит в том, чтобы получить входные данные и отобразить их в форме. Поэтому проблема в том, что я могу заставить этого работать, но другой нет. Т.е. в форме отправить я вижу ввод данных, но не благодарственное сообщение H1.
Вот функции:
Simithandler:
submitHandler: function() {
$("#content").empty();
$("#content").append(
"<p>If you want to be kept in the loop...</p>" +
"<p>Or you can contact...</p>"
);
$('h1.success_').removeClass('success_').addClass('success_form');
$('#contactform').hide();
},
onsubmit = "return inputData ()"
function inputdata(){
var usr = document.getElementById('contactname').value;
var eml = document.getElementById('email').value;
var msg = document.getElementById('message').value;
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
return true;
},
Форма использует PHP и jQuery - я не знаю об Ajax, но после того, как некоторые читали еще меньше. Пожалуйста, помогите мне, я не знаю, что я делаю, и в настоящее время я учусь, но это все еще долгий путь для меня.
Спасибо
Форма:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform" onsubmit="return inputdata()">
<div class="_required"><p class="label_left">Name*</p><input type="text" size="50" name="contactname" id="contactname" value="" class="required" /></div><br/><br/>
<div class="_required"><p class="label_left">E-mail address*</p><input type="text" size="50" name="email" id="email" value="" class="required email" /></div><br/><br/>
<p class="label_left">Message</p><textarea rows="5" cols="50" name="message" id="message" class="required"></textarea><br/>
<input type="submit" value="submit" name="submit" id="submit" />
</form>
PHP бит:
<?php
$ subject = "Запрос контактной формы веб -сайта";
// Если форма представлена, если (isset ($ _ post ['upper'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'info@bgv.co.za'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>
JQuery подтверждает:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},
Вот полный бит jQuery:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},
submitHandler: function() {
$('h1.success_').removeClass('success_').addClass('success_form');
$("#content").empty();
$("#content").append('#sadhu');
$('#contactform').hide();
},
}); });
Последнее редактирование - выглядит так:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},
function submitHandler() {
$('h1.success_').removeClass('success_').addClass('success_form');
$("#content").empty();
$("#content").append('#sadhu');
$('#contactform').hide();
},
function inputdata() {
var usr = document.getElementById('contactname').value;
var eml = document.getElementById('email').value;
var msg = document.getElementById('message').value;
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
},
$(document).ready(function(){
$('#contactForm').submit(function() {
inputdata();
submitHandler();
});
});
});
Решение
Ваша функция субмитандлера не вызвана. Вот почему это не работает.
Добавьте это в свой код:
$('#contactForm').submit(function() {
inputdata();
submitHandler();
});
РЕДАКТИРОВАТЬ:
попробуй это:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},
submitHandler: function(form) {
$('h1.success_').removeClass('success_').addClass('success_form');
$("#content").empty();
$("#content").append('#sadhu');
$('#contactform').hide();
var usr = document.getElementById('contactname').value;
var eml = document.getElementById('email').value;
var msg = document.getElementById('message').value;
document.getElementById('out').innerHTML = usr + " " + eml + msg;
document.getElementById('out').style.display = "block";
form.submit();
}
});
});
Другие советы
Я знаю, что на этот вопрос уже ответил, и на это прямо не относится к самому вопросу; Более того, в отношении кода в вопросе. Тем не менее, я не могу опубликовать комментарии, так как я совершенно новый участник, но я просто подумал, что выделю несколько вещей в вашем коде! В основном последовательность в отношении использования jQuery.
В функции, предоставленной для «simithandler» - вы опустошили $ ('#content'), а затем добавите к нему HTML. Это будет работать, но более простой метод будет использование функции .html (); Обратите внимание, что эта функция Можно использовать для возврата HTML, содержащегося внутри элемента; Но это когда не поставляются аргументы. Когда вы поставляете аргумент, он переписывает содержание элемента HTML. Кроме того, я бы, скорее всего, использовал бы метод .show () на элементе успеха H1; Если только для читаемости кода.
Например:
submitHandler: function(){
$('#content').html( "<p>If you want to be kept in the loop...</p>"
+ "<p>Or you can contact...</p>");
$('h1.success_').show();
$('contactform').hide();
}
Что касается inputData () - вы, кажется, снова отказались от духа jQuery, я бы лично стремился к последовательности при использовании jQuery - но также и так, как синтаксис jQuery делает традиционный JavaScript Document.Getelemen ... ' Объект выглядит немного устаревшим/это дополнительно для типа. В своем самых основных jQuery, по сути, лучше всего рассматривать как обертку для объекта документа - только с добавленным синтаксическим сахаром. Кроме того, это позволяет вам использовать методы цепи - поэтому последние два выражения могут быть «одеты», чтобы выглядеть как одно при использовании jQuery.
Лично я бы использовал функции .val (), .html () и .css (); пример:
function inputdata(){
var usr = $('#contactname').val();
var eml = $('#email').val();
var msg = $('#message').val();
$('#out').html( usr + " " + eml + msg )
.css('display', 'block');
return true;
}
Измените возврат True, чтобы вернуть false в функции InputData