jQuery使这些功能一起工作

StackOverflow https://stackoverflow.com/questions/6806365

题

我是JQUERY的新手，并试图四处寻找有关如何做到这一点的答案。我有2个功能，我都希望一起工作。一个函数是submithandler，它用于隐藏表单，同时添加了一个类，将一个类添加到隐藏的元素中以解开其 - 即感谢您提交H1。另一个功能是获取输入数据并以表单上的贴件显示。因此，问题在于我可以让一个工作，但另一个则没有。 IE在表单上提交我可以看到数据输入，但不能看到H1谢谢消息。

这是功能：

subsithandler： 

    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

$主题=“网站联系表格查询”；

//如果提交表格，如果（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验证位：

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

});

有帮助吗？

解决方案

您的subsithandler函数未调用。这就是为什么它不起作用。

将其添加到您的代码中：

$('#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的一致性。

在为“ subsithandler”提供的函数中 - 您为空$（'＃content'），然后将html附加到它。这将起作用，但是一种更简单的方法是使用.html（）函数；请注意此功能 能够 用于返回元素内包含的HTML；但这是没有提供争论的时候。当您提供参数时，它会重写HTML元素的内容。此外，我很可能会在H1成功元素上使用.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 ... 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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top