JSFiddle - React, Tailwind, and code Playground

by Miguel Roman

HTML

<blockquote><p><strong style="color:red">Nota Importante!!!!</strong>: creo que te serviría si dentro del home tenes un boton runat server y en el code behind de ese boton haces un Server.Transfer("Otro.aspx") donde "Otro.aspx" es el action a donde querías mandar el otro formulario.</p></blockquote>

<blockquote><p>Este ejemplo es si no necesitas que haga postback y te funciona hacerlo con ajax y mostrar solo un popup o algo similar diciendo <strong>"Se ha enviado correctamente la informaci&oacute;n".</strong></p></blockquote>

<form id="parent-form" action="/echo/html">
    
    <p>Digamos que este es tu formulario <strong>Runat Server</strong> de Asp.Net</p>
    
    <p>Y que tiene estos controles:</p>
    
    <label>
        <span>Campo uno</span>
        <input type="text" name="campo1" />
    </label>

    <div id="child-form">
        <p>Ahora digamos que este div es tu nuevo form, <i>notese que hicimos un div para no agregar otro form dentro del form</i></p>
        
        <label>
            <span>Campo dos:</span>
            <input type="text" id="campo-2" name="campo2" />
        </label>
        
        <label>
            <span>Campo tres:</span>
            <select type="text" id="campo-3" name="campo3" >
                <option value="1">Uno</option>
                <option value="2">Dos</option>
            </select>
        </label>        
        <div>
            <button id="submit-child-btn" type="submit">Enviar Form hijo</button>
        </div>
    </div>
    
    <div>
        <button id="submit-parent-btn" type="submit">Enviar Form padre (Runat Server)</button>
    </div>
</form>

CSS

#parent-form{
    border: 1px solid red; 
    padding:5px
}
#child-form{
    border: 1px solid gray; 
    margin: 5px; 
    padding: 5px
}

JavaScript

$('#submit-child-btn').click(function (e) {
    // capturamos el evento click del boton 
    // que esta dentro del child form.
    
    // desactivo el boton para evitar doble click :)
    // y le cambio el texto a "enviando..."
    $('#submit-child-btn').text('enviando...').attr('disabled','disabled');

    // evitamos que haga postback.    
    e.preventDefault();
    
    // serializamos los datos del child-form
    // esto excluirá todos aquellos datos que
    // esten fuera del div.
    // esta sintaxis se leería algo así:
    //  * busque dentro del elemento con id 
    //    child-form todos aquellos elementos
    //    input que tengan el atributo name, y
    //    tambien todos aquellos elementos 
    //    select que tengan el atributo name
    //    y tambien todos aquellos elementos
    //    textarea que tengan este atributo.
    //
    // esto quiere decir que si usas otro control
    // que no sea input, select o textarea, tambien
    // tendrías que agregarlo en esta lista.
    var datos = $('#child-form input[name],select[name],textarea[name]').serialize();
   
    // otra forma de serializar es usar un objeto,
    // la ventaja de este metodo es que te da mas
    // control sobre lo que serializas, pero lo malo
    // es de que tenes que escribir todos los campos
    // uno por uno, por ejemplo:
    //    
    // var datos = {
    //    campo2: $('#campo-2').val(),
    //    campo3: $('#campo-3').val()
    // };
    //
    // var datosSerializados = $.param(datos);
    //
    // y con esto ya enviarias datosSerializados
    // en lugar de la variable datos.
        
    
    // Enviamos los datos al action del otro 
    // formulario, para fines de ejemplo aqui
    // se usa el /echo/html que es un servicio
    // de jsfiddle.net pero aquí iría lo que
    // ponias en el action de tu nuevo form.
    $.post('/echo/html', datos, function (r) {
        // esta funcion se va a ejecutar una vez 
        // haya finalizado correctamente el envío
    ...