在结帐流程中逐步提交表单jQuery

Question

我正在购物页面工作，现在有结帐部分。我想展示一个进展，首先询问设置地址，然后发货地址，付款等。像这样：

我有以下代码对应于结帐进度的步骤。

<div class="progressContent" >

    <form id="form1" class="update_form" action="" method="post">
        <ul>
            <li>
                <h2>Dirección de facturación</h2>
                <p>
                    Introduzca la dirección a la que quiere asociar la facturación de la compra, no el envío.
                </p>
            </li>
            <li>
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" value="<?php echo $name[0] ?>" required />
            </li>
            <li>
                <label for="apellidos">Apellidos:</label>
                <input type="text" name="apellidos" value="<?php echo $name[1]." ".$name[2] ?>" required />
            </li>
            <li>
                <label for="direccion">Dirección:</label>
                <input type="text" name="direccion" value="<?php echo $calle ?>" required />
            </li>
            <li>
                <label for="ciudad">Ciudad:</label>
                <input type="text" name="ciudad" value="<?php echo $localidad ?>" required />
            </li>
            <li>
                <label for="localidad">Localidad:</label>
                <input type="text" name="localidad" value="" required />
            </li>
        </ul>
    </form>

    <form id="form2" class="update_form" action="" method="post">
        <ul>
            <li>
                <h2>Dirección de envio</h2>
                <p>
                    Introduzca la dirección en la que desea recibir el pedido.
                </p>
            </li>
            <li>
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" value="<?php echo $name[0] ?>" required />
            </li>
            <li>
                <label for="apellidos">Apellidos:</label>
                <input type="text" name="apellidos" value="<?php echo $name[1]." ".$name[2] ?>" required />
            </li>
            <li>
                <label for="direccion">Dirección:</label>
                <input type="text" name="direccion" value="<?php echo $calle ?>" required />
            </li>
            <li>
                <label for="ciudad">Ciudad:</label>
                <input type="text" name="ciudad" value="<?php echo $localidad ?>" required />
            </li>
            <li>
                <label for="localidad">Localidad:</label>
                <input type="text" name="localidad" value="" required />
            </li>
        </ul>
    </form>

    <form id="form3" class="update_form" action="" method="post">
        <ul>
            <li>
                <h2>Método de envío</h2>
                <p>
                    Seleccione el método de envío que desea. Los gastos de envío corren a cargo del cliente.
                </p>
            </li>
        </ul>

        <div class="envio normal" title="Envío normal">
            Envío normal
        </div>
        <p class="textoEnvio">
            Se relizará la entrega por parte de la empresa tal, el tiempo estimado son unos 3 días laborables.
        </p>
        <div class="envio express" title="Envío rápido">
            Envío express
        </div>
        <p class="textoEnvio">
            Se relizará la entrega por parte de la empresa tal, el tiempo estimado son unos 2 días laborables.
        </p>
        <p class="nota">
            <span style="color:red;">*</span>Recuerda que los gastos de envío no están incluidos en el precio, y se habrían de pagar en el momento de la entrega.
        </p>
    </form>

    <form id="form4" class="update_form" action="" method="post">
        <ul>
            <li>
                <h2>Método de pago</h2>
                <p>
                    Seleccione el método de pago preferido para realizar la compra actual.
                </p>
            </li>

            <li>
                <input id="tarjeta" class="pago" type="radio" name="tipoPago" value="tarjeta">
                <label class="selectorPagos tarjeta" for="tarjeta"></label>
            </li>
            <li>
                <input id="paypal" class="pago" type="radio" name="tipoPago" value="paypal">
                <label class="selectorPagos paypal" for="paypal"></label>
            </li>
            <li>
                <input id="ingreso" class="pago" type="radio" name="tipoPago" value="cuenta">
                <label class="selectorPagos ingreso" for="ingreso"></label>
            </li>
        </ul>
    </form>

</div>
<div class="progressBottons" >
    <a href="#" class="botonComprar compra" id="continuar" title="Siguiente" type="button" >Continuar</a>
    <a href="#" class="botonComprar " id="anterior" title="Atrás" type="button" >Anterior</a>
</div>

我想每次点击＆＃34;继续＆＃34;使用jquery / ajax在mysql数据库中存储信息，下一步也是如此。我尝试过这个：

$('.progressContent').on('click','#continuar', function(e) {
    e.preventDefault();

    $('.progressContent').children('.update_form').eq(i-2).submit( function() {

        dataString = $('.progressContent').children('.update_form').eq(i-2).serialize();

        $.ajax({
            type: "POST",
            url: "./php/api.php?facturacion=1",
            data: dataString,
            dataType: "json",
            success: function(data) {
                console.log(data);
            }
        });
        return false;
    });


    setInterval();

});

但这不起作用。怎么能以正确的方式做到这一点？我确保正确选择了表单。