表单提交后 Textarea 不保留其内容

Posted

技术标签:

【中文标题】表单提交后 Textarea 不保留其内容【英文标题】:Textarea doesn't keep its contents after a form submission 【发布时间】:2018-07-05 04:30:54 【问题描述】:

我正在尝试在表单提交后将文本区域内容保留在其字段中。

我每次点击提交按钮时都会丢失 textarea 的内容,因为 textarea 会被清除。

表格和文本区域代码:

<form method="post" action="ProcessText.php" role="form" id="TextEntry">
                    <fieldset style=" height: auto; margin-left: 4%; margin-top: 4%; margin-right: 4%; border: solid 1px black !important; border-radius: 5px; padding: 0 10px 10px 10px; border-bottom: none;">
                        <legend style=" width: auto !important; height: auto !important; border: none; font-size: 17px"><b>Text Entry</b></legend>
                        <div class="form-group" style=" margin-bottom: 3px;margin-top:20px; margin-left: 5%; margin-right: 5%;">
                            <div style="position: absolute; margin-top: 5px"><label for="TextArea" class="label label-primary" >Text Area</label></div><br>
                            <div style="position: relative"><textarea style=" resize: none" id = "TextArea" name="TextArea" class="form-control"
                                                                      rows = "19"
                                                                      cols = "50"
                                                                      style=" width: auto; height: auto; text-align: left; border-right: 1px solid#c0c0c0; " placeholder="Add some text"><?php if(isset($_POST['TextArea']))  echo htmlentities ($_POST['TextArea']); ?></textarea></div>        
                        </div>
                        <br><button style="float: right; margin-right: 5%" type="submit" class="btn btn-success" name="Submit">Analyse</button>
                    </fieldset>
                </form>

表单和文本区域位于 index.php 页面中,该页面提交到另一个页面(即 ProcessText.php)。提交运行成功,ProcessText.php 页面按预期接收到发布的数据。

我浏览了论坛的答案并尝试了许多解决方案,例如将以下代码放在 textarea 标签中:

<?php if(isset($_POST['textarea1']))  
         echo htmlentities ($_POST['textarea1']); ?>

我也在 textarea 标签中尝试了这段代码,但没有任何好处:

<?php echo $_POST['TextArea'] ? $_POST['TextArea'] : "" ?>

为澄清起见,包含 textarea 的 index.php 页面代码:

<html>
    <head>
        <title>Text Sorting Form</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="css/Styles.css"/>
        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <style> </style>
    </head>
    <body>


        <div style="width: 100%; overflow: hidden;">

            <div style=" background-color: white; border: 1px solid Grey; 
                 border-radius: 3px; box-shadow: 3px 0px 3px #888888; 
                 width:50%; max-width: 50%; height: 90%; margin-top:3%; margin-left: 
                 3%; margin-right:auto; overflow: hidden; float: left;">
                <form method="post" action="ProcessText.php" role="form" id="TextEntry">
                    <fieldset style=" height: auto; margin-left: 4%; margin-top: 4%; margin-right: 4%; border: solid 1px black !important; border-radius: 5px; padding: 0 10px 10px 10px; border-bottom: none;">
                        <legend style=" width: auto !important; height: auto !important; border: none; font-size: 17px"><b>Text Entry</b></legend>
                        <div class="form-group" style=" margin-bottom: 3px;margin-top:20px; margin-left: 5%; margin-right: 5%;">
                            <div style="position: absolute; margin-top: 5px"><label for="TextArea" class="label label-primary" >Text Area</label></div><br>
                            <div style="position: relative"><textarea style=" resize: none" id = "TextArea" name="TextArea" class="form-control"
                                                                      rows = "19"
                                                                      cols = "50"
                                                                      style=" width: auto; height: auto; text-align: left; border-right: 1px solid#c0c0c0; " placeholder="Add some text"></textarea></div>        
                        </div>
                        <br><button style="float: right; margin-right: 5%" type="submit" class="btn btn-success" name="Submit">Analyse</button>
                    </fieldset>
                </form>
            </div>


            <div style=" background-color: white; border: 1px solid Grey; 
                 border-radius: 3px; box-shadow: 3px 0px 3px #888888; 
                 width:40%; margin-left: 700px; height: 90%; margin-top:3%;">
                <fieldset style=" height:90%; margin-left: 4%; margin-top: 5%; margin-right: 4%; margin-bottom: 10px; border: solid 1px black !important; border-radius: 5px; padding: 0 10px 10px 10px; border-bottom: none;">
                    <legend style=" width: auto !important; height: auto !important; border: none; font-size: 17px"><b>Result</b></legend>
                    <div class="Notes" style=" margin-bottom: 3px;margin-top:40px; margin-left: 5%; margin-right: 5%; height: 75%; width: auto">

                        <?php
                        session_start();

                        // Display Custom Field Value
                        echo '<pre>';
                        echo nl2br("The Submitted Paragraph:\n".$_SESSION['Text']."\n\n");
                        echo nl2br ("Number of Words: " . $_SESSION['number']."\n\n");
                        echo nl2br("Word Frequency in Descending Order:\n");
                        print_r($_SESSION['results']);
                        echo '</pre>';
                        session_unset();
                        session_destroy();
                        ?>

                    </div>
                </fieldset>

            </div>

        </div>     
    </body>
</html>

ProcessText.php 页面代码:

<html>
    <head>
        <title>Text Sorting Form</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="css/Styles.css"/>
        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <style>

        </style>
    </head>
    <body>
        <?php session_start(); ?>

        <?php
        if ($_SERVER["REQUEST_METHOD"] == "POST") 


            $text = $_POST['TextArea'];
            $wordcount = word_count ($text);
            $words = utf8_str_word_count($text, 1);
            $frequency = array_count_values($words);
            arsort($frequency);
            $_SESSION['results'] = $frequency;
            $_SESSION['number'] = $wordcount;
            $_SESSION['Text'] = $text;
            header("location: index.php");
            exit();

        ;

        function utf8_str_word_count($string, $format = 0, $charlist = null) 
            $result = array();


            if (preg_match_all('~[\pL\pMn\pPd\'\x2019' . preg_quote($charlist, '~') . ']+~u', $string, $result) > 0) 
                if (array_key_exists(0, $result) === true) 
                    $result = $result[0];
                
            

            if ($format == 0) 
                $result = count($result);
            

            return $result;
        

        function word_count ($string) 
            $words_to_count = strip_tags($string);
            $pattern = "/[^(\w|\d|\'|\"|\.|\!|\?|;|,|\\|\/|\-\-|:|\&|@)]+/";
            $words_to_count = preg_replace ($pattern, " ", $words_to_count);
            $words_to_count = trim($words_to_count);
            $total_words = count(explode(" ",$words_to_count)); 
            return $total_words;
        

        ?> 
    </body>
</html>

【问题讨论】:

听说过 CSS 吗? 为什么下面这段代码没有php部分? 表单提交到ProcessText.php 后,您如何返回index.php?直接 include() 或 header() 重定向?如果它是一个标头重定向,那将不包含 $_POST 变量。 我看到 TextAreaTextArea1 别对我说对不起,对以后要维护它的人说对不起。 ;p 【参考方案1】:

您面临的主要问题是您要发布到不同的脚本,然后将header("location: index.php"); 执行回index.php。这会丢失所有 $_POST 变量,并且无法将它们添加到标头重定向中(浏览器 POST,而不是服务器标头重定向)。

所以,你需要改变你的方向......

由于您已经将 textarea 内容填充到会话变量 $_SESSION['Text'] 中,因此您可以在 index.php 中使用它:

<textarea name="TextArea" ...otherstuff... ><?php 
      echo (!empty($_SESSION['Text']) ? htmlspecialchars($_SESSION['Text']) : '' );
      unset($_SESSION['Text']);// optionally clear after re-iterating it
?></textarea>       

您需要在 ProcessText.php 页面中解决一些注意事项:

session_start(); 移动到任何 html 或 echo 输出之前的最顶部。 在header();exit; 之前添加session_write_close();。 见鬼,header() 上方的所有“html”也需要删除。

如果您不想使用会话...因为一些专家告诉您它们非常不可靠且无用:

A) 发布到 同一页面,该页面将重新显示您的表单(即 index.php)

B) 设置一个处理所有提交但没有自己的 html 的主分支脚本。然后,这将直接include('index.php'); 您应该获得哪个页面(因此 $_POST 变量将存在)。然而,这种方法在设置所有脚本和 html 块时需要一些计划和纪律。

【讨论】:

我已经在我的代码中解决了你的所有观点,并且效果很好。唯一的例外是当我将:&lt;?php echo (!empty($_SESSION['Text']) ? htmlspecialchars($_SESSION['Text']) : '');?&gt; 放在 textarea 标记之间时,当我运行脚本时,我会得到一个 32 长的空白字符串。似乎$_SESSION['Text'] 永远不会变空,即使在 POST 之前也是如此,还是 htmlspecialchars 函数导致这种情况发生? 一个 32 长的whatnow?这听起来很像垃圾进垃圾出综合症。当您指定要使用它时,您可能希望在原始$_POST['TextArea'] 上执行trim()。除非表单提交它,否则它不应该有那个空格(php 只是不自己添加它,而且绝对不会在未设置期间添加)。 哦,请确保您在 index.php 的最顶部(在任何 html 输出之前)有一个 session_start();。不确定你是否拥有它,但如果没有,你确实需要它。 哈哈哈!!它只是被格式化并放置在新行中的愚蠢的 textarea 结束标记。当我计算结束标记和它之前的最后一个字符之间的空格时,它是 32 长的空格......我认为 PHP 就像 Java 一样,您可以自动格式化代码外观而不会因为生成而遇到任何问题空格。非常感谢您的大力帮助@IncredibleHat 你知道...我认为它可能是 HTML 本身的死区...但是,很高兴您发现并确认了它!必须小心 textareas,因为它们与结束标记一起运行(而输入元素是单个标记)。很高兴你明白了!【参考方案2】:

在您捕获错误集$_SESSION['textentered'] 的地方。例如,如果您不想在数据库中重复值。 示例:

//condition that makes you echo back entered values when there is an error
if($rowexists)
$_SESSION['textentered']=$_POST['textentered'];

然后在您的文本区域中执行以下操作:

<textarea><?php if(isset($_SESSION['textentered']) && $_SESSION['textentered'] !='')echo $_SESSION['textentered']; ?></textarea>

这对我有用。

【讨论】:

以上是关于表单提交后 Textarea 不保留其内容的主要内容,如果未能解决你的问题,请参考以下文章

使用JQuery的.ajax()提交表单后当前页面表单内容被清空,请问如何保留数据?

表单提交textarea内容,第一次获取不到值,第二次才能获取到的解决方法:

通过 Ajax 在 React 中提交表单

在jQuery中直接提交表单后怎么获取返回值

表单提交后重置textarea的值

如何在表单提交后保留文本(如何在提交后不删除自身?)