上图： 
步骤二中选择下拉框中不同的值，下面的input中的值也会有相应的变化，只读
html+js:
<!DOCTYPE html>
<html>
<head>
<title>demo_step.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html">
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
<link rel="stylesheet" href="../assets/css/ace.min.css" id="main-ace-style" />
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="hr hr-18 hr-double dotted"></div>
<div class="widget-box" id="show-loading">
<div class="widget-body">
<div class="widget-main">
<!-- #section:plugins/fuelux.wizard -->
<div id="fuelux-wizard" data-target="#step-container">
<!-- #section:plugins/fuelux.wizard.steps -->
<ul class="wizard-steps">
<li data-target="#step1" class="active" style="">
<span class="step">1</span>
<span class="title">Selection</span>
</li>
<li data-target="#step2">
<span class="step">2</span>
<span class="title">Configuration</span>
</li>
<li data-target="#step3">
<span class="step">3</span>
<span class="title">Downloading</span>
</li>
</ul>
<!-- /section:plugins/fuelux.wizard.steps -->
</div>
<hr />
<div class="step-content pos-rel" id="step-container">
<div class="step-pane active" id="step1">
<form class="form-horizontal" id="sample-form">
<!-- #section:elements.form.input-state -->
<div class="form-group">
<label for="custom-btn" class="col-xs-12 col-sm-4 control-label no-padding-right">Destination MSISDN</label>
<div class="col-xs-12 col-sm-6">
<span class="block input-icon input-icon-right">
<input type="text" id="DESTINATION_MSISDN" name="DESTINATION_MSISDN" class="width-100" value="+447937640567" />
</span>
</div>
<div class="help-block col-xs-12 col-sm-reset inline"></div>
</div>
<!-- /section:elements.form.input-state -->
<div class="form-group">
<div class=" col-sm-offset-5 col-sm-7">
<h4 style="display:inline" class="col-xs-4"><input name="form-field-radio" type="radio" id="fromdb-btn" class="ace" />
<span class="lbl">From Database</span></h4>
<h4 style="display:inline" class="col-xs-6"><input name="form-field-radio" type="radio" id="custom-btn" class="ace" checked="checked"/>
<span class="lbl">Custom</span></h4>
</div>
<div class="help-block col-xs-12 col-sm-reset inline"></div>
</div>
</form>
</div>
<div class="step-pane" id="step2">
<div>
<form class="form-horizontal hide" id="validation-form-1" name="validation-form-1">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="MSISDN">MSISDN</label>
<div class="col-xs-12 col-sm-9">
<label id="data-index"></label>
</div>
</div>
</form>
<form class="form-horizontal" id="validation-form-2">
<div class="space-2"></div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="ICCID">ICCID:</label>
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<input type="text" name="ICCID" id="ICCID" class="col-xs-12 col-sm-6 info" value="" />
</div>
</div>
</div>
<div class="space-2"></div>
</form>
</div>
</div>
<div class="step-pane" id="step3">
<div class="center">
<div class="form-group">
<label for="fromdb-btn" class="col-xs-12 col-sm-3 col-md-3 control-label no-padding-right"></label>
<div class="col-xs-12 col-sm-5">
<span class="block input-icon input-icon-right">
<div class="alert alert-block alert-success" style="padding:50px">
<strong id="step3_msg">
</strong>
</div>
</span>
</div>
<div class="help-block col-xs-12 col-sm-reset inline"> </div>
</div>
</div>
</div>
</div>
<hr />
<div class="col-md-12 column">
<div class="modal fade" id="modal-container" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" keyboard="false">
<div class="modal-dialog">
<div class="modal-content"> </div>
</div>
</div>
</div>
<div class="wizard-actions">
<button class="btn btn-success btn-next" data-last="Finish">
Next
<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
</div>
</div>
</div><!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
<script src="../assets/js/jquery.validate.min.js"></script>
<script src="../assets/js/fuelux/fuelux.wizard.min.js"></script>
<script src="../assets/js/ace/elements.wizard.js"></script>
<script src="../assets/js/spin.min.js"></script>
<script src="../assets/js/ace/ace.js"></script>
<script>
jQuery(function ($) {
$.ajaxSetup({contentType: "application/json"});
<!--/Custom-->
$("#custom-btn").click(function () {
$('#validation-form-1').addClass('hide');
$("#MSISDN-lal").addClass('hide');
$('#myselect').remove();
});
<!--.Custom-->
$("#fromdb-btn").click(function () {
$("#MSISDN-lal").removeClass('hide');
$('#validation-form-1').removeClass('hide');
$.getJSON("/echarts.do", function (data) {
if(data.frontDebug){
data = [{
"MSISDN": "+447937640567",
"ICCID": "8944501205168991305"
}, {
"MSISDN": "+447937640568",
"ICCID": "8944501205168991313"
}, {
"MSISDN": "+447937640569",
"ICCID": "8944501205168991321"
}]
}
var sel1 = document.createElement('select');
sel1.id = "myselect";
sel1.options.add(new Option("Please choose......"));
for (var i = 0; i < data.length; i++) {
sel1.options.add(new Option(data[i].MSISDN, i));
}
$("#data-index").append(sel1);
$("#data-index").change(function () {
if (sel1.options.length == data.length+1) {
sel1.options.remove(0);
}
//console.log($('#data-index option:selected') .val());
for (var i = 0; i < data.length; i++) {
if ($('#data-index option:selected').val() == i) {
$("#ICCID")[0].value = data[i].ICCID;
}
}
$(".starTips").addClass('hide');
$("#validation-form-2").validate().resetForm();
$("#ICCID")[0].readOnly = "readonly";
});
});
});
<!--.From Database-->
jQuery.validator.addMethod("mustNumber", function (value, element) {
return this.optional(element) || /^[0-9]*$/.test(value);
}, "*Please provide a valid number.");
jQuery.validator.addMethod("mustPlusStart", function (value, element) {
return this.optional(element) || /^\+[0-9]{1,}$/.test(value);
}, "*Must be '+' the beginning.");
jQuery.validator.addMethod("mustHex", function (value, element) {
return this.optional(element) || /[0-9A-Fa-f]/.test(value);
}, "*Must be a hexadecimal.");
valiForm1();
function valiForm1(){
return $("#sample-form").validate({
errorPlacement: function(error, element){
$(element).after(error);
},
rules:{
DESTINATION_MSISDN:{
required: true,
minlength:13,
maxlength:17,
mustPlusStart:true
}
},
messages:{
DESTINATION_MSISDN:{
required:"*Please provide a valid DESTINATION_MSISDN.",
minlength:"*DESTINATION_MSISDN must More than 13 number",
maxlength:"*DESTINATION_MSISDN must Less than 17 number"
}
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
$(e).remove();
}
});
};
valiForm2();
function valiForm2() {
return $("#validation-form-2").validate({
errorPlacement: function (error, element) {
$(element).after(error);
},
rules: {
ICCID: {
required: false,
maxlength: 20
}
},
messages: {
ICCID: {
required: "*Please provide a valid ICCID.",
maxlength: "*ICCID must be a 20 number"
}
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
$(e).remove();
}
});
};
var opts = {
lines: 13, //
length: 20, //
width: 10, //
radius: 30, //
corners: 1, //
rotate: 0, //
direction: 1, //
color: '#5882FA', //
speed: 1, //
trail: 60, //
shadow: false, //
hwaccel: false, //
className: 'spinner', //
zIndex: 2e9, //
top: '20px', //
left: 'auto'//
};
var spinner = new Spinner(opts);
function doSubmit(){
var target = $("#show-loading").get(0);
spinner.spin(target);
$('#modal-container').modal({backdrop: 'static', keyboard: false});
var data = form2Json();
data.DESTINATION_MSISDN = $("#DESTINATION_MSISDN").val();
data = JSON.stringify(data);
console.log(data);
$.post("/echarts.do", data, function (json) {
spinner.spin();
$('#modal-container').modal('hide');
var $step3Msg = $("#step3_msg");
if (json.result === 'ok') {
$step3Msg.removeClass().addClass("green");
if (json.msg) {
$step3Msg.append(json.msg);
} else {
$step3Msg.append("Data submit success!");
}
} else {
$step3Msg.removeClass().addClass("red");
if (json.msg) {
$step3Msg.append(json.msg);
} else {
$step3Msg.append("Sorry, data submit failed!");
}
}
});
function form2Json() {
var arr = $("#validation-form-2").serializeArray();
var json = {};
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
json[item.name] = item.value;
}
return json;
}
}
var $validation = false;
$('#fuelux-wizard')
.ace_wizard({
//step: 2 //optional argument. wizard will jump to step "2" at first
})
.on('change' , function(e, info){
if(info.step==1 && valiForm1().form()){
return;
}else if (info.step==2 && valiForm2().form()){
doSubmit();
return;
}else{
return false;
}
//doSubmit();
if(info.step == 1 && $validation) {
if(!$('#validation-form-2').valid()) return false;
}
}).on('finished', function(e) {
bootbox.dialog({
message: "Thank you! And You can click 'Selection' or 'Configuration' to review your data if you want. ",
buttons: {
"success" : {
"label" : "OK",
"className" : "btn-sm btn-primary"
}
}
});
}).on('stepclick', function(e){
//alert("stepclick");
//e.preventDefault();//this will prevent clicking and selecting steps
});
//jump to a step
$('#step-jump').on('click', function() {
alert('click')
var wizard = $('#fuelux-wizard').data('wizard')
wizard.currentStep = 3;
wizard.setState();
})
//determine selected step
//wizard.selectedItem().step
});
</script>
</body>
</html>
ps: 1.链接是无效的，数据依旧是写在假装是返回数据的data里 2.用了ace模板 3.步骤二的验证可能有点问题，需要排查一下，要用到伙伴们注意一下。
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
