Como enviar um formulário usando javascript?

190

Eu tenho um formulário com id theFormque tem a seguinte div com um botão de envio dentro:

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

Quando clicada, a função placeOrder()é chamada. A função altera o innerHTML da div acima para "processando ..." (para que o botão enviar agora se foi).

O código acima funciona, mas agora o problema é que não consigo enviar o formulário! Eu tentei colocar isso na placeOrder()função:

document.theForm.submit();

Mas isso não funciona.

Como posso enviar o formulário?

javascript

— Nate
fonte

3

Suponho que você tenha uma <form>tag em algum lugar da sua página.

— Justin808

Não vejo nenhum <form> no código.

— dotoree

1

o que você quer dizer com: A função altera o innerHTML da div acima para "processando ..." (para que o botão enviar agora se apague). e você se importaria de compartilhar essa lógica. A propósito, se você tiver um botão de envio (em algum lugar abaixo de name = submit), a função theform.submit () não funcionará. Esclareça sua pergunta adicionando a tag <form> como você possui em seu código. Você pode usar jsfiddle.net

— sakhunzai

5

... se você tiver um botão de envio (em algum lugar abaixo de name = submit) ... Isso resolveu meu problema! Era <input type = "button" name = "submit" ..., mas ainda impedia o javascript de enviar o formulário.

— Nikolay Ivanov

136

Defina o nameatributo do seu formulário como "theForm"e seu código funcionará.

— Andrew Hare
fonte

14

Isso pode parecer super óbvio para alguns, mas eu tinha um botão com o nome e o ID "enviar" e document.theForm.submit()relatei um erro. Depois de renomear meu botão, o código funcionou perfeitamente.

— 9137 Jonathan

1

@ Jonathan Qual é o nome do botão que você tinha? Porque, de acordo com api.jquery.com/submit, os elementos filho de um formulário não devem usar nomes ou IDs de entrada que entrem em conflito com as propriedades de um formulário.

— Key13

106

Você pode usar...

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

... mas não substitua o innerHTML. Você pode ocultar o formulário e depois inserir um processamento ... span que aparecerá em seu lugar.

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
fonte

Como você diz para onde enviar o formulário? Por exemplo, no meu caso, eu quero o conteúdo enviado por email para mim

— CodyBugstein

@Irmay Você provavelmente desejará que o código do servidor faça isso por você.

— alex

O @CodyBugstein define action="/{controller}/{action-method}" method="post"atributos do formulário que você está tentando postar.

— 27517 barnes

2

como o nome do meu formulário é printoffersForm e id é o mesmo. document.getElementById('printoffersForm').submit();mas eu dá-me erro enviar não é uma função

— Madhuri Patel

@MadhuriPatel Você poderia ter seu botão de envio também chamado de envio? Veja resposta stackoverflow.com/questions/833032/…

— rbassett

37

Funciona perfeitamente no meu caso.

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

Além disso, você pode usá-lo na função como abaixo:

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

— Chintan Thummar
fonte

isso enviará valores de formulário de uma inputtag?

— simanacci

@roy Sim, ele enviará valores de formulário a partir de tags de entrada.

— Chintan Thummar

2

@ChintanThummar e, em seguida, você pode manipular o envio do formulário usando document.getElementById ("form1"). Onsubmit = function () {// Você pode usar o Código Ajax aqui para enviar o formulário // sem atualizar a página}

— Shubham Kumar

Eu não tentei isso, mas parece mal do que o que eu tinha fornecido. Obrigado;)

— Chintan Thummar

12

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

ou

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

Você pode tentar qualquer coisa .. isso definitivamente funcionará ..

— Aruna
fonte

5

É um post antigo, mas vou deixar como faço para enviar o formulário sem usar a nametag dentro do formulário:

HTML

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

JS

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

Espero que esta solução possa ajudar outra pessoa. TQ

— SkyClasher
fonte

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
fonte

4

Por favor, adicione algumas explicações à sua resposta.

— Sampada

Isso não melhora a qualidade das respostas que já foram dadas.

— Randy

2

Se o seu formulário não tiver nenhum ID, mas tiver um nome de classe como o formulário, use a instrução abaixo para enviá-lo:

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

— Bimal Jha
fonte

que tal mais formulários com o mesmo nome de classe acima?

— precisa saber é o seguinte

0

Eu resolvi facilmente usando um formulário simples oculto no meu site com as mesmas informações com as quais os usuários efetuaram login. Exemplo Se você deseja que um usuário efetue login neste formulário, você pode adicionar algo assim ao seguinte formulário abaixo.

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

Até onde eu sei, sou o primeiro a ocultar um formulário e enviá-lo clicando em um link. Existe o link que envia um formulário oculto com as informações. Não é 100% seguro se você não gosta de métodos de login automático em seu site com senhas em uma área de texto de senha de formulário oculto ......

Ok, então aqui está o trabalho. Vamos dizer que $siteidé a conta e $sitepwé a senha.

Primeiro faça o formulário no seu script php, se você não gosta de html nele, use dados mínimos e depois ecoe o valor em um formulário oculto. Eu apenas uso um valor php e eco em qualquer lugar que eu quero pref próximo ao botão do formulário como você não pode vê-lo.

Formulário PHP para imprimir

$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 e Link para enviar o formulário

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

— AgeofTalisman
fonte

Verdade que você precisa enviar o formulário, mas o link não aparecerá na minha codificação desculpe, mas fazer um onclick ou href = javascript: document.getElementById ( 'alt_forum_login') submit ().

— AgeofTalisman

A pergunta é sobre javascript, não há nenhuma necessidade para o código PHP em tudo

— Shedokan

0

você pode usar o código abaixo para enviar o formulário usando Javascript;

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

— Abhijeet Navgire
fonte

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

Você pode compartilhar uma resposta adequada que contenha apenas a parte relevante e algumas explicações da próxima vez?

— Nico Haase

Esta resposta pode ser útil para alguns stackoverflow.com/a/54619085/7003760 #

— Mayer Spitzer