Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/05/2013, 10:32
cristaken
 
Fecha de Ingreso: septiembre-2010
Mensajes: 75
Antigüedad: 14 años, 3 meses
Puntos: 1
Pregunta Reestablecer estilos con jQuery

Hola amigos de foros del web y antes que nada agradezco la ayuda que puedan brindarme.
Mi problema es: Tengo un formulario creado con idealforms el cual uso como paso a paso para realizar una integración con una pasarela de pago, en este formulario requiero crear dinamicamente campos para que las personas completen de acuerdo a la selección que hicieron. Cuando yo hago estos campos manualmente por html funciona perfecto, pero cuando lo agrego con append, pierde totalmente los estilos y queda demasiado desordenado, les dejo el código:

Link: http://congresoacipet.com/pagos

HTML:
Código:
<form id="my-form">                           
                            <section name="Paso 1">
                                <div><h1 class="titulosprincipales">Formulario de Inscripci&oacute;n</h1></div>                               
                                <div><hr/></div> 
                                <table width="100%" id="seleccionPrecio" cellspacing="2">
                                    <tr>
                                        <td><label>Tipo de Inscripci&oacute;n</label></td>
                                        <td><label>Hasta 30 de Julio/2013</label></td>
                                        <td><label>Hasta 30 de Septiembre/2013</label></td>
                                        <td><label>Despu&eacute;s del 30 de Septiembre/2013</label></td>
                                        <td><label>Cantidad</label></td>
                                    </tr>            
                                </table><br/><br/>                          
                                <div>
                                    <button type="button" id="siguiente">Siguiente</button>
                                </div>
                            </section>
                            <section name="Paso 2" id="informacionPersonal">   
                                <div id="formularioDatos"></div>
                                               
                                <div>
                                    <button type="button" id="siguiente2" >Siguiente</button>
                                </div>

                            </section>
                            <section name="Paso 3">
                                <div><h1 class="titulosprincipales">Verificaci&oacute;n y Pago</h1></div><br/>
                                <div id="verificacionPago">

                                </div>

                                <div>
                                    <button type="submit">Pagar</button>
                                </div>
                            </section>


                        </form>
Javascript:
Código:
var participantes, afiliados, docentes, coautores, presentadores, estudiantes, estudianteafiliado;
            var cont = 0;
            var options = {
                onFail: function() {
                    alert($myform.getInvalid().length + ' campos invalidos.')
                },
                inputs: {
                    'cantidades[]': {
                        filters: 'min',
                        data: {min: 1},
                        errors: {min: 'Ingresa al menos <strong>1 Tipo de inscripcion</strong>.'}
                    },
                    'password': {
                        filters: 'required pass',
                    },
                    'username': {
                        filters: 'required username',
                        data: {
                            //ajax: { url:'validate.php' }
                        }
                    },
                    'file': {
                        filters: 'extension',
                        data: {extension: ['jpg']}
                    },
                    'comments': {
                        filters: 'min max',
                        data: {min: 50, max: 200}
                    },
                    'states': {
                        filters: 'exclude',
                        data: {exclude: ['default']},
                        errors: {
                            exclude: 'Select a State.'
                        }
                    },
                    'langs[]': {
                        filters: 'min max',
                        data: {min: 2, max: 3},
                        errors: {
                            min: 'Check at least <strong>2</strong> options.',
                            max: 'No more than <strong>3</strong> options allowed.'
                        }
                    }
                }
            };

            var $myform = $('#my-form').idealforms(options).data('idealforms');

            $myform.focusFirst();


            $('#siguiente').click(function() {
                cont = 0;
                /*Datos para generar formualrios*/
                participantes = $('#cantidad1').val();
                afiliados = $('#cantidad2').val();
                docentes = $('#cantidad3').val();
                coautores = $('#cantidad4').val();
                presentadores = $('#cantidad5').val();
                estudiantes = $('#cantidad6').val();
                estudianteafiliado = $('#cantidad7').val();

                /*Validacion de llenado de los campos de cantidad*/
                var c = 0;
                $('input[type=number]').each(function() {
                    if ($(this).val() != "") {
                        cont = 0;
                        while (cont < participantes) {
                            $('#formularioDatos').append('\n\
                                <div><h1 class="titulosprincipales">Informaci&oacute;n Personal</h1></div><br/>\n\
                                <div class="halign"><label>Nombres:</label><input type="text" style="width: 270px;" placeholder="Nombres" id="nombres"/></div>\n\
                                <div class="halign"><label>Apellidos:</label><input type="text" style="width: 270px;" placeholder="Apellidos" id="apellidos"/></div>\n\
                                <div class="halign"><label>Identificaci&oacute;n:</label><input type="text" style="width: 270px;" placeholder="C.C." id="identificacion" /></div>\n\
                                <div class="halign"><label>E-mail:</label><input type="email" style="width: 270px;" placeholder="Correo personal" id="email"/></div>\n\
                                <div class="halign"><label>Direcci&oacute;n:</label><input type="text" style="width: 170px;" placeholder="Direcci&oacute;n de residencia" id="direccion"/></div>\n\
                                <div class="halign"><label>Pais actual:</label><input type="text" style="width: 121px;" placeholder="Pais" id="pais"/></div>\n\
                                <div class="halign"><label>Ciudad:</label><input type="text" style="width: 121px;" placeholder="Ciudad" id="ciudad"/></div>\n\
                                <div><h1 class="titulosprincipales">Informaci&oacute;n Empresarial</h1></div><br/>\n\
                                <div class="halign"><label>Empresa:</label><input type="text" style="width: 665px;" placeholder="Nombre completo de la empresa" id="nombrecorp"/></div>\n\
                                <div class="halign"><label>NIT:</label><input type="text" style="width: 170px;" placeholder="NIT" id="nit"/></div>\n\
                                <div class="halign"><label>Direcci&oacute;n:</label><input type="text" style="width: 121px;" placeholder="Direcci&oacute;n corporativa" id="dircorp"/></div>\n\
                                <div class="halign"><label>Telef&oacute;no:</label><input type="tel" style="width: 121px;" placeholder="Telef&oacute;no corporativo" id="telefonocorp"/></div>\n\
                                <div class="halign"><label>E-mail:</label><input type="email" style="width: 270px;" placeholder="Correo Corporativo" id="emailcorp"/></div>\n\
                                <div class="halign"><label>Cargo:</label><input type="text" style="width: 270px;" placeholder="Cargo desempe&ntilde;ado" id="cargo"/></div>\n\
                                <div class="halign"><label>Pagina Web:</label><input type="url" style="width: 665px;" placeholder="Pagina web de la empresa (Opcional)" id="web"/></div><br/>'
                                    );
                            cont++;
                        }
                        $myform.reload().fresh();
                        $myform.nextTab();
                        exit();
                    } else {
                        if (c > 5) {
                            alert("Por favor digite que cantidad de inscripciones desea en el campo cantidad (Al menos uno)");
                            exit();
                        }
                        c++;
                    }
                });
                /*fin de validacion*/
            });

            $('#siguiente2').click(function() {               
                $myform.nextTab();
            });