<html>
<style>
.btn-bed{
line-height: 25px !important;
font-size: 14px !important;
/* border: none !important; */
width: 130px !important;
font-family: Gill Sans MT Pro !important;
}
#mySelect{
border-radius: 0px !important;
}
#Select{
border-radius: 0px !important;
}
button#showdiv1:focus
{
background-color: #357ebd;
color: #fff;
}
.checked{
color: white;
background-color: #0077b9 !important;
}
.btn:focus {
background-color: #ffff !important;
}
.dimension
{
display: none;
}
.radio-buttons
{
display:none;
}
input[type=radio] + label
{
display:inline-block;
<!--padding: 4px 12px; -->
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 14px;
line-height: 20px;
color: #333;
}
input[type=radio]:checked + label
{
background-image: none;
background-color:#0077b9 !important;
color:#ffff;
}
#image-plainpattern{
width:50px ! important;
}
li.selected {
border:1px solid red;
}
.bed-di-btn{
display:inline-block;
padding: 4px 12px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 14px;
line-height: 20px;
color: #333;
}
</style>
<body>
<form method="POST" id="dimension">
<div id='div3'>
<div class="col-md-12 container" >
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step Three:Choose Dimension</label>
</div>
<div class="col-md-12">
<label class="radio-inline btn-radio"><input type="radio" name="size" value="v" >Choose From Standard Size</label>
<label class="radio-inline btn-radio"> <input type="radio" name="size" checked="checked" value="s"/>Enter Your Own Size</label>
</div>
<!-- enter your own size -->
<div class='row desc' id="sizes" >
<div class="col-md-12">
<label class="own-size">Your Own sizes(in Inches)</label>
</div>
<form id="lengthform" name="samplecode" method="POST">
<div class="col-md-12 ">
<div class="form-group col-md-6 col-lg-3 text"><input type="text" name="length" id="length" class="form-control len-class" Placeholder='Length'></div>
<div class="form-group col-md-6 col-lg-3 text"> <input type="text" name="breadth" id="breadth" class="form-control len-class" Placeholder='Breadth'>
</div>
<div class="col-md-6 col-lg-10">
<p>(sizes can be between 48" to 84" Length <br>
and 24" to 78" breadth)</p>
</div>
</div>
</form>
<div class="col-md-12 ">
<label class="not-sure-matters" >Not sure how to measure your mattress?</label>
</div>
<div class="col-md-12 ">
<a href='#' class='link-find-out'>Click here to find out</a>
</div>
</div>
<!-- END your own size -->
<!-- enter your Standard size -->
<div class='row desc' id="sizev" style='Display:none;' >
<div class="col-md-12">
<label class="own-size">Bed Type</label>
<div class='custom-btn-grp'>
<div class="bed_type">
<ul class="nav nav-pills">
<li>
<input type="radio" id="b1" name="radios" class="radio-buttons bed-di-btn" value="Single" checked >
<label for="b1">Single</label>
</li>
<li>
<input type="radio" id="b2" name="radios" class="radio-buttons bed-di-btn" value="Double" >
<label for="b2">Double(Twin)</label>
</li>
<li>
<input type="radio" id="b3" name="radios" class="radio-buttons bed-di-btn" value="Queen" >
<label for="b3">Queen</label>
</li>
<li>
<input type="radio" id="b4" name="radios" class="radio-buttons bed-di-btn" value="King" >
<label for="b4">King</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<label class="own-size">Dimension</label>
<div class='custom-btn-grp dimension-group'>
<div class ="dimension" id="d1">
<ul class="nav nav-pills">
<li>
<input type="radio" id="single1" class="radio-buttons bed-di-btn className" name="single" value="72*30" >
<label for="single1">72x30</label>
</li>
<li>
<input type="radio" id="single2" class="radio-buttons bed-di-btn className" name="single" checked value="72*36" >
<label for="single2">72x36 </label>
</li>
<li>
<input type="radio" id="single3" class="radio-buttons bed-di-btn className" name="single" value="75*36" >
<label for="single3">75x36</label>
</li>
<li>
<input type="radio" id="single4" class="radio-buttons bed-di-btn className" name="single" value="78*36" >
<label for="single4">78x36</label>
</li>
<li>
<input type="radio" id="single5" class="radio-buttons bed-di-btn className" name="single" value="84*36" >
<label for="single5">84x36</label>
</li>
</ul>
</div>
<div class ="dimension" id="d2">
<ul class="nav nav-pills">
<li>
<input type="radio" id="doubles1" class="radio-buttons className" name="doubles" checked value="72*48" >
<label for="doubles1">72x48</label>
</li>
<li>
<input type="radio" id="doubles2" class="radio-buttons className" name="doubles" value="75*48" >
<label for="doubles2">75x48</label>
</li>
<li>
<input type="radio" id="doubles3" class="radio-buttons className" name="doubles" value="78*48" >
<label for="doubles3">78x48</label>
</li>
<li>
<input type="radio" id="doubles4" class="radio-buttons className" name="doubles" value="84*48" >
<label for="84x48">84x48</label>
</li>
</ul>
</div>
<div class ="dimension" id="d3">
<ul class="nav nav-pills">
<li>
<input type="radio" id="queen1" class="radio-buttons className" name="queen" checked value="72*60" >
<label for="queen1">72x60</label>
</li>
<li>
<input type="radio" id="queen2" class="radio-buttons className" name="queen" value="75*60" >
<label for="queen2">75x60</label>
</li>
<li>
<input type="radio" id="queen3" class="radio-buttons className" name="queen" value="78*60">
<label for="queen3">78x60</label>
</li>
<li>
<input type="radio" id="queen4" class="radio-buttons className" name="queen" value="84*60">
<label for="queen4">84x60</label>
</li>
</ul>
</div>
<div class ="dimension" id="d4">
<ul class="nav nav-pills">
<li>
<input type="radio" id="king1" class="radio-buttons className" name="king" checked value="72*72" >
<label for="king1">72x72</label>
</li>
<li>
<input type="radio" id="king2" class="radio-buttons className" name="king" value="75*72" >
<label for="king2">75x72</label>
</li>
<li>
<input type="radio" id="king3" class="radio-buttons className" name="king" value="3000k" >
<label for="king3">78x72</label>
</li>
<li>
<input type="radio" id="king4" class="radio-buttons className" name="king" value="84*72" >
<label for="king4">84x72</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 "><label class="not-sure-matters" >Not sure how to measure your mattress?</label></div>
<div class="col-md-12 "><a href='#' class='link-find-out'>Click here to find out</a></div>
</div>
<!-- End standard sizes -->
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right'>
<a href='#' id='summer5' class='next-color'>Next ❯❯</a>
</div>
<div class=' pull-left' >
<a href='#Pre' id='summer4' class='next-color'><span>❮❮</span>Previous </a>
</div>
</div>
</div>
</form>
<div id="div4" style="display:none;"> <p id="demo"> </p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(window).load(function()
{
$('.dimension').hide();
$('#d1').show();
});
$("input[name$='size']").click(function() {
var test = $(this).val();
//alert(test);
$("div.desc").hide();
$("#size" + test).show();
if (test == 'v')
{
$('.bed_type ul li ').click(function()
{
var i = $(this).index();
$('.dimension').hide();
$('#d' + (i+1)).show();
var type ='b' + (i+1);
document.getElementById(type).addEventListener("click", bedtype);
});
$('.dimension ul li').click(function () {
var i = $(this).index();
var single ='single' + (i+1);
//alert(single);
var doubles ='doubles' + (i+1);
var queen ='queen' + (i+1);
var king ='king' + (i+1);
document.getElementById(single).addEventListener("click", price);
document.getElementById(doubles).addEventListener("click", price);
document.getElementById(queen).addEventListener("click", price);
document.getElementById(king).addEventListener("click", price);
});
function price()
{
var price_btn=this.id;
var price_value = document.getElementById(price_btn).value;
var arr = price_value.split('*');
var bed1= arr[0];
alert(bed1);
var bed2= arr[1];
$("#length").val(bed1);
$("#breadth").val(bed2);
}
}
else(test =='s')
{
$("#length").change(function(){
var length =$(this).val();
$("#breadth").change(function(){
var breadth =$(this).val();
//var lenbre= length * breadth;
//alert(lenbre);
var result =length.concat(breadth);
var len = (length * breadth) ;
});
});
}
});
$('#dimension').validate({
rules: {
length: {
required: true,
number: true,
range: [48, 84]
},
breadth: {
required: true,
number: true,
range: [24, 78]
}
},
messages: {
length: {
required: 'Please select a template'
},
breadth: {
required: 'Please select a template'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div4").show();
var data = $(this.currentForm).serialize();
$("#demo").text(data +'"');
return false;
}
});
$("#summer5").click(function() {
$("#dimension").submit();
});
});
</script>
</html>
我只选择一个单选按钮输入值是获取下一个div的警报。我收到这样的警告错误
错误：
0 * [object HTMLInputElement]
我的结果：
显示长度的值不是仅消息值： 74
广度的值显示的不是仅消息值： 78
$(document).ready(function() {
$(window).load(function() {
$('.dimension').hide();
$('#d1').show();
});
$("input[name$='size']").click(function() {
var test = $(this).val();
//alert(test);
$("div.desc").hide();
$("#size" + test).show();
if (test == 'v') {
$('.bed_type ul li ').click(function() {
var i = $(this).index();
$('.dimension').hide();
$('#d' + (i + 1)).show();
var type = 'b' + (i + 1);
document.getElementById(type).addEventListener("click", bedtype);
});
$('.dimension ul li').click(function() {
var i = $(this).index();
var single = 'single' + (i + 1);
//alert(single);
var doubles = 'doubles' + (i + 1);
var queen = 'queen' + (i + 1);
var king = 'king' + (i + 1);
document.getElementById(single).addEventListener("click", price);
document.getElementById(doubles).addEventListener("click", price);
document.getElementById(queen).addEventListener("click", price);
document.getElementById(king).addEventListener("click", price);
});
function price() {
var price_btn = this.id;
var price_value = document.getElementById(price_btn).value;
var arr = price_value.split('*');
var bed1 = arr[0];
alert(bed1);
var bed2 = arr[1];
$("#length").val(bed1);
$("#breadth").val(bed2);
}
} else(test == 's') {
$("#length").change(function() {
var length = $(this).val();
$("#breadth").change(function() {
var breadth = $(this).val();
//var lenbre= length * breadth;
//alert(lenbre);
var result = length.concat(breadth);
var len = (length * breadth);
});
});
}
});
$('#dimension').validate({
rules: {
length: {
required: true,
number: true,
range: [48, 84]
},
breadth: {
required: true,
number: true,
range: [24, 78]
}
},
messages: {
length: {
required: 'Please select a template'
},
breadth: {
required: 'Please select a template'
}
},
submitHandler: function() {
$('div[id ^=div]').hide();
$("#div4").show();
var data = $(this.currentForm).serialize();
$("#demo").text(data +'"');
return false;
}
});
$("#summer5").click(function() {
$("#dimension").submit();
});
});.btn-bed {
line-height: 25px !important;
font-size: 14px !important;
/* border: none !important; */
width: 130px !important;
font-family: Gill Sans MT Pro !important;
}
#mySelect {
border-radius: 0px !important;
}
#Select {
border-radius: 0px !important;
}
button#showdiv1:focus {
background-color: #357ebd;
color: #fff;
}
.checked {
color: white;
background-color: #0077b9 !important;
}
.btn:focus {
background-color: #ffff !important;
}
.dimension {
display: none;
}
.radio-buttons {
display: none;
}
input[type=radio] + label {
display: inline-block;
<!--padding: 4px 12px;
--> border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 14px;
line-height: 20px;
color: #333;
}
input[type=radio]:checked + label {
background-image: none;
background-color: #0077b9 !important;
color: #ffff;
}
#image-plainpattern {
width: 50px ! important;
}
li.selected {
border: 1px solid red;
}
.bed-di-btn {
display: inline-block;
padding: 4px 12px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 14px;
line-height: 20px;
color: #333;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST" id="dimension">
<div id='div3'>
<div class="col-md-12 container">
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step">Step Three:Choose Dimension</label>
</div>
<div class="col-md-12">
<label class="radio-inline btn-radio">
<input type="radio" name="size" value="v">Choose From Standard Size</label>
<label class="radio-inline btn-radio">
<input type="radio" name="size" checked="checked" value="s" />Enter Your Own Size</label>
</div>
<!-- enter your own size -->
<div class='row desc' id="sizes">
<div class="col-md-12">
<label class="own-size">Your Own sizes(in Inches)</label>
</div>
<form id="lengthform" name="samplecode" method="POST">
<div class="col-md-12 ">
<div class="form-group col-md-6 col-lg-3 text">
<input type="text" name="length" id="length" class="form-control len-class" Placeholder='Length'>
</div>
<div class="form-group col-md-6 col-lg-3 text">
<input type="text" name="breadth" id="breadth" class="form-control len-class" Placeholder='Breadth'>
</div>
<div class="col-md-6 col-lg-10">
<p>(sizes can be between 48" to 84" Length
<br>and 24" to 78" breadth)</p>
</div>
</div>
</form>
<div class="col-md-12 ">
<label class="not-sure-matters">Not sure how to measure your mattress?</label>
</div>
<div class="col-md-12 ">
<a href='#' class='link-find-out'>Click here to find out</a>
</div>
</div>
<!-- END your own size -->
<!-- enter your Standard size -->
<div class='row desc' id="sizev" style='Display:none;'>
<div class="col-md-12">
<label class="own-size">Bed Type</label>
<div class='custom-btn-grp'>
<div class="bed_type">
<ul class="nav nav-pills">
<li>
<input type="radio" id="b1" name="radios" class="radio-buttons bed-di-btn" value="Single" checked>
<label for="b1">Single</label>
</li>
<li>
<input type="radio" id="b2" name="radios" class="radio-buttons bed-di-btn" value="Double">
<label for="b2">Double(Twin)</label>
</li>
<li>
<input type="radio" id="b3" name="radios" class="radio-buttons bed-di-btn" value="Queen">
<label for="b3">Queen</label>
</li>
<li>
<input type="radio" id="b4" name="radios" class="radio-buttons bed-di-btn" value="King">
<label for="b4">King</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<label class="own-size">Dimension</label>
<div class='custom-btn-grp dimension-group'>
<div class="dimension" id="d1">
<ul class="nav nav-pills">
<li>
<input type="radio" id="single1" class="radio-buttons bed-di-btn className" name="single" value="72*30">
<label for="single1">72x30</label>
</li>
<li>
<input type="radio" id="single2" class="radio-buttons bed-di-btn className" name="single" checked value="72*36">
<label for="single2">72x36</label>
</li>
<li>
<input type="radio" id="single3" class="radio-buttons bed-di-btn className" name="single" value="75*36">
<label for="single3">75x36</label>
</li>
<li>
<input type="radio" id="single4" class="radio-buttons bed-di-btn className" name="single" value="78*36">
<label for="single4">78x36</label>
</li>
<li>
<input type="radio" id="single5" class="radio-buttons bed-di-btn className" name="single" value="84*36">
<label for="single5">84x36</label>
</li>
</ul>
</div>
<div class="dimension" id="d2">
<ul class="nav nav-pills">
<li>
<input type="radio" id="doubles1" class="radio-buttons className" name="doubles" checked value="72*48">
<label for="doubles1">72x48</label>
</li>
<li>
<input type="radio" id="doubles2" class="radio-buttons className" name="doubles" value="75*48">
<label for="doubles2">75x48</label>
</li>
<li>
<input type="radio" id="doubles3" class="radio-buttons className" name="doubles" value="78*48">
<label for="doubles3">78x48</label>
</li>
<li>
<input type="radio" id="doubles4" class="radio-buttons className" name="doubles" value="84*48">
<label for="84x48">84x48</label>
</li>
</ul>
</div>
<div class="dimension" id="d3">
<ul class="nav nav-pills">
<li>
<input type="radio" id="queen1" class="radio-buttons className" name="queen" checked value="72*60">
<label for="queen1">72x60</label>
</li>
<li>
<input type="radio" id="queen2" class="radio-buttons className" name="queen" value="75*60">
<label for="queen2">75x60</label>
</li>
<li>
<input type="radio" id="queen3" class="radio-buttons className" name="queen" value="78*60">
<label for="queen3">78x60</label>
</li>
<li>
<input type="radio" id="queen4" class="radio-buttons className" name="queen" value="84*60">
<label for="queen4">84x60</label>
</li>
</ul>
</div>
<div class="dimension" id="d4">
<ul class="nav nav-pills">
<li>
<input type="radio" id="king1" class="radio-buttons className" name="king" checked value="72*72">
<label for="king1">72x72</label>
</li>
<li>
<input type="radio" id="king2" class="radio-buttons className" name="king" value="75*72">
<label for="king2">75x72</label>
</li>
<li>
<input type="radio" id="king3" class="radio-buttons className" name="king" value="3000k">
<label for="king3">78x72</label>
</li>
<li>
<input type="radio" id="king4" class="radio-buttons className" name="king" value="84*72">
<label for="king4">84x72</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 ">
<label class="not-sure-matters">Not sure how to measure your mattress?</label>
</div>
<div class="col-md-12 "><a href='#' class='link-find-out'>Click here to find out</a>
</div>
</div>
<!-- End standard sizes -->
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right'>
<a href='#' id='summer5' class='next-color'>Next ❯❯</a>
</div>
<div class=' pull-left'>
<a href='#Pre' id='summer4' class='next-color'><span>❮❮</span>Previous </a>
</div>
</div>
</div>
</form>
<div id="div4" style="display:none;"> <p id="demo"> </p></div>