¿Cómo puedo enviar una variable a un formulario usando esta función de JavaScript?

Question

Tengo esta llamada onclick:

onClick="mySubmit(); 

el que llama a esta función:

function mySubmit(){ 
    document.getElementById("myForm").submit(); 
} 

que luego se somete este formulario:

<form id="myForm" action="action.php" method="post"> 

Mi pregunta es: ¿cómo dicen Envío una variable al formulario desde onClick para obtener algo como <form id="myForm" action="action.php?id=**(the variable sent from the onclick goes here)**" method="post">

Gracias!

Answer 1

La manera más fácil: anexar un campo oculto al formulario.

<form id="myForm" action="action.php" method="post"> 
    <input type='hidden' id= 'hiddenField' name='id' value='' /> 

<script> 
    function mySubmit() { 
    document.getElementById('hiddenField').value = "Whatever I want here"; 
    document.getElementById("myForm").submit(); 
    } 
</script> 

O utilizar una función como

function addHiddenField(form, props) { 
 
    Object.keys(props).forEach(fieldName => { 
 
    var field = form[fieldName]; 
 
    if (!field) { 
 
     field = document.createElement('input'); 
 
     field.type = 'hidden'; 
 
     field.name = fieldName; 
 
     form.appendChild(field); 
 
    } 
 
    field.value = props[fieldName]; 
 
    }); 
 
} 
 

 
document.querySelector('form').addEventListener('submit',() => { 
 
    addHiddenField(this, { 
 
    someQueryName: 'someQueryValue', 
 
    otherQueryName: 'otherVal' 
 
    }); 
 
});

<form> 
 
    Name 
 
    <input name=name /> 
 
    <input type=submit /> 
 
</form>

Tenga en cuenta que puede utilizar DevTools de modificar el entorno limitado del iframe para que pueda presentar sus formas y se puede comprobar la dirección URL publicado. sandbox="... allow-forms"

Answer 2

lugar un tipo de entrada oculta en el interior del formulario y luego enviar el formulario

<input id="id" name="id" type="hidden" /> 

ajustar el valor del campo oculto en su Javascript a enviar()

document.getElementById('id').value = **; 

pero estableciendo form method = "publicar" la identificación no será la parte de la cadena de consulta, es decir, la url seguirá siendo action.php en su lugar si realmente quiere la identificación en la cadena de consulta, es decir, url action.php? id = **, entonces necesita cambiar la forma método = "Get", por esto el Identificación del campo oculto será automáticamente parte de la url es decir accion.php? Id = **

leer sobre difference between get and post

here is how you access posted value on next page si realmente necesita usar method = "post" action = "accion.php"

Answer 3

Su HTML:

<form id="myForm" action="#" method="post"> 
      <input type='hidden' id="id" name='id' value='123' /> 
      <input type='submit' name='submit' value='Click me !' onclick='addParam()' /> 
     </form> 

Su Guión:

function addParam() { 

       var url = "action.php?id=" + document.getElementById('id').value; 
       document.getElementById("myForm").setAttribute('action', url); 

      } 

Gracias.