Файл: module-assets/admin/formwizard/examples/example_15_add_and_remove_steps_dynamically.html
Строк: 279
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Form Wizard</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<style type="text/css">
#demoWrapper {
padding : 1em;
width : 500px;
border-style: solid;
}
#fieldWrapper {
}
#demoNavigation {
margin-top : 0.5em;
margin-right : 1em;
text-align: right;
}
#data {
font-size : 0.7em;
}
input {
margin-right: 0.1em;
margin-bottom: 0.5em;
}
.input_field_25em {
width: 2.5em;
}
.input_field_3em {
width: 3em;
}
.input_field_35em {
width: 3.5em;
}
.input_field_12em {
width: 12em;
}
label {
margin-bottom: 0.2em;
font-weight: bold;
font-size: 0.8em;
}
label.error {
color: red;
font-size: 0.8em;
margin-left : 0.5em;
}
.step span {
float: right;
font-weight: bold;
padding-right: 0.8em;
}
.navigation_button {
width : 70px;
}
#data {
overflow : auto;
}
</style>
</head>
<body>
<div id="demoWrapper">
<h3>Example of a straight wizard, with possibility to add/remove more steps dynamically</h3>
<ul>
<li>Straight wizard with three steps.</li>
<li>One can add more steps using a button on step 4</li>
<li>Form plugin enabled and beforeSubmit and success callbacks are used.</li>
</ul>
<hr />
<h5 id="status"></h5>
<form id="demoForm" method="post" action="json.html" class="bbq">
<div id="fieldWrapper">
<div class="step" id="first">
<span class="font_normal_07em_black">First step - Name</span><br />
<label for="firstname">First name</label><br />
<input class="input_field_12em" name="firstname" id="firstname" /><br />
<label for="surname">Surname</label><br />
<input class="input_field_12em" name="surname" id="surname" /><br />
</div>
<div id="finland" class="step">
<span class="font_normal_07em_black">Step 2 - Personal information</span><br />
<label for="day_fi">Social Security Number</label><br />
<input class="input_field_25em" name="day" id="day_fi" value="DD" />
<input class="input_field_25em" name="month" id="month_fi" value="MM" />
<input class="input_field_3em" name="year" id="year_fi" value="YYYY" /> -
<input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX" /><br />
<label for="countryPrefix_fi">Phone number</label><br />
<input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358" /> -
<input class="input_field_3em" name="areaCode" id="areaCode_fi" /> -
<input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" /><br />
<label for="email">*Email</label><br />
<input class="input_field_12em" name="myemail" id="myemail" /><br />
</div>
<div id="car" class="step">
<span class="font_normal_07em_black">My car(s)</span><br />
<label>*Make of the car</label><br />
<input class="input_field_12em" name="make" id="make" /><br />
</div>
<div id="car_more" class="step">
<span class="font_normal_07em_black">My car(s) - some more info</span><br />
<label>*Model</label><br />
<input class="input_field_12em" name="model" id="model" /><br />
<input type="button" value="I own another car..." id="add_car" class="add_car"/>
</div>
<div id="confirmation" class="step">
<span class="font_normal_07em_black">Last step - Username</span><br />
<label for="username">User name</label><br />
<input class="input_field_12em" name="username" id="username" /><br />
<label for="password">Password</label><br />
<input class="input_field_12em" name="password" id="password" type="password" /><br />
<label for="retypePassword">Retype password</label><br />
<input class="input_field_12em" name="retypePassword" id="retypePassword" type="password" /><br />
</div>
</div>
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
<hr />
<p id="data"></p>
</div>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/bbq.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
<script type="text/javascript">
$(function(){
$("#demoForm").formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput : true,
formOptions :{
success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
dataType: 'json',
resetForm: true
}
}
);
var index = 1; // index used for renaming step-id:s, input names and id:s
$(".add_car").live("click",function(){
var step = $(this).parent(".step").attr("id"); // the current step, where the add-button is located
/*
clone the 'car'-step,
rename the attributes id and name for all inputs,
insert them after the current step
*/
$("#car").clone().attr("id", "car" + index).find(":input").each(function(){
$(this).attr("name",function(){
var attr = $(this).attr("name");
return attr + "_" + index;
}).attr("id", function(){
var attr = $(this).attr("id");
return attr + "_" + index;
})
}).end().insertAfter("#" + step);
/*
clone the 'car_more'-step,
rename the attributes id and name for all inputs,
insert them after the _new_ 'car'-step
*/
$("#car_more").clone().attr("id", "car_more" + index).find(":input").each(function(){
$(this).attr("name",function(){
var attr = $(this).attr("name");
return attr + "_" + index;
}).attr("id", function(){
var attr = $(this).attr("id");
return attr + "_" + index;
})
}).end().insertAfter("#car" + index).append("<input class='remove_car' value='cancel' type='button' />"); //add a remove car button
$("#demoForm").formwizard("update_steps"); // update the steps cached in the wizard
index++; // update the index so that the next added step get another id etc
$("#demoForm").formwizard("next"); // move to the next step (the newly created one)...
return false;
});
// add a click event for the remove car buttons to handle the removal of the last added car steps.
$(".remove_car").live("click", function(){
var parent = $(this).parent(".step"); // get the current step, where the clicked 'remove car'-button resides
var indexOfCar = parent.attr("id").substr(8); //strip away 'car_more' and leave the index
var stepToMoveBackTo = $("#car" + indexOfCar).prev(".step").attr("id"); // find the previous step
$("#demoForm").formwizard("show", stepToMoveBackTo); // move to the previous car_more step
$("#car" + indexOfCar + ", #car_more" + indexOfCar).remove(); // remove the added car and car_more steps
$("#demoForm").formwizard("update_steps"); // update the steps cached in the wizard
// remove the visited car step from the wizards internal "memory"
var steps = $("#demoForm").formwizard("state").activatedSteps;
$("#demoForm").formwizard("option", "activatedSteps", steps.pop());
});
});
</script>
</body>
</html>