จะส่งแบบฟอร์มโดยใช้จาวาสคริปต์ได้อย่างไร

190

ฉันมีแบบฟอร์มที่มีรหัสtheFormซึ่งมี div ต่อไปนี้พร้อมปุ่มส่งภายใน:

<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()จะถูกเรียกใช้ ฟังก์ชั่นเปลี่ยน InnerHTML ของ div ข้างต้นเป็น "กำลังประมวลผล ... " (ดังนั้นตอนนี้ปุ่มส่งจะหายไป)

รหัสข้างต้นใช้งานได้ แต่ตอนนี้ปัญหาคือฉันไม่สามารถส่งแบบฟอร์มได้! ฉันได้ลองใส่ในplaceOrder()ฟังก์ชัน:

document.theForm.submit();

แต่นั่นไม่ได้ผล

ฉันจะรับแบบฟอร์มการส่งได้อย่างไร

javascript

— เนท
แหล่งที่มา

3

ฉันคิดว่าคุณมี<form>แท็กบางแห่งบนหน้าของคุณ

— Justin808

ฉันไม่เห็น <form> ในโค้ด

— dotoree

1

คุณหมายถึงอะไร: ฟังก์ชั่นเปลี่ยน InnerHTML ของ div ข้างต้นเป็น "กำลังประมวลผล ... " (ดังนั้นตอนนี้ปุ่มส่งจะหายไป) และคุณอยากแบ่งปันตรรกะนั้นไหม โดยวิธีถ้าคุณมีปุ่มส่ง (บางแห่งมีชื่อ = ส่ง), theform.submit () ฟังก์ชั่นจะไม่ทำงาน โปรดชี้แจงคำถามของคุณโดยเพิ่มแท็ก <form> ตามที่คุณมีในรหัสของคุณ คุณอาจใช้jsfiddle.net

— sakhunzai

5

... หากคุณมีปุ่มส่ง (บางแห่งมีชื่อ = ส่ง) ... นี่ช่วยแก้ปัญหาของฉันได้! มันคือ <input type = "button" name = "submit" ... แต่ยังปิดกั้นจาวาสคริปต์ไม่ให้ส่งแบบฟอร์ม

— Nikolay Ivanov

136

กำหนดnameคุณลักษณะของแบบฟอร์มของคุณเป็น"theForm"และรหัสของคุณจะทำงาน

— Andrew Hare
แหล่งที่มา

14

สิ่งนี้อาจดูชัดเจนสำหรับบางคน แต่ฉันมีปุ่มที่มีชื่อและรหัส "ส่ง" และdocument.theForm.submit()รายงานข้อผิดพลาด เมื่อฉันเปลี่ยนชื่อปุ่มรหัสก็ทำงานได้อย่างสมบูรณ์

— โจนาธาน

1

@Jonathan คุณมีชื่อปุ่มอะไร? เพราะตามapi.jquery.com/submitองค์ประกอบลูกของฟอร์มไม่ควรใช้ชื่ออินพุตหรือรหัสที่ขัดแย้งกับคุณสมบัติของฟอร์ม

— keya

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

@Imray คุณอาจต้องการให้รหัสฝั่งเซิร์ฟเวอร์ทำเพื่อคุณ

— alex

@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แท็กหรือไม่

— simanacci

@roy ใช่มันจะส่งค่าแบบฟอร์มจากแท็กอินพุต

— Chintan Thummar

2

@ChintanThummar จากนั้นคุณสามารถจัดการกับแบบฟอร์มการส่งโดยใช้ document.getElementById ("form1") onsubmit = function () {// คุณสามารถใช้รหัส Ajax ที่นี่เพื่อส่งแบบฟอร์ม // โดยไม่มีหน้ารีเฟรช}

— Shubham Kumar

ฉันไม่ได้ลองเลย แต่มันก็ดูดีกว่าที่ฉันให้ไว้ ขอบคุณ;)

— Chintan Thummar

12

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

หรือ

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

คุณสามารถลองสิ่งใดสิ่งหนึ่ง .. สิ่งนี้จะทำงานได้อย่างแน่นอน ..

— Aruna
แหล่งที่มา

5

มันเป็นโพสต์เก่า แต่ฉันจะปล่อยให้ฉันทำเพื่อส่งแบบฟอร์มโดยไม่ต้องใช้nameแท็กในแบบฟอร์ม:

HTML

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

JS

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

หวังว่าโซลูชันนี้จะช่วยคนอื่นได้ ขอบคุณ

— SkyClasher
แหล่งที่มา

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
แหล่งที่มา

4

โปรดเพิ่มคำอธิบายลงในคำตอบของคุณ

— Sampada

สิ่งนี้ไม่ได้ปรับปรุงคุณภาพของคำตอบที่ได้รับไปแล้ว

— แรนดี้

มันเป็นคำตอบเดียวที่แสดงชื่อแบบฟอร์มใน html จริงสำหรับคำจำกัดความของแบบฟอร์ม นอกจากนี้ยังง่ายและตรงไปตรงมา

— ทิมเบิร์ด

2

หากแบบฟอร์มของคุณไม่มี id ใด ๆ แต่มีชื่อคลาสเช่นแบบฟอร์มคุณสามารถใช้คำสั่งด้านล่างเพื่อส่ง:

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

— Bimal Jha
แหล่งที่มา

มีรูปแบบอะไรอีกบ้างที่มีชื่อคลาสเดียวกันข้างบน

— Jack1987

0

ฉันแก้ไขด้วยวิธีง่าย ๆ โดยใช้รูปแบบเรียบง่ายที่ซ่อนอยู่ในเว็บไซต์ของฉันด้วยข้อมูลเดียวกับที่ผู้ใช้ลงชื่อเข้าใช้ ตัวอย่างหากคุณต้องการให้ผู้ใช้เข้าสู่ระบบในแบบฟอร์มนี้คุณสามารถเพิ่มสิ่งนี้ในแบบฟอร์มด้านล่าง

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

เท่าที่ฉันรู้ว่าฉันเป็นคนแรกที่ซ่อนฟอร์มและส่งผ่านการคลิกที่ลิงก์ มีลิงค์ส่งแบบฟอร์มที่ซ่อนพร้อมข้อมูล ไม่ปลอดภัย 100% ถ้าคุณไม่ชอบวิธีการลงชื่อเข้าใช้อัตโนมัติในเว็บไซต์ของคุณโดยใช้รหัสผ่านที่ซ่อนอยู่ในพื้นที่ข้อความรหัสผ่านที่ซ่อนอยู่ ......

โอเคนี่คืองาน ให้บอกว่า$siteidเป็นบัญชีและ$sitepwเป็นรหัสผ่าน

ก่อนอื่นให้สร้างแบบฟอร์มในสคริปต์ php ของคุณหากคุณไม่ชอบ html ในรูปแบบนั้นใช้ข้อมูลน้อยที่สุดจากนั้นแสดงค่าในแบบฟอร์มที่ซ่อน ฉันแค่ใช้ค่า php และ echo ในทุกที่ที่ฉันต้องการ pref ถัดจากปุ่มรูปแบบที่คุณไม่เห็น

PHP Form ที่จะทำการพิมพ์

$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 และ Link เพื่อส่งแบบฟอร์ม

<?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') ส่ง ()

— AgeofTalisman เมื่อ

คำถามคือเกี่ยวกับ javascript, ไม่ต้องมีการโค้ด PHP ที่ไม่ทั้งหมด

— Shedokan

0

คุณสามารถใช้โค้ดด้านล่างเพื่อส่งแบบฟอร์มโดยใช้ Javascript

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

— Abhijeet Navgire
แหล่งที่มา

-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