Reputation: 21
I am trying to make an a form with textboxes. when I check the checkboxes a text box will appear and I can input values. when I click the submit button it should give an alert showing only the values which I have entered.
How to use a loop for this content?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="../../../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="../../../js/bootstrap.min.js"></script>
<script src="../../../js/jquery-1.11.2.min.js"></script>
<script src="../../../js/collapse.js"></script>
</head>
<body>
<div class="container">
<script>
var i;
var j;
</script>
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo1">Item 1</button>
<div id="demo1" class="collapse ">
<div class="checkbox">
<label data-toggle="collapse" data-target="#collapseOne">
<input type="checkbox" id="check1"/> Option 1
</label>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox1"></input>
</div>
</div>
</div>
</div>
<div class="checkbox" j="2">
<label data-toggle="collapse" data-target="#collapseTwo">
<input type="checkbox" id="check2"/> Option 2
</label>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox2"></input>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo2" i="2">Item 2</button>
<div id="demo2" class="collapse in">
<div class="checkbox" j="1">
<label data-toggle="collapse" data-target="#collapseThree">
<input type="checkbox" id="check3"/> Option 1
</label>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox3" ></input>
</div>
</div>
</div>
</div>
<div class="checkbox" j="2">
<label data-toggle="collapse" data-target="#collapseFour">
<input type="checkbox" id="check4"/> Option 2
</label>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="driving-license-kind">
<div style="padding:16px">
No. of people : <input type="text" id="textbox4"></input>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" value="submit" onclick="myFunction();"/>
<script>
function myFunction() {
for(
if (document.getElementById("check1").checked){
var x = document.getElementById("textbox1");
var content= "Item 1 Option 1: "+ x.value;
document.write(content);
}
if (document.getElementById("check2").checked){
var y = document.getElementById("textbox2");
var content= "Item 1 Option 2: "+ y.value;
document.write(content);
}
if (document.getElementById("check3").checked){
var z = document.getElementById("textbox3");
var content= "Item 2 Option 1: "+ z.value;
document.write(content);
}
if (document.getElementById("check4").checked){
var w = document.getElementById("textbox4");
var content= "Item 2 Option 2 : "+ w.value;
document.write(content);
}
}
</script>
</body>
</html>
Upvotes: 1
Views: 6568
Reputation: 5298
If your html looks like this, and you do not have other <input type="text">
tags on your form:
<input type="checkbox" id="check1" value="text1" onclick='showHide(this);' /><input type="text" id="text1" style="display:none"/> <br>
<input type="checkbox" id="check2" value="text2" onclick='showHide(this);'/><input type="text" id="text2" style="display:none"/> <br>
<input type="checkbox" id="check3" value="text3" onclick='showHide(this);'/><input type="text" id="text3" style="display:none"/> <br>
<input type="checkbox" id="check4" value="text4" onclick='showHide(this);'/><input type="text" id="text4" style="display:none"/> <br>
<input type="button" onclick='alertChecked()' value='alert checked'/>
Then you can use javascript
solution:
function showHide(source){
var textBox = document.getElementById(source.value);
if (isHidden(textBox)){
textBox.style.display = 'inline';
}
else{
textBox.style.display = 'none';
}
}
function alertChecked(){
var text = '';
var inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if (inputs[index].type == 'text' && isHidden(inputs[index]) === false){
text += inputs[index].value;
}
}
alert(text);
}
function isHidden(el) {
return (el.offsetParent === null)
}
Demo fiddle: http://jsfiddle.net/ggcse3zz/1/
Or jQuery
solution:
function showHide(source){
$('#'+source.value).toggle();
}
function alertChecked(){
var text = '';
$('input[type=text]:visible').each(function(){
text += $(this).val();
});
alert(text);
}
Demo fiddle: http://jsfiddle.net/ggcse3zz/
Based on your html
, you can use array of ids to find all yours input
tags and loop them:
function myFunction(){
var text = '';
var textboxes = ["textbox1", "textbox2", "textbox3", "textbox4"];
for (index = 0; index < textboxes.length; ++index) {
var input = document.getElementById(textboxes[index]);
if (isHidden(input) === false){
text += input.value;
}
}
alert(text);
}
function isHidden(el) {
return (el.offsetParent === null)
}
Note that this javascript
relies on the visibility of the input
tag, not if checkbox
is checked or not.
Demo fiddle: http://jsfiddle.net/usvLe3r1/
Upvotes: 3
Reputation: 101
You should enhance myFunction() method:
function myFunction() {
var $checkboxes = $("input[id*='check']");
for (i = 0; i <= $checkboxes.length; i++) {
if ($checkboxes.get(i).checked) {
var orderNo = i + 1;
var content= "Item " + orderNo + " Option " + orderNo + ": "+ $("#textbox"+ orderNo).val();
alert(content);
}
}
}
I hope it's help.
Upvotes: 1