Javascript - 通过Get方法从表单获取值

时间:2017-10-21 08:31:20

标签: javascript forms getmethod

我无法将client.html中表单输入的值打印到server.html中的表。它必须用Javascript编写,并使用GET Method for form。

client.html:

<form action="server.html" method="get">
<p>
 Name: 
 <input type="text" id="txtname" name="txtname" />    
</p>
</form>

server.html:

<head>
<script type="text/javascript">

    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
            function (m, key, value) {
                vars[key] = value;
            });
        return vars;
    }
var name= unescape(getUrlVars()[document.getElementById("txtname")]);
document.getElementById("idname").innerHTML=name;
</script>
</head>
<body>
<table>
<tr>
    <td>Name:</td>
    <td id="idname"></td>
</tr>
</table>
<body>

1 个答案:

答案 0 :(得分:0)

这里有一些事情:

您正尝试将innerHTML的{​​{1}}设置为#idname,这是未定义的。

hoten.value也无法验证。您可以简单地使用getUrlVars()[docuemnt.getElementById("txtname")]来获取查询参数。

您还尝试在处理DOM之前设置值 - JS无法设置元素的值,因为它尚未放置在页面上。

修复错误并将JS移动到body标记的末尾修复了这个问题:

getUrlVars().txtname