36

この件に関して行った検索に基づいて、いくつかの異なる方法で試しましたが、何らかの理由で機能しません。送信ボタンを押した後、テキスト入力とテキストエリアをクリアしたいだけです。

これがコードです。

<div id="sidebar-info">
    <form name="contact-form" action="formprocess.php" method="post" target="ninja-frame">
        <h1>By Phone</h1>
        <p id="by-phone">XXX-XXX-XXXX</p>
        <h1>By Email</h1>
        <p id="form-row">Name</p>
        <input name="name" id="name" type="text" class="user-input" value="">
        <p id="form-row">Email</p>
        <input name="email" id="email" type="text" class="user-input" value="">
        <p id="form-row">Message</p>
        <textarea name="message" id="message" class="user-input" rows="10" maxlength="1500"></textarea>
        <p>*Please fill out every field</p>
        <input type="submit" value="Submit" id="submit" onclick="submitForm()">

        <script>
            function submitForm() {
            document.contact-form.submit();
            document.contact-form.reset();
            }
        </script>
    </form>
</div>
4

11 に答える 11

50

ボタンが type であるため、フォームは既に送信されていますsubmit。ほとんどのブラウザーでは、ページで JavaScript を実行するのではなく、フォームの送信とサーバーの応答の読み込みが行われます。

送信ボタンのタイプを に変更しますbutton。また、このボタンには id が与えられているsubmitため、Javascript の送信機能と競合します。このボタンの ID を変更します。次のようなものを試してください

<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">

この場合のもう 1 つの問題は、フォームの名前に-ダッシュが含まれていることです。ただし、Javascript-はマイナスに変換されます。

配列ベースの表記を使用するか、document.getElementById()/を使用する必要がありますdocument.getElementsByName()。このgetElementById()関数は、ID が一意であるため、要素インスタンスを直接返します (ただし、ID を設定する必要があります)。は、同じ名前を持つ値のgetElementsByName()配列を返します。この例では、ID を設定していないため、getElementsByNameインデックス 0 を使用できます。

以下を試してください

function submitForm() {
   // Get the first form with the name
   // Usually the form name is not repeated
   // but duplicate names are possible in HTML
   // Therefore to work around the issue, enforce the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit the form
   frm.reset();  // Reset all form data
   return false; // Prevent page refresh
}
于 2013-01-29T18:00:57.833 に答える
4

これを試すことができます：

function submitForm() {
  $('form[name="contact-form"]').submit();
  $('input[type="text"], textarea').val('');
}

このスクリプトは、jquery をページに追加する必要があります。

于 2013-01-29T18:01:01.657 に答える
3

最も簡単な方法は、フォーム要素の値を設定することです。jQueryを使用している場合（これを強くお勧めします）、これを簡単に行うことができます

$('#element-id').val('')

フォーム内のすべての入力要素に対して、これは機能する可能性があります（試したことはありません）

$('#form-id').children('input').val('')

.children は 1 レベル下の入力要素のみを検索することに注意してください。孫などを見つける必要がある場合は、 .find() が機能するはずです。

もっと良い方法があるかもしれませんが、これでうまくいくはずです。

于 2013-01-29T18:01:14.477 に答える
2 
$('#contact-form input[type="text"]').val('');
$('#contact-form textarea').val('');
于 2013-01-29T18:01:14.980 に答える
1

MDNHTMLFormElement.prototype.resetに従って使用できます

document.getElementById("myForm").reset();
于 2020-12-21T23:06:06.887 に答える