3

Web ページのメイン セクションにフォームを配置し、このセクションの下部にフォームを送信するためのボタンを配置したいと考えています。

また、他のページへのリンクを含むサイド バーが必要ですが、リンクがクリックされるたびにフォームを送信するためのボタンとしても機能するようにします。（つまり、HTMLでは、これらのリンクのコードはフォームタグの外側にありますが、フォームのボタンとして機能したいです）

これは可能ですか？

4

7 に答える 7

1

リンクで次のonclickハンドラーを使用しformId、送信するフォームの ID に置き換えます...

onclick="document.getElementById('formId').submit();return false;"

アップデート

@Juan（および他の人、特に@JoeTaylor）が述べたように、上記はフォームに関連付けられたクライアント側の検証コードを起動しません。私が知っている最も簡単な方法はclick、フォーム内で送信ボタンのイベントを発生させることです。たとえば、これはあなたのリンクで使用できます...

onclick="document.getElementById('formSubmitButton').click();return false;"

サーバー側の処理については何も言及していませんが、それがフォームのポイントであると仮定します。これの裏で私が言うもう1つのことは、常に検証をサーバーに複製する必要があるということです。JavaScript は非常に簡単に迂回できるため、サーバーに到達する値が正しいことを確認し、JavaScript がその役割を果たしたと思い込まないでください。

于 2012-08-08T16:37:46.113 に答える
1

HTML5 で JavaScript を使用しなくても、これは非常に簡単に解決できます。

<input type="submit" form="id_of_the_form" value="Submit">

<form id="id_of_the_form" action method></form>

そして、これらのボタンを好きなようにスタイルできます。例のように、ボタンは dom 内の任意の場所に配置できます。フォームに配置する必要はありません。

于 2012-08-08T17:25:38.767 に答える
0

アタッチした関数によってフォームが送信され、submit()検証されるようにする最も簡単な方法は、フォームのメソッドを呼び出すのではなく、送信ボタンのclick()メソッドを呼び出すことです。

次の形式を検討してください。

<form id="bar" method="post" action="/echo/html/">
    <input type="text" id="foo" name="foo">
    <input type="submit" value="Submit">
</form>

今のところ、送信をクリックしても特別なことは何もありません。しかし、何かをサーバーに送信する前にテキスト入力に値があることを確認したい場合はどうでしょうか? 次のように実行できます。

function validateBarForm() {
    var txt = this.querySelector("input[type=text]");
    if (txt.value == "") {
        txt.style.outline = "solid red 2px";
        return false;
    }
}

document.getElementById("bar").onsubmit = validateBarForm;

これで、[送信] をクリックしても、空白のテキスト入力でフォームが送信されることはなくなりました。しかし、プログラムでフォームを送信するとどうなるでしょうか? 最初にリンクを追加しましょう...

<a href="#" id="submit-bar">submit form</a>

このリンクはform タグの外にあることに注意してください。提出関数を簡単に添付できます。

function submitBarForm() {
    document.getElementById("bar").submit();
}

document.getElementById("submit-bar").onclick = submitBarForm;

「フォームを送信」をクリックすると... おっと！検証機能は実行されません! この問題を回避する方法はいくつかありますが、私のお気に入りは、単純に JavaScript で送信ボタンのクリックをシミュレートすることです。これは、検証関数の呼び出しをハードコーディングするよりもはるかに優れた変更に耐えられることがわかりました。

function submitBarForm() {
    document.querySelector("#bar input[type=submit]").click();
}

リンクをクリックすると、フォームが検証され、すべてがチェックアウトされると送信されます。しかし、私の言葉を鵜呑みにしないでください。jsfiddle.net にアクセスして、自分の目で確かめてください。

于 2012-08-08T17:02:42.407 に答える
0

はい、ボタンのクリックイベントを追加しますdocument.getElementById('formId').submit();

于 2012-08-08T16:37:36.427 に答える
0 
<form name="myform" action="action.php">

    // Your form

</form>

<a href="javascript: document.myform.submit();">Submit form</a>

または、jQuery を使用できます。

<form name="myform" action="action.php">

    // Your form

</form>

<a href="#" onclick="$("#myform").submit();">Your text</a>
于 2012-08-08T16:38:23.010 に答える
0

フォームに onclick JavaScript 関数を追加する。

document.forms["myform"].submit();

「myform」はフォームの ID です。ここに素晴らしいウォークスルーがあります: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

たとえば、ボタンは次のようになります。

<button onclick="document.forms['myform'].submit();">Hi</button>
于 2012-08-08T16:37:18.573 に答える