Reestablecer estilos con jQuery 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:
Javascript:<form id="my-form">
<section name="Paso 1">
<div><h1 class="titulosprincipales">Formulario de Inscripción</h1></div>
<div><hr/></div>
<table width="100%" id="seleccionPrecio" cellspacing="2">
<tr>
<td><label>Tipo de Inscripción</label></td>
<td><label>Hasta 30 de Julio/2013</label></td>
<td><label>Hasta 30 de Septiembre/2013</label></td>
<td><label>Despué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ón y Pago</h1></div><br/>
<div id="verificacionPago">
</div>
<div>
<button type="submit">Pagar</button>
</div>
</section>
</form>
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ó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ó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ón:</label><input type="text" style="width: 170px;" placeholder="Direcció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ó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ón:</label><input type="text" style="width: 121px;" placeholder="Dirección corporativa" id="dircorp"/></div>\n\
<div class="halign"><label>Telefóno:</label><input type="tel" style="width: 121px;" placeholder="Telefó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ñ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();
});
