Question

我有一个表单，其中的字段预先填充了默认值，如下所示：

<input type=text name=first value="First Name" class="unfilled" />

单击文本框后，将从文本框中删除类unfilled，文本框将变为空白，以便用户可以输入他/她自己的信息。

问题是，当提交表单时，它会使用这些默认值提交，这会弄乱服务器端验证。我怎么能这样做，以便在提交表单时，所有具有默认值的字段都是空白的，因此服务器端验证会抛出错误：'请填写此字段'？

我正在尝试以下不起作用的代码：

$("#myForm").submit(function()
        {
            $(".unfilled").val('');
        }
);

这会使字段为空，但服务器仍然会以之前的默认值接收它们。

Answer 1

您需要先停止表单执行，更改值，然后手动提交表单。

$("#myForm").submit(function(e)
{
    // Stop the form submit
    e.preventDefault();

    $(".unfilled").val('');
    $(this).submit();
}

Answer 2

我认为你只是语法错误。您错过了submit方法的右括号。

我只是掀起了它并且工作正常

<!DOCTYPE html>
<html>
    <body>
        <?php
        var_dump($_POST);
        ?>
        <form action="test.php" method="post">
            <input type="text" name="first" value="First Name" class="unfilled">
            <input type="submit">
        </form>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
                $('form').submit(function() {
                    $('.unfilled').val('');
                });
            });
        </script>
    </body>
</html>

Answer 3

我认为你需要JQuery的.click（）函数。

示例：

   $(function () { // shorthand for document.ready
      $('.unfilled').click(function () {
         $(this)
            .val('')
            .removeClass('unfilled');
      })
   });

<强>更新

抱歉，我想念你，认为你需要一个像占位符这样的功能。

您可以使用return false;执行此操作，但这会取消提交。或者像GreenWebDev说使用e.preventDefault();。

Answer 4

如果您希望提交表单，则必须return true;，否则必须为false。这种方法的问题在于，在发布值之前字段将“闪烁”，从而产生一些不专业的感觉。最好使用隐藏值并在submit()事件中设置它们。

提交表单时如何更改文本框的值？

4 个答案: