validacion - validar formulario javascript antes de enviar

¿Cómo enviar un formulario usando javascript?

Question

Tengo un formulario con id theForm que tiene el siguiente div con un botón de enviar 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>

Cuando se hace clic, se llama a la función placeOrder() . La función cambia el innerHTML del div anterior para que sea "processing ..." (así que el botón de enviar ya no está).

El código anterior funciona, pero ahora el problema es que no puedo enviar el formulario. Intenté poner esto en la función placeOrder() :

document.theForm.submit();

Pero eso no funciona.

¿Cómo puedo obtener el formulario para enviar?

Answer 1

Es una publicación anterior pero me iré de la misma manera que lo hago para enviar el formulario sin usar la etiqueta de name dentro del formulario:

HTML

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

JS

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

Espero que esta solución pueda ayudar a otra persona. TQ

Answer 2

Es una publicación anterior, pero me iré de la manera en que lo hago:

//Html side. 
//Table is styled to have previous btn on left and next on right botton
<form method="post" action="#">
<table style=''width:50% ;height:50%;border: 3px solid #00BABF;'' align=''center''>
...

 <tr id="trButton" >
   <td id="tdBefore" colspan=''4''>
     <input id="btnPrev" class=''btn_submit'' type="submit" name="submitPrevious" value="Previous"  disabled style="float: left;">
     <input id="btnNext" class=''btn_submit'' type="submit" name="submitNext" value="Next"disabled style="float: right;">
   </td>                    
 </tr>
</table>
</form>

//Js side
$(''.btn_submit'').on( ''click'', function() {        
    var objEvent=$(this);
    if(objEvent.attr(''name'')===''submitNext''){                            
         $(''form'').attr(''action'',''stepNext.php'');//Use $(''#formId'')... if is there more than one                                
    }
    else if(objEvent.attr(''name'')===''submitPrevious''){
         $(''form'').attr(''action'',''stepPreviuos.php'');
    }
    return true;            
}); //End of $(''.btn_submit'').on( ''click'', func ....

Este código funciona bien para mí.

Answer 3

Establezca el atributo de name de su formulario en "theForm" y su código funcionará.

Answer 4

He encontrado una solución fácil usando un formulario simple oculto en mi sitio web con la misma información con la que los usuarios iniciaron sesión. Ejemplo Si desea que un usuario inicie sesión en este formulario, puede agregar algo como esto al siguiente formulario a continuación.

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

Hasta donde sé, soy el primero en ocultar un formulario y enviarlo haciendo clic en un enlace. Existe el enlace que envía un formulario oculto con la información. No es 100% seguro si no le gustan los métodos de inicio de sesión automático en su sitio web con contraseñas ubicadas en un área de texto de contraseña oculta.

De acuerdo, aquí está el trabajo. Digamos $siteid es la cuenta y $sitepw es contraseña.

Primero haga la forma en su script php si no le gusta html en ella use datos mínimos y repita el valor en forma oculta. Solo uso un valor de php y echo en cualquier lugar que prefiera junto al botón de formulario, ya que no puedes verlo.

PHP Formulario 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 y enlace para enviar formulario

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

Answer 5

Puedes usar...

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

... pero no reemplaces el innerHTML . Puede ocultar el formulario e insertar un span procesamiento ... que aparecerá en su 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);

Answer 6

Si su formulario no tiene una identificación, pero tiene un nombre de clase como theForm, puede usar la declaración siguiente para enviarla:

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

Answer 7

puede usar el siguiente código para enviar el formulario usando Javascript;

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

Answer 8

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

Answer 9

//Take form name as "theForm"
//Example:   
         ## ----Html code----- ##    
      <form method="post" action="" name="theForm">
            <button onclick="placeOrder()">Place Order</button>
      </form>

            ## -------javascript code------ ##

        function placeOrder(){
        document.theForm.action="yourUrl";
        document.theForm.submit();
        }

Answer 10

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

o

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

Puedes probar algo de esto ... esto definitivamente funcionará ...

Answer 11

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

Funciona perfecto en mi caso.

puedes usarlo en la función también como,

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