Question

我有一个网站，我希望人们能够在文本框中输入内容并根据他们输入的内容发送到该目录。

说出客户编号，因此我们有客户＃155。他的发票位于文件夹/invoices/155目录中。我希望他能够输入他的客户＃并按下按钮点击他的所有发票上的目录。

现在我编写了下面的代码，但只有当我用鼠标点击按钮时它才有效。在Internet Explorer中当我按下回车键时，它在地址栏中给了我一堆东西并且没有做任何事情。在地址栏中看起来像这样：

file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155

而不是加载文件夹/invoices/155/。

<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">

</form>

任何人都可以告诉我代码有什么问题，我该怎么做才能修复它？提前谢谢。

Answer 1

在某些浏览器中，当您按Enter键时，表单将被发布，尽管没有提交按钮。使用提交按钮，然后捕获提交，然后处理所有情况：

<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>

Answer 2

如果您使用文件协议，它将无法工作。特别是在IE中。你需要一个真正的Web服务器。

让客户输入他的身份证明非常不安全。任何人都可以输入任何ID。使用登录。

清除每个用户输入以防止滥用行为非常重要非常重要。

还有很长的路要走。

Answer 3

我认为您应该onsubmit

上的<form>

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script>
        function handleFormSubmit(form)
        {
            window.location = form.dir.value + form.userinput.value;
            return false;
        }
    </script>
</head>
<body>
    <form onsubmit="return handleFormSubmit(this)">
            <input name="dir" type="hidden" value="/invoices/">
            <input name="userinput" type="text">
            <input type="submit" value="try me" >    
    </form>
</body>
</html>

顺便说一句：
内联javascript并不是那么好。使用脚本标记或外部.js文件。

修改
哎呀！好的，错误是我写了this.form.dir，但它必须是this.dir，因为this已经引用了表单，现在javascript处理程序位于form标记上（ onsubmit="<handler-code>"）。这有效 - http://jsfiddle.net/Q875a/

编辑2：
内联javascript 表示您在html代码中编写了javascript代码（form，input，...） onXXX 属性 - 无法读取。将脚本放在处理程序函数（即script）中的handleFormSubmit标记中会使其更具可读性，尤其是当您的网站中包含越来越多的脚本时 - 请参阅当前脚本和onsubmit -attribute。

最后，如果你想进一步深入 crossbrowser，强大的javascript开发，你应该看看jQuery - 这是真正专业和退出javascript编程！

JSFiddle测试：
http://jsfiddle.net/yNTK5/

关于该主题的jQuery链接：
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/

Javascript在Internet Explorer中表现得很有趣

3 个答案: