JavaScriptを使用してフォームを送信する方法

190

theForm次のdivに送信ボタンが含まれるidのフォームがあります。

<div id="placeOrder" 
     style="text-align: right; width: 100%; background-color: white;">
    <button type="submit" 
            class='input_submit' 
            style="margin-right: 15px;" 
            onClick="placeOrder()">Place Order
    </button>
</div>

クリックすると、関数placeOrder()が呼び出されます。この関数は、上記のdivのinnerHTMLを "処理中..."に変更します（送信ボタンはなくなりました）。

上記のコードは機能しますが、問題はフォームを送信できないことです！これをplaceOrder()関数に入れてみました：

document.theForm.submit();

しかし、それはうまくいきません。

フォームを送信するにはどうすればよいですか？

javascript

— ネイト
ソース

3

<form>ページのどこかにタグがあると思います。

— Justin808 2012年

コードに<form>がありません。

— dotoree 2012年

1

どういう意味ですか？この関数は、上記のdivのinnerHTMLを "処理中..."に変更します（送信ボタンはなくなりました）。そのロジックを共有していただけませんか。ちなみに、送信ボタン（name = submitのある場所）がある場合、theform.submit（）関数は機能しません。コードにあるように<form>タグを追加して、質問を明確にしてください。あなたはjsfiddle.netを

— sakhunzai

5

...送信ボタン（name = submitのある場所）がある場合...これで問題が解決しました！<input type = "button" name = "submit" ...でしたが、JavaScriptによるフォームの送信がブロックされています。

— ニコライイワノフ

136

nameフォームの属性をに設定する"theForm"と、コードが機能します。

— アンドリューヘア
ソース

14

これは一部の人には明白に見えるかもしれませんが、名前とIDが「送信」のボタンがありdocument.theForm.submit()、エラーが報告されました。ボタンの名前を変更すると、コードは完全に機能しました。

— ジョナサン

1

@ジョナサンあなたが持っていたボタンの名前は何ですか？Cozは、api.jquery.com / submitに従って、フォームの子要素で、フォームのプロパティと競合する入力名またはIDを使用しないでください。

— keya '13 / 09/13

106

使用できます...

document.getElementById('theForm').submit();

...を置き換えないでくださいinnerHTML。フォームを非表示にしてから挿入することができ、処理... spanします表示され、その場所にします。

var form = document.getElementById('theForm');

form.style.display = 'none';

var processing = document.createElement('span');

processing.appendChild(document.createTextNode('processing ...'));

form.parentNode.insertBefore(processing, form);

— アレックス
ソース

フォームの送信先をどのように伝えるのですか？たとえば、私の場合、コンテンツをメールで送信したい

— CodyBugstein '18

@Imrayサーバーサイドのコードでそれを実行したいと思うでしょう。

— アレックス2014

@CodyBugstein action="/{controller}/{action-method}" method="post"は、投稿しようとしているフォームの属性を設定します。

— Barnes

2

私のフォーム名はprintoffersFormであり、IDも同じです。document.getElementById('printoffersForm').submit();エラーの送信は機能ではありません

— Madhuri Patel

@MadhuriPatel送信ボタンとも呼ばれる送信ボタンがありますか？回答を参照してくださいstackoverflow.com/questions/833032/...

— rbassett

37

私の場合は問題なく動作します。

document.getElementById("form1").submit();

また、関数内で次のように使用できます。

function formSubmit()
{
     document.getElementById("form1").submit();
}

— ちんたん
ソース

これはinputタグからフォーム値を送信しますか？

— シマナッチ2016年

@royはい、入力タグからフォーム値を送信します。

— Chintan Thummar 2016年

2

@ChintanThummarそして、document.getElementById（ "form1"）。onsubmit = function（）{を使用してフォーム送信を処理できます//ここでAjaxコードを使用して、ページを

— 更新

私はそれを試していませんが、私が提供したものよりも打者のように見えます。ありがとう;）

— Chintan Thummar

12

document.forms["name of your form"].submit();

または

document.getElementById("form id").submit();

あなたはこれのどれかを試すことができます。これは間違いなく動作します。

— アルナ
ソース

5

古い投稿ですが、フォームname内でタグを使用せずにフォームを送信する方法をそのままにしておきます。

HTML

<button type="submit" onClick="placeOrder(this.form)">Place Order</button>

JS

function placeOrder(form){
    form.submit();
}

このソリューションが他の誰かを助けることを願っています。TQ

— スカイクラッシャー
ソース

3

HTML

<!-- change id attribute to name  -->

<form method="post" action="yourUrl" name="theForm">
    <button onclick="placeOrder()">Place Order</button>
</form>

JavaScript

function placeOrder () {
    document.theForm.submit()
}

— チャンダングプタ
ソース

4

回答に説明を追加してください。

— サンパダ

これは、すでに与えられている回答の質を向上させるものではありません。

— ランディ

2

フォームにidはないが、theFormのようなクラス名がある場合、以下のステートメントを使用して送信できます。

document.getElementsByClassName("theForm")[0].submit();

— Bimal Jha
ソース

上記と同じクラス名のフォームは他にありますか？

— Jack1987、16年

0

私は、ユーザーがログインしたときと同じ情報を私のウェブサイトに隠されたシンプルなフォームを使用して簡単に解決することを思いつきました。例このフォームにユーザーをログインさせたい場合は、以下のフォームにこのようなものを追加できます。

<input type="checkbox" name="autologin" id="autologin" />

私が知る限り、フォームを非表示にし、リンクをクリックして送信するのは私が最初です。情報付きの非表示フォームを送信するリンクがあります。隠しフォームのパスワードテキスト領域にパスワードを配置してWebサイトで自動ログインする方法が嫌いな場合、100％安全ではありません。

さて、これが仕事です。たとえば$siteid、アカウントと$sitepwパスワードです。

最初にphpスクリプトでフォームを作成し、htmlが嫌いな場合は最小限のデータを使用してから、非表示のフォームの値をエコーします。私はphpの値を使用し、フォームボタンの横にある設定を表示したくない場所にエコーします。

印刷するPHPフォーム

$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
    <input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
    <input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';

PHPおよびフォームを送信するためのリンク

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>

— AgeofTalisman
ソース

フォームを送信する必要がありますが、リンクは申し訳ありませんがコーディングに表示されませんが、onclickまたはhref = javascript：document.getElementById（ 'alt_forum_login'）。submit（）

— AgeofTalisman

問題は、JavaScriptに関するものです

— 。PHP

0

以下のコードを使用して、JavaScriptを使用してフォームを送信できます。

document.getElementById('FormID').submit();

— アビジエ・ナジレ
ソース

-1

<html>
<body>

<p>Enter some text in the fields below, then press the "Submit form" button to submit the form.</p>

<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit form">
</form>

<script>
function myFunction() {
    document.getElementById("myForm").submit();
}
</script>

</body>
</html>

— ジェイ・ナガー
ソース

次回は関連部分と説明のみを含む正解を教えてください。

— Nico Haase

この回答は、一部のstackoverflow.com/a/54619085/7003760

— Mayer Spitzerの