Javascript在网络浏览器中表现得有趣

我有一个网站，我希望人们能够在文本框中键入内容并根据他们输入的内容发送到该目录。Javascript在网络浏览器中表现得有趣

说客户号码，所以我们有客户＃155。他的发票在文件夹/invoices/155目录。我希望他能够输入他的顾客＃并且用他的全部发票点击按钮点击他的目录。

现在我编码了下面的代码，但它只有当我用鼠标点击按钮时才起作用。在Internet Explorer中当我按下Enter时，它会给我一些地址栏中的勾号，并且什么也不做。它看起来像这样在地址栏中输入：

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>

任何人都可以告诉我代码有什么问题，我能做些什么来解决它？提前致谢。

来源

2012-12-07 Matthew Lenfest

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

而让客户输入他的ID是极其不安全。任何人都可以输入任何ID。使用登录。

这是真的***重要消毒每用户输入以防止滥用。

这是一条漫长的路要走。

来源

2012-12-07 22:40:36 HerrSerker

每个客户目录都有一个带有MD5散列密码的.htaccess文件。这只是为了让他们到他们的发票目录，所以他们不必记住地址。 –

yunzen此文件上传到apache2服务器fyi。 –

然后，您必须将该服务器的http地址添加到location.href – HerrSerker

我觉得你应该去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>

BTW：
内联JavaScript并不是那么好。使用脚本标记或外部.js文件。

编辑：
糟糕！ OK，错误的是，我写this.form.dir，但它需要的是this.dir因为this已经提到的形式，现在的JavaScript处理是在form标签（onsubmit="<handler-code>"）。这一工程 - http://jsfiddle.net/Q875a/

编辑2：
内联的JavaScript意味着你编写JavaScript代码在你的HTML标签（form，input，...）在的onXXX属性 - 这是不可读的。处理程序功能（即handleFormSubmit）内具有在script标签脚本使得它更可读，特别是如果你的网站在它受到越来越多的脚本 - 看到当前的脚本和onsubmit -attribute。

最后，如果你想进一步采取步骤跨浏览器，强大的JavaScript开发你应该看看jQuery - 这是恕我直言门真正专业和退出Javascript编程！

的jsfiddle测试：有关的话题
http://jsfiddle.net/yNTK5/

jQuery的链接：
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/

来源

2012-12-07 22:41:15

Warappa感谢您的建议，我会尝试一下。还有什么内联JavaScript？什么是脚本标签？我是编程javascript的新手。 –

我尝试了你的建议warappa并发生了同样的情况。现在什么都行不通:-( –

在某些浏览器，当你按回车键的形式将被张贴沉绵有没有提交按钮。使用提交按钮并提交，然后处理所有情况：

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

来源

2012-12-07 22:42:41 Guffa

Guffa，我把代码改成了你的建议，现在什么都没有起作用，鼠标点击按钮或输入按钮，都将这个字符串发送到地址栏“http://www.mydomain.com /test.html?dir=%2Finvoices%2F&userinput=170“。当用户在输入框中键入170时，应该将它们发送到”http://www.mydomain.com/invoices/170/“请建议 –

@MatthewLenfest：抱歉，在submit事件中，它应该只是'this'而不是'this.form'来访问这些字段。请参阅上面的更正。 – Guffa

Javascript在网络浏览器中表现得有趣

回答

相关问题