0

我是 Jquery 的新手。我正在处理一个表格。标题和文本 (textarea) 当我填写字段并单击发送时，当我单击两次确定以向上滚动页面时会出现两个警报。现在我填写字段，然后从头开始。

如何确保两次检查后继续页面？

查询：

    $("#formPages").submit( function(event) {
        var title = $('#title').val();
        var text = $('#text').val();
        if(title == ''){
            $("#titleError").html("<p>Fill Title</p>");
            alert('title empty');
        }       
        if(text == ''){
            $("#textError").html("<p>Fill Text</p>");
            alert('text empty');
        }       
        $("html, body").animate({ scrollTop: 0 }, 600);
        event.preventDefault();          
    });

形式：

<form class="form" id="formPages">
<div>
    <label class="title">Title</label>
    <div id="titleError"></div>
    <input type="text" id="title" name="title" value="">

</div>
<div>
    <label class="title">Text</label>
    <div id="textError"></div>
    <textarea name="text" id="text" rows="14" cols="50"></textarea><br />

</div>
<div>
    <input class="btn btn-success" type="submit" id="submitButton"  name="submitButton" value="Submit">
</div>
</form>
4

4 回答 4

1

您的event.preventDefault()声明使表格无法提交。仅当表单中的某些内容无效并且您不希望提交表单时才应使用此语句。否则，删除它将允许表单提交到下一页。

于 2013-07-31T15:12:48.457 回答
1

不应在IF语句event.preventDefault();之外使用 when 。您的代码应该像这样工作：

$("#formPages").submit( function(event) {
    var title = $('#title').val();
    var text = $('#text').val();
    if(title == ''){
        $("#titleError").html("<p>Fill Title</p>");
        alert('title empty');
        event.preventDefault(); 
    }       
    if(text == ''){
        $("#textError").html("<p>Fill Text</p>");
        alert('text empty');
        event.preventDefault(); 
    }       
    $("html, body").animate({ scrollTop: 0 }, 600);         
});

尚未对其进行测试，但应该可以按预期工作，如果有任何错误，请发表评论。检查文本区域或标题是否为空会更好地使用if (text.length === 0)和if (title.length === 0)

编辑

请在此处查看 JSFiddle以获取工作示例，我已经使用 Chrome、FF 和 IE 对其进行了测试（我知道：D）

于 2013-07-31T15:14:10.283 回答
0

除了 DaGhostman 已经说过将 event.preventDefault() 语句放在每个if语句下面的内容之外，您的表单标签没有指定提交时要做什么。

为了处理数据，必须在某处发布表单。必须在<form>标签中指定处理文件的名称和交付方式。

你有：

<form class="form" id="formPages">

你应该有：

<form class="form" id="formPages" action="yourProcessorFile.php" method="POST">

然后，您必须有一个 PHP 文件来接收和处理表单数据。笔记：

  • 表单数据作为关联数组传递，称为 $_POST。
  • 每个表单元素的name属性成为 $_POST 数组中的 KEY（或变量名）
  • 输入到字段中的值将成为 PHP 文件中该变量的值。

例如，PHP 处理器文件可能如下所示（使用与上述action=属性相同的文件名）：

你的处理器文件.php

<?php
    $t = $_POST['title'];
    $x = $_POST['text'];

    echo '<h1>Received From Form:</h1>;
    echo 'Title: ' .$t. '<br>';
    echo 'Text: ' .$x. '<br>';
于 2013-07-31T16:06:59.713 回答
0

首先，我建议使用 Jquery 验证插件，特别是如果您有多个表单，它会完全按照您的意愿执行，它会验证表单。

现在对于您的问题，您总是阻止表单提交，因为您总是这样做 event.preventDefault()，只有在表单中的某些内容无效时才需要阻止提交，请尝试这样：

$("#formPages").submit( function(event) {
    var title = $('#title').val();
    var text = $('#text').val();
    var isValid = true;

    if(title == ''){
        $("#titleError").html("<p>Fill Title</p>");
        alert('title empty');
        isValid = false;
    }    

    if(text == ''){
        $("#textError").html("<p>Fill Text</p>");
        alert('text empty');
        isValid = false;
    }       

    if(!isValid){
        event.preventDefault(); 
        $("html, body").animate({ scrollTop: 0 }, 600);
    }
});
于 2013-07-31T15:22:12.037 回答