I'm putting together a system that uses html + css + php + ajax + jquery, so far I've been using pieces of code to build the system and everything is fine however I have a problem with a plugin for jquery called ideal forms (v3) I want to use for the creation and validation of the forms in real time, the problem is that the code should load a form into a div but in doing so the structure of the form is damaged so I would like help to know what the cause is
code
prueba.php (as the form should look):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="librerias/jq-idealforms-master/css/jquery.idealforms.css">
</head>
<body>
<div style="width: 700px; position: absolute; top: 100px;">
<div class="idealsteps-container">
<nav class="idealsteps-nav"></nav>
<form action="" autocomplete="off" class="idealforms">
<div class="idealsteps-wrap">
<!-- Step 1 -->
<section class="idealsteps-step">
<div class="field">
<label class="main">Username:</label>
<input name="username" type="text" data-idealforms-ajax="ajax.php">
<span class="error"></span> </div>
<div class="field">
<label class="main">E-Mail:</label>
<input name="email" type="email">
<span class="error"></span> </div>
<div class="field">
<label class="main">Password:</label>
<input name="password" type="password">
<span class="error"></span> </div>
<div class="field">
<label class="main">Confirm:</label>
<input name="confirmpass" type="password">
<span class="error"></span> </div>
<div class="field">
<label class="main">Date:</label>
<input name="date" type="text" placeholder="mm/dd/yyyy" class="datepicker">
<span class="error"></span> </div>
<div class="field">
<label class="main">Picture:</label>
<input id="picture" name="picture" type="file" multiple>
<span class="error"></span> </div>
<div class="field">
<label class="main">Website:</label>
<input name="website" type="text">
<span class="error"></span> </div>
</section>
<div class="field buttons">
<label class="main"> </label>
<button type="submit" class="submit">Submit</button>
</div>
</section>
</div>
<span id="invalid"></span>
</form>
</div>
</div>
<script type="text/javascript" src="librerias/jquery-3.1.1.js"></script>
<script src="librerias/jq-idealforms-master/js/out/jquery.idealforms.js"></script>
<script>
$('form.idealforms').idealforms({
silentLoad: false,
rules: {
'username': 'required username ajax',
'email': 'required email',
'password': 'required pass',
'confirmpass': 'required equalto:password',
'date': 'required date',
'picture': 'required extension:jpg:png',
'website': 'url',
'hobbies[]': 'minoption:2 maxoption:3',
'phone': 'required phone',
'zip': 'required zip',
'options': 'select:default',
},
errors: {
'username': {
ajaxError: 'Username not available'
}
},
onSubmit: function(invalid, e) {
e.preventDefault();
$('#invalid')
.show()
.toggleClass('valid', ! invalid)
.text(invalid ? (invalid +' invalid fields') : 'All good!');
}
});
$('form.idealforms').find('input, select, textarea').on('change keyup', function() {
$('#invalid').hide();
});
$('form.idealforms').idealforms('addRules', {
'comments': 'required minmax:50:200'
});
$('.prev').click(function(){
$('.prev').show();
$('form.idealforms').idealforms('prevStep');
});
$('.next').click(function(){
$('.next').show();
$('form.idealforms').idealforms('nextStep');
});
</script>
</body>
</html>
prueba2.php (where is the div that will contain the form):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="librerias/jquery-3.1.1.js"></script>
<script type="text/javascript" src="scripts_prueba.js"></script>
</head>
<body>
<div id="asd"> <a id="cargar">cargar</a> </div>
</body>
</html>
load script
$(document).ready( function (){
$("#cargar").click(function(e){
e.preventDefault();
$( "#asd" ).fadeOut(250,
function(){$("#asd").load("prueba.php",
function(){$("#asd").fadeIn(250); });
});
});
});