JQuery заставить эти функции работать вместе

Я новичок в jQuery и пытался найти ответ на вопрос, как это сделать. У меня есть 2 функции, и я хотел бы, чтобы оба работали вместе. Единственная функция - submitHandler, которая используется для скрытия формы и в то же время для добавления класса к скрытому элементу, чтобы показать его - т.е. спасибо за отправку h1. Другая функция - захватывать входные данные и отображать их в форме. Так что проблема в том, что я могу заставить это работать, а потом - нет. Т.е. при отправке формы я вижу ввод данных, но не сообщение h1 Спасибо.

Вот функции:

SubmitHandler:

    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 = "Запрос формы контакта с веб-сайтом";

// Если форма отправлена ​​if (isset ($ _ POST ['submit'])) {

//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 Validate:

$(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();
        });
    });

});

Источник

3 ответа

Решение

Ваша функция 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.

В функции, предоставленной для submitHandler - вы очищаете $('#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;
}
Источник

CHange вернуть true, чтобы вернуть false в функции inputdata

Источник
Другие вопросы по тегам