2

我已经编写了以下代码，但表单试图发布好像没有找到 javascript？

代码在<head>文档中：

<script language="JavaScript" type="text/javascript">
    $('.entrysend').click(function(e){
        e.preventDefault();

        var error = false;
        var name = $('#name').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var email = $('#email').val();

        if(name.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(address.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(phone.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(email.length == 0){
            var error = true;
            alert("Please complete all fields");
        }

        if(error == false){
            $.post("compthanks.asp",
                    $(".entry").serialize(),
                    function(result){
                        if($.trim(result) == 'sent'){
                            $('.entrysend').remove();
                            alert("Thanks for entering!");
                        }
                    }
</script>

HTML：

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
    <br class="floatClear" />
    <div class="formwrapper">
        <input name="name" id="name" type="text" placeholder="FullName" />
    </div>

    <div class="formwrapper">
        <textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
    </div>

    <div class="formwrapper">
        <input name="phone" id="phone" type="text" placeholder="ContactNumber" />
    </div>

    <div class="formwrapper">
        <input name="email" id="email" type="text" placeholder="Email" />
    </div>

    <div class="formwrapper floatClear">  
        <input name="submit" type="submit" value="Send Entry" class="entrysend" />
    </div>
</form>

谁能指出为什么表单仍然提交而不是 javascript 启动的原因？

4

3 回答 3

1

运行验证 onsubmit（在表单上）而不是 onclick（在按钮上） - 如果验证失败，则返回 false

于 2013-04-05T09:41:31.827 回答
1

如果您的 JS 在<head>您的页面中，那么这将不起作用。当你添加

$('.entrysend').click(function(e){...});

页面上还没有具有类的元素entrysend。

要解决此问题，您有两种选择：

  • 将您的 JS 移动到页面底部，在<form>元素之后。

  • 将您的 JS 包装在ready处理程序中：

JS：

$(document).ready(function() {
    $('.entrysend').click(function(e){...});
});

这样，jQuery 将等到所有 HTML 都添加到 DOM 后，才会尝试将点击处理程序附加到entrysend元素。

更新：

我刚刚将您的代码添加到 jsFiddle 并注意到您发布的代码中有 JS 错误。它可能只是一个复制/粘贴错误，但它可能是您问题的原因：

你永远不会关闭一半的功能。你以两个花括号结束，它们只关闭你最后一个function块。你需要添加)}})到你的 JS

  • A)关闭$.post
  • A}关闭if(error == false)
  • A关闭处理程序}中的匿名函数click
  • A)关闭点击处理程序

新JS：

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('.entrysend').click(function(e){
            e.preventDefault();

            var error = false;
            var name = $('#name').val();
            var address = $('#address').val();
            var phone = $('#phone').val();
            var email = $('#email').val();

            if(name.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(address.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(phone.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(email.length == 0){
                var error = true;
                alert("Please complete all fields");
            }

            if(error == false){
                $.post("compthanks.asp", $(".entry").serialize(),function(result){
                    if($.trim(result) == 'sent'){
                        $('.entrysend').remove();
                        alert("Thanks for entering!");
                    }
                });
            }
        });
    });
</script>
于 2013-04-05T09:57:37.090 回答
0

//你的脚本

<script language="JavaScript" type="text/javascript">
        $('.entrysend').click(function(e){

        var error = false;
        var name = $('#name').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var email = $('#email').val();

        if(name.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(address.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(phone.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(email.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                }

        if(error == false){
                    $.post("compthanks.asp", $(".entry").serialize(),function(result){
                    if($.trim(result) == 'sent'){
                       $('.entrysend').remove();
                       alert("Thanks for entering!");
                    }
                }
        </script>

//你的表格

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
        <br class="floatClear" />
        <div class="formwrapper">
          <input name="name" id="name" type="text" placeholder="FullName" />
        </div>

        <div class="formwrapper">
          <textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
        </div>

        <div class="formwrapper">
          <input name="phone" id="phone" type="text" placeholder="ContactNumber" />
        </div>

        <div class="formwrapper">
          <input name="email" id="email" type="text" placeholder="Email" />
        </div>

        <div class="formwrapper floatClear">  
          <input name="submit" type="button" value="Send Entry" class="entrysend" />
        </div>
        </form>

如果发生任何错误，我已经更改了您的代码并提供了return false;声明，以便表单不会被提交。

于 2013-04-05T10:43:24.573 回答