Làm cách nào để gửi biểu mẫu bằng javascript?

190

Tôi có một biểu mẫu với id theFormcó div sau với nút gửi bên trong:

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

Khi bấm vào, chức năng placeOrder()được gọi. Hàm thay đổi bên trongHTML của div ở trên thành "đang xử lý ..." (vì vậy nút gửi bây giờ không còn nữa).

Đoạn mã trên hoạt động, nhưng bây giờ vấn đề là tôi không thể lấy mẫu để gửi! Tôi đã thử đặt placeOrder()chức năng này vào chức năng:

document.theForm.submit();

Nhưng điều đó không hiệu quả.

Làm thế nào tôi có thể nhận được mẫu đơn để gửi?

javascript

— Nate
nguồn

3

Tôi mang nó bạn có một <form>thẻ ở đâu đó trên trang của bạn.

— Justin808

Tôi không thấy bất kỳ <form> nào trong mã.

— dotoree

1

Ý bạn là gì: Hàm thay đổi bên trongHTML của div ở trên thành "đang xử lý ..." (vì vậy nút gửi bây giờ không còn nữa). và bạn có muốn chia sẻ logic đó. Nhân tiện, nếu bạn có nút gửi (ở đâu đó có tên = submit), hàm theform.submit () sẽ không hoạt động. Vui lòng làm rõ câu hỏi của bạn bằng cách thêm thẻ <form> như bạn có trong mã của mình. Bạn có thể sử dụng jsfiddle.net

— sakhunzai

5

... nếu bạn có nút gửi (ở đâu đó có tên = submit) ... Điều này đã giải quyết vấn đề của tôi! Đó là <input type = "button" name = "submit" ..., nhưng vẫn chặn javascript gửi biểu mẫu.

— Nikolay Ivanov

136

Đặt namethuộc tính của biểu mẫu "theForm"của bạn và mã của bạn sẽ hoạt động.

— Andrew Hare
nguồn

14

Điều này có vẻ siêu rõ ràng đối với một số người, nhưng tôi đã có một nút với tên và id "gửi", và document.theForm.submit()đã báo cáo một lỗi. Khi tôi đổi tên nút của mình, mã hoạt động hoàn hảo.

— Jonathan

1

@Jonathan Tên nút bạn có là gì? Coz, theo api.jquery.com/submit các phần tử con của biểu mẫu không được sử dụng tên hoặc id đầu vào mâu thuẫn với các thuộc tính của biểu mẫu.

— keya

106

Bạn có thể dùng...

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

... nhưng không thay thế innerHTML. Bạn có thể ẩn biểu mẫu và sau đó chèn một xử lý ... span sẽ xuất hiện ở vị trí của nó.

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
nguồn

Làm thế nào để bạn nói với nó nơi gửi mẫu đơn? Ví dụ: trong trường hợp của tôi, tôi muốn nội dung được gửi qua email cho tôi

— CodyBugstein

@Imray Bạn có thể muốn mã phía máy chủ làm điều đó cho bạn.

— alex

@CodyBugstein đặt action="/{controller}/{action-method}" method="post"thuộc tính của biểu mẫu bạn đang cố gắng đăng.

— barnes

2

như tên biểu mẫu của tôi là printoffersForm cũng như id là như nhau. document.getElementById('printoffersForm').submit();nhưng tôi cho tôi gửi lỗi không phải là một chức năng

— Madhuri Patel

@MadhuriPatel Bạn có thể có nút gửi của bạn cũng được đặt tên gửi không? Xem câu trả lời stackoverflow.com/questions/833032/

— Mạnh

37

Nó hoạt động hoàn hảo trong trường hợp của tôi.

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

Ngoài ra, bạn có thể sử dụng nó trong chức năng như dưới đây:

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

— Chintan Thummar
nguồn

điều này sẽ gửi giá trị biểu mẫu từ một inputthẻ?

— simanacci

@roy Có, nó sẽ gửi giá trị biểu mẫu từ các thẻ đầu vào.

— Chintan Thummar

2

@ChintanThummar và sau đó bạn có thể xử lý gửi biểu mẫu . Sử dụng document.getElementById ( "Form1") onsubmit = function () {// Bạn có thể sử dụng Mã Ajax vào đây để gửi biểu mẫu // mà không làm mới trang}

— Shubham Kumar

Tôi đã không thử điều đó nhưng nó trông có vẻ vùi dập hơn những gì tôi đã cung cấp. Cảm ơn;)

— Chintan Thummar

12

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

hoặc là

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

Bạn có thể thử bất kỳ thứ gì trong số này .. điều này chắc chắn sẽ hoạt động ..

— Aruna
nguồn

5

Đây là một bài viết cũ nhưng tôi sẽ rời khỏi cách tôi làm để gửi biểu mẫu mà không sử dụng namethẻ bên trong biểu mẫu:

HTML

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

Mã não

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

Hy vọng giải pháp này có thể giúp đỡ người khác. TQ

— SkyClasher
nguồn

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()
}

— Chandan Gupta
nguồn

4

Vui lòng thêm một số lời giải thích cho câu trả lời của bạn.

— Sampada

Điều này không cải thiện chất lượng của các câu trả lời đã được đưa ra.

— Randy

2

Nếu biểu mẫu của bạn không có bất kỳ id nào nhưng nó có tên lớp như theForm, bạn có thể sử dụng câu lệnh dưới đây để gửi nó:

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

— Bimal Jha
nguồn

Điều gì về có nhiều hình thức với cùng tên lớp ở trên?

— Jack1987

0

Tôi đã đưa ra một giải pháp dễ dàng bằng cách sử dụng một hình thức đơn giản được ẩn trên trang web của tôi với cùng thông tin mà người dùng đã đăng nhập. Ví dụ Nếu bạn muốn người dùng đăng nhập vào biểu mẫu này, bạn có thể thêm một cái gì đó như thế này vào mẫu dưới đây.

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

cho đến nay tôi biết tôi là người đầu tiên ẩn biểu mẫu và gửi nó thông qua nhấp vào liên kết. Có liên kết gửi một hình thức ẩn với thông tin. Không an toàn 100% nếu bạn không thích các phương thức đăng nhập tự động trên trang web của mình với mật khẩu nằm trên một vùng văn bản mật khẩu dạng ẩn ......

Được rồi, đây là công việc. Hãy nói $siteidlà tài khoản và $sitepwlà mật khẩu.

Trước tiên hãy tạo biểu mẫu trong tập lệnh php của bạn nếu bạn không thích html trong đó sử dụng dữ liệu tối thiểu sau đó lặp lại giá trị ở dạng ẩn. Tôi chỉ sử dụng một giá trị php và echo ở bất cứ đâu tôi muốn pref bên cạnh nút biểu mẫu vì bạn không thể nhìn thấy nó.

Mẫu PHP để in

$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 và Liên kết để gửi biểu mẫu

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

— AgeofTalisman
nguồn

Đúng bạn cần phải gửi mẫu nhưng liên kết wont xuất hiện trong tôi mã hóa xin lỗi nhưng chắc a onclick hoặc href = javascript: document.getElementById ( 'alt_forum_login') nộp ().

— AgeofTalisman

Câu hỏi là về javascript, hoàn toàn không cần mã php

— Shedokan

0

bạn có thể sử dụng mã dưới đây để gửi biểu mẫu bằng Javascript;

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

— Abhijeet Navgire
nguồn

-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
nguồn

Bạn có thể chia sẻ một câu trả lời thích hợp chỉ chứa phần có liên quan và một số giải thích vào lần tiếp theo không?

— Nico Haase

Câu trả lời này có thể hữu ích cho một số stackoverflow.com/a/54619085/7003760

— Mayer Spitzer