提交表單后如何更改文本框的值？

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 個解決方案

解決方案1
3 2011-01-30 23:51:45

解決方案2
3 已采納 2011-01-30 23:59:47

解決方案3
0 2011-01-30 23:51:13

解決方案4
0 2011-01-30 23:54:18

提交表單后如何更改文本框的值？

問題描述

4 個解決方案

解決方案1 3 2011-01-30 23:51:45

解決方案2 3 已采納 2011-01-30 23:59:47

解決方案3 0 2011-01-30 23:51:13

解決方案4 0 2011-01-30 23:54:18

解決方案1
3 2011-01-30 23:51:45

解決方案2
3 已采納 2011-01-30 23:59:47

解決方案3
0 2011-01-30 23:51:13

解決方案4
0 2011-01-30 23:54:18