How to loop through the textboxes in JavaScript

Question

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>

What is wrong with the code you have here? Where do you want to improve? — toing_toing
– toing_toing, Commented Sep 9, 2015 at 7:18
I just want it to be simple. I want this content inside a loop. — Arjun
– Arjun, Commented Sep 9, 2015 at 7:36

Ivan Jovović · Accepted Answer · 2015-09-09 09:37:31Z

3

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/

EDIT based on added HTML in question

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/

edited Sep 9, 2015 at 9:37

answered Sep 9, 2015 at 8:08

Ivan Jovović

5,3185 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arjun Over a year ago

Thankyou. I have edited the code and have entered the whole html. Can you please have a look now?

Arjun Over a year ago

Thanks. But i need the output in the format 'Item # Option #: the value'. I got confused about the item number and option number part. How will I loop those?

Ivan Jovović Over a year ago

Is this fiddle ok: jsfiddle.net/usvLe3r1/2 ? Note that I have altered your html by adding id to button to be able to identify them uniquely. Let me know.

Hoang Nam · Accepted Answer · 2015-09-09 09:34:30Z

1

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.

edited Sep 9, 2015 at 9:34

answered Sep 9, 2015 at 8:30

Hoang Nam

1015 bronze badges

4 Comments

Arjun Over a year ago

Thankyou Hoang Nam.I have edited the code now with my html. Can you please have a look?

Hoang Nam Over a year ago

Hi, because you use jQuery, so I edited your myFunction() method to match the situation.

Arjun Over a year ago

But now it shows 'Item 3 Option 3' instead of 'Item 2 Option 1'

Hoang Nam Over a year ago

I think answer of Mr.Ivan above is better. You can examine it ^_^

Collectives™ on Stack Overflow

How to loop through the textboxes in JavaScript

2 Answers 2

EDIT based on added HTML in question

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT based on added HTML in question

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related