i would like to click in plus ,then show the next field in every step but my code does not work in third step .is there any method to do these steps for unlimited time?tnx
<html>
<head>
<script>
function showfield(){
document.getElementById("hiddenfield").style.display="block";
}
</script>
</head>
<body>
<div class="form-group" >
<div class="rightbox"> <label for='phone'>Phone1</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone2</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>
<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone3</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>
</body>
</html>
You can use unique id for each hidden field, then send current id to your function as parameter.
function showfield(id) {
document.getElementById(id).style.display="block";
}
Another option is jquery:
$('.plus').on('click', function() {
$(this).parent().next().show();
});
Check out jsfiddle.
As others noted, ID of an element must be unique, you can use class to group similar elements.
What you need to do is to show the first hidden field group,
function showfield() {
var el = document.querySelector(".hiddenfield");
if (el) {
el.classList.remove('hiddenfield')
}
}
.hiddenfield {
display: none;
}
<div class="form-group">
<div class="rightbox">
<label for='phone1'>Phone1</label>
</div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
<div class="form-group hiddenfield">
<div class="rightbox">
<label for='phone2'>Phone2</label>
</div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
<div class="form-group hiddenfield">
<div class="rightbox">
<label for='phone3'>Phone3</label>
</div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
Supported in IE10+
Since you've tagged jquery, you could do away with all those (duplicate ids) and showField() and within doc load add this:
$('.plus').on('click', function() {
$(this).parent().next().show();
});
[Edit: Oh, here's the fiddle]
However, I'm not sure what you want to happen when the third + is clicked as there are no more divs to show.
Change id="hiddenfield" to class="hiddenfield" in all divs and change showfield as below :-
function showfield() {
document.getElementsByClassName("hiddenfield").style.display="block";
}
Note:- Supported Browsers IE9+, Chrome 4+, FF3+.
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
