Question

我是jQuery的新手，并试图寻找如何做到这一点的答案。我有两个功能，我希望两者一起工作。一个函数是submitHandler，它用于隐藏表单，同时将一个类添加到隐藏元素中以取消隐藏它 - 即感谢您提交h1。另一个功能是获取输入数据并在表单中的onsubmit上显示它。所以问题是我可以让那个工作，但其他的不工作。即表格提交我可以看到数据输入但不是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;

}

} ？＆GT;

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

}）;

Answer 1

我知道这个问题已经得到解答，这不是直接涉及问题本身;关于问题中的代码更是如此。但是，我不能发表评论，因为我是一个全新的成员，但我只是想在你的代码中突出显示一些内容！主要是关于jQuery使用的一致性。

在为“submitHandler”提供的函数中 - 您清空$（'＃content'）然后将HTML附加到它。这将有效，但更简单的方法是使用.html（）函数;请注意，此函数可以用于返回元素中包含的HTML;但那时没有提供任何参数。当您提供参数时，它会重写html元素的内容。另外，我很可能在h1 success元素上使用.show（）方法;如果仅用于代码可读性。

例如：

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;
}

Answer 2

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

Answer 3

CHange返回true，在inputdata函数中返回false

jQuery让这些功能一起工作

3 个答案: