1

私は、人々がテキスト ボックスに何かを入力し、入力内容に基づいてそのディレクトリに送信できるようにしたい Web サイトを持っています。

顧客番号を言うと、顧客番号は 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>

コードの何が問題なのか、それを修正するにはどうすればよいのか、誰か教えてもらえますか? 前もって感謝します。

4

3 に答える 3

2

一部のブラウザーでは、送信ボタンがなくても、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>
于 2012-12-07T22:42:41.720 に答える
0

ファイルプロトコルを使用している場合は機能しません。特にIEでは。実際のWebサーバーが必要です。

また、顧客にon idを入力させることは、非常に 安全ではありません。誰でも任意のIDを入力できます。ログインを使用します。

悪用を防ぐために、すべてのユーザー入力をサニタイズすることが本当に重要です。

長い道のりです。

于 2012-12-07T22:40:36.777 に答える
0

私はあなたが行くべきだと思い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 ファイルを使用します。

編集：
おっと！OK、エラーは私が書いたものでしたが、javascript ハンドラーがタグ ( ) にあるため、既にフォームを参照しthis.form.dirている必要がありました。それは動作します - http://jsfiddle.net/Q875a/this.dirthisformonsubmit="<handler-code>"

編集 2:
javascriptのインライン化とは、属性formの html タグ ( 、、input...)にJavaScript コードを記述することを意味します。これは読み取り不能です。スクリプトをハンドラー関数内のタグ (つまり) に含めると、特にサイトにスクリプトがますます多く含まれている場合に、はるかに読みやすくなります。現在のスクリプトと-attribute を参照してください。onXXX scripthandleFormSubmitonsubmit

最後に、クロスブラウザの強力な 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-07T22:41:15.210 に答える