Bagaimana cara mengirimkan formulir menggunakan javascript?

190

Saya memiliki formulir dengan id theFormyang memiliki div berikut dengan tombol kirim di dalam:

<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>

Ketika diklik, fungsinya placeOrder()disebut. Fungsi mengubah innerHTML div di atas menjadi "pemrosesan ..." (jadi tombol kirim sekarang hilang).

Kode di atas berfungsi, tetapi sekarang masalahnya adalah saya tidak bisa mendapatkan formulir untuk dikirimkan! Saya sudah mencoba menempatkan ini dalam placeOrder()fungsi:

document.theForm.submit();

Tapi itu tidak berhasil.

Bagaimana saya bisa mendapatkan formulir untuk dikirimkan?

Nate
sumber
3
Saya rasa Anda memiliki <form>tag di suatu tempat di halaman Anda.
Justin808
Saya tidak melihat <form> dalam kode.
dotoree
1
apa yang Anda maksud dengan: Fungsi mengubah innerHTML div di atas menjadi "pemrosesan ..." (jadi tombol kirim sekarang hilang). dan maukah Anda berbagi logika itu. Omong-omong jika Anda memiliki tombol kirim (di suatu tempat turun dengan nama = kirim), fungsi theform.submit () tidak akan berfungsi. Harap jelaskan pertanyaan Anda dengan menambahkan tag <form> seperti yang Anda miliki dalam kode Anda. Anda dapat menggunakan jsfiddle.net
sakhunzai
5
... jika Anda memiliki tombol kirim (di suatu tempat turun dengan nama = kirim) ... Ini menyelesaikan masalah saya! Itu adalah <input type = "button" name = "submit" ..., tetapi masih memblokir javascript dari pengiriman formulir.
Nikolay Ivanov

Jawaban:

136

Tetapkan nameatribut formulir "theForm"Anda dan kode Anda akan berfungsi.

Andrew Hare
sumber
14
Ini mungkin tampak sangat jelas bagi sebagian orang, tetapi saya memiliki tombol dengan nama dan id "kirim", dan document.theForm.submit()melaporkan kesalahan. Setelah saya mengganti nama tombol saya, kode tersebut bekerja dengan sempurna.
Jonathan
1
@ Jonathan Apa nama tombol yang Anda punya? Karena, sesuai api.jquery.com/submit elemen anak dari sebuah formulir tidak boleh menggunakan nama input atau id yang bertentangan dengan properti dari form.
keya
106

Kamu bisa memakai...

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

... tapi jangan ganti innerHTML. Anda bisa menyembunyikan formulir dan kemudian memasukkan pemrosesan ... span yang akan muncul di tempatnya.

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

form.style.display = 'none';

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

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

form.parentNode.insertBefore(processing, form);
alex
sumber
Bagaimana Anda memberi tahu ke mana harus mengirim formulir? Misalnya, dalam kasus saya, saya ingin konten dikirimkan melalui email kepada saya
CodyBugstein
@Imray Anda mungkin ingin kode sisi server melakukan itu untuk Anda.
alex
@CodyBugstein mengatur action="/{controller}/{action-method}" method="post"atribut bentuk yang Anda coba posting.
barnes
2
karena nama formulir saya adalah printoffersForm dan juga id sama. document.getElementById('printoffersForm').submit();tetapi saya memberi saya kesalahan kirim bukan fungsi
Madhuri Patel
@ MadadhuriPatel Mungkin Anda memiliki tombol kirim juga bernama kirim? Lihat jawaban stackoverflow.com/questions/833032/…
rbassett
37

Ini berfungsi dengan baik dalam kasus saya.

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

Anda juga dapat menggunakannya dalam fungsi seperti di bawah ini:

function formSubmit()
{
     document.getElementById("form1").submit();
} 
Chintan Thummar
sumber
apakah ini akan mengirimkan nilai formulir dari inputtag?
simanacci
@ Ya, itu akan mengirimkan nilai formulir dari tag input.
Chintan Thummar
2
@ChintanThummar dan kemudian Anda dapat menangani Formulir kirim menggunakan document.getElementById ("form1"). Onsubmit = function () {// Anda dapat menggunakan Kode Ajax di sini untuk mengirimkan formulir // tanpa menyegarkan halaman}
Shubham Kumar
Saya belum mencoba itu tetapi terlihat lebih baik daripada apa yang saya berikan. Terima kasih;)
Chintan Thummar
12
document.forms["name of your form"].submit();

atau

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

Anda dapat mencoba semua ini .. ini pasti akan berhasil ..

Aruna
sumber
5

Itu adalah posting lama tapi saya akan meninggalkan cara yang saya lakukan untuk mengirimkan formulir tanpa menggunakan nametag di dalam formulir:

HTML

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

JS

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

Semoga solusi ini dapat membantu orang lain. TQ

SkyClasher
sumber
4

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()
}
Chandan Gupta
sumber
4
Silakan tambahkan beberapa penjelasan untuk jawaban Anda.
Sampada
Ini tidak meningkatkan kualitas jawaban yang sudah diberikan.
Randy
Ini satu-satunya jawaban yang menunjukkan nama formulir di html aktual untuk definisi formulir. Juga sederhana dan mudah.
Tim Bird
2

Jika formulir Anda tidak memiliki id tetapi memiliki nama kelas seperti theForm, Anda dapat menggunakan pernyataan di bawah ini untuk mengirimkannya:

document.getElementsByClassName("theForm")[0].submit();
Bimal Jha
sumber
bagaimana dengan lebih banyak formulir dengan nama kelas yang sama di atas?
Jack1987
0

Saya menemukan solusi mudah menggunakan formulir sederhana yang disembunyikan di situs web saya dengan info yang sama dengan yang digunakan pengguna. Contoh Jika Anda ingin pengguna untuk login pada formulir ini, Anda dapat menambahkan sesuatu seperti ini ke formulir ikuti di bawah ini.

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

sejauh yang saya tahu saya adalah orang pertama yang menyembunyikan formulir dan mengirimkannya melalui mengklik tautan. Ada tautan yang mengirimkan formulir tersembunyi dengan informasi tersebut. Tidak 100% aman jika Anda tidak menyukai metode masuk otomatis di situs web Anda dengan kata sandi yang berada di area teks kata sandi formulir tersembunyi ......

Oke jadi ini pekerjaannya. Katakanlah $siteidadalah akun dan $sitepwkata sandi.

Pertama buat formulir dalam skrip php Anda jika Anda tidak suka html di dalamnya menggunakan data minimal kemudian gema dalam nilai dalam bentuk tersembunyi. Saya hanya menggunakan nilai php dan gema di mana saja saya ingin pref di sebelah tombol form karena Anda tidak bisa melihatnya.

Formulir PHP untuk dicetak

$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 dan Tautan untuk mengirimkan formulir

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>
AgeofTalisman
sumber
Benar Anda perlu mengirimkan formulir tetapi tautan tidak akan muncul dalam pengkodean saya, maaf, tetapi buatlah klik atau href = javascript: document.getElementById ('alt_forum_login'). Submit ()
AgeofTalisman
Pertanyaannya adalah tentang javascript, tidak perlu kode php sama sekali
Shedokan
0

Anda dapat menggunakan kode di bawah ini untuk mengirimkan formulir menggunakan Javascript;

document.getElementById('FormID').submit();
Abhijeet Navgire
sumber
-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>
Jay Nagar
sumber
Bisakah Anda membagikan jawaban yang tepat yang hanya berisi bagian yang relevan dan beberapa penjelasan di waktu berikutnya?
Nico Haase
Jawaban ini mungkin bermanfaat untuk beberapa stackoverflow.com/a/54619085/7003760
Mayer Spitzer