¿Cómo pueden 2 formularios HTML compartir 1 campo oculto?

Question

Tengo una página con 2 formularios y un campo oculto que está fuera de ambos formularios.

¿Cómo se puede enviar el campo oculto con cualquiera de los formularios?

Pensé en hacer algo como esto con jQuery:

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            // do something to move or copy the
            // hidden field to the submitting form
        });
    });
</script>

¿Funcionará esto? ¿Alguna otra idea?

EDITAR

El campo oculto almacena un gráfico de objetos serializados que no cambia. Ambos métodos de servidor requieren el objeto. La cadena de objetos serializados puede ser bastante pesada, por lo que no quiero que esto se envíe desde el servidor 2 veces.

Answer 1

Simplemente puede inyectar una copia del elemento en cada formulario justo antes de enviarlo. De esta manera, puede tener la opción de tener información diferente para cada campo de formulario oculto sin afectar al otro.

---

Algo como esto:

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $("#hidden_element").clone().appendTo(this);
        });
    });
</script>

Si desea usar exactamente el mismo elemento para ambos formularios sin crear una copia nueva, simplemente no use clone()

---

Consulte la documentación para clone () y para appendTo ()

EDITAR:

Si no desea enviar el elemento oculto con cada solicitud que envía el formulario. Considere almacenarlo en la base de datos de ese usuario para ese momento. Puede enviar su contenido una vez, y solo una vez por cada recarga de página, y luego simplemente enviar la identificación de la base de datos del elemento oculto con cada publicación de formulario.

Al cargar la página, algo como esto:

$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
  $("#hiddenfield").val(insertedID);
});

Luego, en el código del lado del servidor:

//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit

De esta manera su js recibe la devolución de llamada.

Ahora, puede enviar el formulario como lo haría, pero esta vez, solo está enviando la identificación (número entero) al servidor. Luego, simplemente puede eliminar el objeto de su servidor (ejecute un cron para hacerlo después de X cantidad de tiempo o envíe otra solicitud para eliminarlo.

Honestamente, sin embargo, a menos que objetes es ENORME (!!), creo que almacenarlo enviándolo solo una vez es mucho más complejo de ejecutar que simplemente enviar dos solicitudes al servidor.

Avíseme si tiene alguna otra pregunta ...

Answer 2

Con HTML5, puede incluir un " form " atributo con un elemento de entrada. El valor del atributo de formulario es la identificación de los formularios a los que pertenece el campo. Para incluir el campo en más de un formulario, incluya todos los identificadores de formulario en una lista delimitada por espacios. Desafortunadamente, el atributo de formulario no es compatible con IE en absoluto (a partir de IE 9). El soporte para FF y Chrome comienza en las versiones 4 y 10 respectivamente.

Answer 3

Agregue el campo a ambos formularios al cargar la página:

$(function() {
    $('#form1, #form2').append($('input[name=fieldName]'));
});

Answer 4

Suponiendo que está haciendo un envío que no es ajax, simplemente puede agregar el campo al formulario que se envía. Sin embargo, si necesita esta información en ambos formularios, no es mejor almacenar este lado del servidor de valor en un almacén de sesión. ¡De esta forma, cualquier cliente que no sea js también funcionará!

 $(function() {
        $('form').submit(function() {
             $('input.yourhiddenSubmit').appendTo(this);
        });
    });

Answer 5

La única forma de pasar la variable al siguiente formulario es tener esa variable en los datos que se pasan cuando se envía el formulario (GET o POST), a menos que desee utilizar AJAX. Suponiendo que desea tener la variable oculta fuera del formulario real para un & "; Buena razón &"; Recomendaría usar jQuery para incluir el campo de entrada oculto en el formulario justo antes del envío, así:

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
            return true;
        });
    });
</script>

Reemplace todas las instancias de " hiddenField " con la ID de su campo oculto fuera del formulario. Esto creará una nueva entrada dentro del formulario justo antes de que se envíe con el valor del campo oculto que está en otra parte de la página.

Más allá de eso, tendrías que ser un poco más específico sobre cuál era tu problema exacto (y por qué el campo no se incluye en el formulario) para que pueda ayudarte.

Tenga en cuenta que el código anterior debería funcionar en teoría, pero no tuve la oportunidad de probarlo yo mismo.