Javascript 在textfield中绑定输入的文本_Javascript_Jquery

Javascript 在textfield中绑定输入的文本

javascript jquery

Javascript 在textfield中绑定输入的文本,javascript,jquery,Javascript,Jquery,我有一个文本字段和一个按钮。当点击按钮时，页面被重定向到相同的url，我希望输入的字段保持绑定在textfield中。我该怎么做代码 <input type="text" size="25" style="background-color:#D8D8D8" id="to"/><br><br> <input type="submit" name="scheduleSubmit" value="Submit" id="scheduleSubmit

我有一个文本字段和一个按钮。当点击按钮时，页面被重定向到相同的url，我希望输入的字段保持绑定在textfield中。我该怎么做

代码

 <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>

文本字段的第一个名称是您想要的名称。例如，我将文本字段命名为 文本字段。然后检查是否从给定的文本字段发送请求；如果是，请将该值绑定。否则，它将使值为空。这里的“我使用的代码”是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>

您可以使用javascript解析查询字符串。查询字符串存储在

位置.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);

在前一行中详细说明，

parsedQueryString

现在是一个对象（上面函数return的

结果

）。输入字段名为

to

，对应于查询字符串中的键。我们可以通过

parsedQueryString.to

访问它，但是，如果它没有包含在查询字符串中，我们希望它通过默认分配空字符串

：

parsedQueryString.to | |'

，优雅地失败（使用or运算符

| |

）

以下是一个工作示例：

<!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>


JS表格


函数解析查询（str）{
var result={}；
变量对=str.split（'&'）；
对于（变量i=0；i


请注意，表单
元素中缺少操作
属性，浏览器只会将数据“发布”/“获取”到当前页面。您能否更好地解释一下“输入的字段仍然绑定在文本字段中”？单击按钮并重新删除时，该字段变为空，但我希望显示以前输入的文本
document.getElementById('to').value = 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>