I created a vertical timeline. Now I have to set the background color of the circle when it is active. You can check the following image of the first circle with text - the active stage, and the background color - red.
Example:
I have four forms called form1,form2,form3,form4. The first circle is always on a red background when the page reloads. If the user is on form1, then the background color of the circle with the text will be red. After pressing button 1, the second circle on a red background and the first circle in green. If the user clicked form2than the second circle in green, and the third circle will be red. If the user pressed the third button3, then the third circle of the background is in green and four circles in red.
I tried a code in which only the first circle works, and if I click on Button1from form1, than the whole circle showing in red.
There is a problem with my script. Please check this out. And also check the name of my button on the click event, because I set the same name for each button.
I am updating my code here. Now the problem is that the field is empty than it shows a green circle, even if I get a validation error message. https://jsfiddle.net/Narendra2015/g2j1rtzn/
Could you help me with this?
$(document).ready(function(){
$('.button-clicked').click(function(){
$('.info-timeline ul li span').removeClass("timeline-circle-active");
$('.info-timeline ul li a').removeClass("timeline-text-active");
$('.info-timeline ul li span').addClass("timeline-circle-active");
$('.info-timeline ul li a').addClass("timeline-text-active");
});
});
$(document).ready(function() {
$("form[name='form1']").validate({
rules: {
fname: {
required: true,
minlength:3,
maxlength:50
}
},
submitHandler: function() {
$.ajax({
type: 'post',
url: 'process.php',
data: $("form[name='form1']").serialize(),
success: function (data) {
$('#first').hide();
$('#second').show();
}
});
}
})
});
$(document).ready(function() {
$("form[name='form2']").validate({
rules: {
mname: {
required: true,
minlength:3,
maxlength:50
}
},
submitHandler: function() {
$.ajax({
type: 'post',
url: 'process.php',
data: $("form[name='form2']").serialize(),
success: function (data) {
$('#second').hide();
$('#third').show();
}
});
}
})
});
$(document).ready(function() {
$("form[name='form3']").validate({
rules: {
age: {
required: true,
minlength:3,
maxlength:50
}
},
submitHandler: function() {
$.ajax({
type: 'post',
url: 'process.php',
data: $("form[name='form4']").serialize(),
success: function (data) {
$('#third').hide();
$('#four').show();
}
});
}
})
});
.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin:0 10px;}
.info-timeline ul li span{
position: relative;
border: 2px solid #000;
border-radius: 100%;
width: 45px;
line-height: 40px;
text-align: center;
margin-top: 30px;
color: #000;
z-index: 2;
display: inline-block;
}
.info-timeline ul li span.timeline-circle-active{
background-color: #ff0000;
color: #000;
border: 1px solid #ffff00 !important;
}
.info-timeline ul li a.timeline-text-active{
color: #ff0000 !important;
}
.info-timeline ul li:not(:first-of-type) span:before {
position: absolute;
border: 1px solid #000;
width: 0;
height: 30px;
display: block;
content: '';
left: 50%;
z-index: 1;
top: -32px;
margin-left: -1px;
}
.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}
.info-timeline ul li a{color: #000;margin: 10px;}
#second, #third, #four{
display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="info-timeline">
<ul>
<li><span class="timeline-circle-active">1</span><a href="#" class="timeline-text-active">Button1</a></li>
<li><span>2</span><a href="#">Button2</a></li>
<li><span>3</span><a href="#">Button3</a></li>
<li><span>4</span><a href="#">Button4</a></li>
</ul>
</div>
<div id="first">
<form method="post" action="" name="form1">
<input type="text" name="fname" placeholder="first name">
<button type="submit" class="button-clicked">Button1</button>
</form>
</div>
<div id="second">
<form method="post" action="" name="form2">
<input type="text" name="mname" placeholder="middle name">
<button type="submit" class="button-clicked">Button2</button>
</form>
</div>
<div id="third">
<form method="post" action="" name="form3">
<input type="text" name="lname" placeholder="last name">
<button type="submit" class="button-clicked">Button3</button>
</form>
</div>
<div id="four">
<form method="post" action="" name="form4">
<input type="text" name="age" placeholder="age">
<button type="submit" class="button-clicked">Submit</button>
</form>
</div>
source
share