Jak przesłać formularz za pomocą javascript?

190

I have a form with id theForm which has the following div with a submit button inside:

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

When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).

The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:

document.theForm.submit();

But that doesn't work.

How can I get the form to submit?

javascript Nate
źródło

3

Rozumiem, że masz <form>tag gdzieś na swojej stronie.

Justin808

Nie widzę żadnego <form> w kodzie.

dotoree

1

what do you mean by : The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone). and would you mind to share that logic . By the way if you have an submit button (somewhere down with name=submit ) , the theform.submit() function will not work . Please clarify you question by adding <form> tag as you have in your code . You might use jsfiddle.net

sakhunzai

5

... jeśli masz przycisk wysyłania (gdzieś z nazwą = prześlij) ... To rozwiązało mój problem! To było <input type = "button" name = "upload" ..., ale nadal blokuje javascript przed wysłaniem formularza.

Nikolay Ivanov

136

Ustaw nameatrybut formularza na, "theForm"a Twój kod będzie działał.

Andrew Hare
źródło

14

Dla niektórych może się to wydawać bardzo oczywiste, ale miałem przycisk z nazwą i identyfikatorem „prześlij” i document.theForm.submit()zgłosiłem błąd. Po zmianie nazwy przycisku kod działał idealnie.

Jonathan

1

@Jathanathan Jaką nazwę miałeś przycisku? Bo, jak na api.jquery.com/submit elementy potomne formularza nie powinny używać nazw wejściowych lub identyfikatorów, które są sprzeczne z właściwościami formularza.

keya

106

Możesz użyć...

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

... ale nie zastępuj innerHTML. Możesz ukryć formularz, a następnie wstawić przetwarzanie ... span które pojawi się na jego miejscu.

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
źródło

Jak powiedzieć, gdzie wysłać formularz? Na przykład w moim przypadku chcę, aby treść została do mnie przesłana pocztą elektroniczną

CodyBugstein

@Imray Prawdopodobnie będziesz chciał, aby kod po stronie serwera zrobił to za Ciebie.

alex

@CodyBugstein ustawia action="/{controller}/{action-method}" method="post"atrybuty formularza, który próbujesz opublikować.

barnes

2

ponieważ moja nazwa formularza to printoffersForm, podobnie jak identyfikator jest taki sam. document.getElementById('printoffersForm').submit();ale daję mi komunikat, że przesłanie błędu nie jest funkcją

Madhuri Patel

@MadhuriPatel Czy może być tak, że przycisk wysyłania ma również nazwę Prześlij? Zobacz odpowiedź stackoverflow.com/questions/833032/...

rbassett

37

W moim przypadku działa idealnie.

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

Możesz również użyć go w funkcji, jak poniżej:

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

Chintan Thummar
źródło

czy to prześle wartości formularza z inputtagu?

simanacci

@roy Tak, prześle wartości formularza ze znaczników wejściowych.

Chintan Thummar

2

@ChintanThummar, a następnie możesz obsłużyć przesłanie formularza za pomocą document.getElementById ("form1"). Onsubmit = function () {// Możesz użyć kodu Ajax tutaj, aby przesłać formularz // bez odświeżania strony}

Shubham Kumar

Nie próbowałem tego, ale wygląda to na ciasto bardziej niż to, co dostarczyłem. Dzięki;)

Chintan Thummar

12

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

lub

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

Możesz wypróbować dowolną z tych opcji. To na pewno zadziała.

Aruna
źródło

5

Jest to stary post, ale zrezygnuję ze sposobu, w jaki przesyłam formularz bez użycia name tagu wewnątrz formularza:

HTML

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

JS

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

Mam nadzieję, że to rozwiązanie może pomóc komuś innemu. KT

SkyClasher
źródło

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
źródło

4

Dodaj wyjaśnienie do swojej odpowiedzi.

Sampada,

Nie poprawia to jakości udzielonych odpowiedzi.

Randy,

Jest to jedyna odpowiedź, która pokazuje nazwę formularza w rzeczywistym html dla definicji formularza. Ponadto jest to proste i jednoznaczne.

Tim Bird

2

Jeśli twój formularz nie ma żadnego identyfikatora, ale ma nazwę klasy taką jak Formularz, możesz użyć poniższej instrukcji, aby go przesłać:

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

Bimal Jha
źródło

co powiesz na więcej formularzy o tej samej nazwie klasy powyżej?

Jack1987,

0

Wymyśliłem łatwe rozwiązanie za pomocą prostego formularza ukrytego na mojej stronie internetowej z tymi samymi informacjami, z którymi logowali się użytkownicy. Przykład Jeśli chcesz, aby użytkownik był zalogowany w tym formularzu, możesz dodać coś takiego do poniższego formularza.

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

o ile wiem, jestem pierwszą osobą, która ukryła formularz i przesłała go, klikając link. Link zawiera ukryty formularz z informacjami. Nie jest w 100% bezpieczny, jeśli nie lubisz metod automatycznego logowania na swojej stronie z hasłami umieszczonymi w polu tekstowym z ukrytym formularzem ......

Okej, więc oto praca. Powiedzmy, że $siteidto konto i $sitepwhasło.

Najpierw utwórz formularz w skrypcie php, jeśli nie lubisz w nim html, używaj minimalnych danych, a następnie wyświetl wartość w ukrytej formie. Po prostu używam wartości php i echa w dowolnym miejscu, w którym chcę pref obok przycisku formularza, gdy go nie widzisz.

Formularz PHP do wydrukowania

$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 i link do przesłania formularza

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

AgeofTalisman
źródło

To prawda, że musisz przesłać formularz, ale link nie pojawi się w moim kodowaniu, przepraszam, ale zrób onclick lub href = javascript: document.getElementById ('alt_forum_login').

Submit

Pytanie dotyczy javascript, w ogóle nie ma potrzeby korzystania z kodu php

Shedokan

0

możesz użyć poniższego kodu, aby przesłać formularz za pomocą Javascript;

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

Abhijeet Navgire
źródło

-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
źródło

Czy następnym razem możesz podać poprawną odpowiedź, która zawiera tylko odpowiednią część i wyjaśnienie?

Nico Haase

Ta odpowiedź może być pomocna w przypadku niektórych stackoverflow.com/a/54619085/7003760

Mayer Spitzer

Jak przesłać formularz za pomocą javascript?

Odpowiedzi:

HTML

JavaScript