42

送信時にJavaScript関数を実行する必要があるフォームがあり、関数はデータをphp送信メールファイルに投稿し、メールが送信されます。しかし、それはfire foxでのみ機能します。フォーム アクションは IE で何もしていないようです。私の質問は次のとおりです。これは、フォーム アクションから外部ファイルから関数を呼び出す正しい方法ですか。

action="javascript:simpleCart.checkout()"

simpleCart は .js ファイルで、checkout() は関数です。

Firefox では機能するのに、IE、Chrome、または Safari では機能しない理由を理解するのに苦労しています。

<form name=form onsubmit="return validateFormOnSubmit(this)" enctype="multipart/form-data" action="javascript:simpleCart.checkout()" method="post">
4

4 に答える 4

54

JavaScript 関数に設定されたフォーム アクションは広くサポートされていません。FireFox で動作することに驚きました。

最良の方法は、フォームactionを PHP スクリプトに設定することです。提出前に何かする必要がある場合は、追加するだけですonsubmit

編集により、追加の機能は必要ないことがわかりました。ここでの小さな変更のみです。

function validateFormOnSubmit(theForm) {
    var reason = "";
    reason += validateName(theForm.name);
    reason += validatePhone(theForm.phone);
    reason += validateEmail(theForm.emaile);

    if (reason != "") {
        alert("Some fields need correction:\n" + reason);
    } else {
        simpleCart.checkout();
    }
    return false;
}

次に、フォームで：

<form action="#" onsubmit="return validateFormOnSubmit(this);">
于 2012-05-09T17:19:15.910 に答える
48

絶対に有効です。

    <form action="javascript:alert('Hello there, I am being submitted');">
        <button type="submit">
            Let's do it
        </button>
    </form>
    <!-- Tested in Firefox, Chrome, Edge and Safari -->

簡単な答えとして、はい、これはオプションであり、素晴らしいものです。「送信したら、どこにも行かずにこのスクリプトを実行してください」と書かれています-かなり要点です。

マイナーな改善

どのフォームを扱っているかをイベント ハンドラーに知らせるには、sender オブジェクトを渡すのが明らかな方法のように思われます。

    <form action="javascript:myFunction(this)">  <!-- should work, but it won't -->

しかし、意味のあるものの代わりにthis、 Window オブジェクトを指します。どうやらjavascript:リンクは別のスコープに住んでいます。したがって、次の形式をお勧めします。これはわずか 13 文字で、魅力的に機能します。

    <form action="javascript:;" onsubmit="myFunction(this)">  <!-- now you have it! -->

...これで、送信者フォームに適切にアクセスできます。(単純な「#」をアクションとして記述できます。これは非常に一般的ですが、送信時に一番上までスクロールするという副作用があります。)

繰り返しますが、私はこのアプローチが気に入っています。「falseを返す」、jQuery / domReady、重火器はありません。それは、それがしているように見えることをするだけです。確かに他の方法も有効ですが、私にとってはこれがサムライの道です。

検証に関する注意事項

フォームは、onsubmitイベント ハンドラーが何か真実を返す場合にのみ送信されるため、事前チェックを簡単に実行できます。

    <form action="/something.php" onsubmit="return isMyFormValid(this)">

これでisMyFormValidが最初に実行され、それが false を返した場合でも、サーバーは気にしません。言うまでもなく、サーバー側でも検証する必要があり、それがより重要です。しかし、迅速かつ便利な早期発見のためには、これで問題ありません。

于 2015-12-26T02:20:30.487 に答える
1

私は常に js ファイルを html ドキュメントの先頭に含め、それらはアクションで単に javascript 関数を呼び出します。このようなもの：

action="javascript:checkout()"

これを試してみますか？

HTML ヘッドにスクリプト参照を含めることを忘れないでください。

firefox で動作する原因がわかりません。よろしく。

于 2012-05-09T17:26:05.493 に答える