Question

我有一个文本字段和一个按钮。单击按钮时，页面将重定向到同一个URL，我希望输入的字段在文本字段中保持绑定状态。我怎样才能做到这一点？

代码

 <input type="text" size="25" style="background-color:#D8D8D8" id="to"/><br><br>  

 <input type="submit" name="scheduleSubmit" value="Submit" id="scheduleSubmit" 
  <button class="btn btn-round btn-success" type="button"></button>

按钮onclick事件

var textBox2 = document.getElementById('to');
value = "?from="+ textBox1.value ;
location.href = "http://127.0.0.1:8000/new/reports/daily/" + value ;
 document.getElementById("to").value= textBox2.value;

Answer 1

您可以使用javascript解析查询字符串。查询字符串存储在location.search对象中，还包含?。

首先，将查询字符串捕获为可以使用的内容：

var queryString = location.search.substr(1); // substr(1) will cut off the ? character

然后将实际字符串解析为对象：

function parseQuery(str) {
    var result = {}; // going to store the key-value (kvp) pairs in here
    var pairs = str.split('&'); // break it up by the standard ampersand delimiter
    for ( var i = 0; i < pairs.length; i++ ) { // go through each of the pairs
        var kvp = pairs[i].split('='); // parse the individual pair using = as the delimiter
        result[kvp[0]] = kvp[1]; // kvp[0] contains the name of the field, kvp[1] contains the value
    }
    return result;
}
var parsedQueryString = parseQuery(queryString);

现在填充表单输入元素：

document.getElementById('to').value = parsedQueryString.to||'';

在上一行中详细说明，parsedQueryString现在是一个对象（来自上面函数返回的result）。输入字段名为to，对应于查询字符串中的键。我们可以通过parsedQueryString.to访问它，但是，如果它不包含在查询字符串中，我们希望它通过默认为默认情况下（或运算符||）失败，以指定一个空字符串{{1 }：''。

这是一个有效的例子：

parsedQueryString.to || ''

请注意，<!doctype html> <html> <head> <title>JS Form</title> </head> <body> <form method="get"> <p><input type="text" size="25" id="to" name="to" /></p> <p><input type="submit" value="Submit" id="scheduleSubmit" name="scheduleSubmit" /></p> </form> <script type="text/javascript"> function parseQuery(str) { var result = {}; var pairs = str.split('&'); for ( var i = 0; i < pairs.length; i++ ) { var kvp = pairs[i].split('='); result[kvp[0]] = kvp[1]; } return result; } var queryString = location.search.substr(1); var parsedQueryString = parseQuery(queryString); document.getElementById('to').value = parsedQueryString.to||''; </script> </body> </html>元素中缺少action属性只会让浏览器“发布”/“获取”当前页面的数据。

Answer 2

您的文本字段的名称首先是您想要的。例如，我将文本字段命名为的的TextField 即可。然后检查是否从给定的文本字段发送请求;如果是，则保持绑定值。如果没有，它将使值为空。 “我使用的代码”这里是PHP，所以你需要像wampserver这样的服务器才能看到所需的结果。否则，没有任何事情发生'

<input type="text" name = 'textField' value =" if(isset($_REQUEST['textField'])) { echo $_REQUEST['textField'] } else { echo '' } " size="25" style="background-color:#D8D8D8" id="to"/><br><br>

在文本字段中绑定输入的文本

2 个答案: