CODEWITHSUNDEEP
javascriptjqueryhtmluser-interface
Arun
Arun

Reputation: 1296

Create two columns(lists) of text boxes using jquery

I am trying to create two columns of text boxes which should look like something like the following image:

enter image description here

But it looks something like this:

enter image description here

I used the following code:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DHTML with jQuery</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <button id="btnStart">start</button>
    <div id="container"></div>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="../js/script.js"></script>
</body>
</html>

HTML from the DOM inspector

<html><head>
    <script src="/iScorecard/resources/js/jquery.1.10.2.min.js"></script><style type="text/css"></style>

</head>
<body>
    <button id="btnStart" style="display: none;">start</button>
    <div id="container">
    <input type="text" id="txtPlayerId1" placeholder="player 1">
    <input type="text" id="txtPlayerId11" placeholder="0">
    <input type="text" id="txtPlayerId2" placeholder="player 2">
    <input type="text" id="txtPlayerId12" placeholder="0">
    <input type="text" id="txtPlayerId3" placeholder="player 3">
    <input type="text" id="txtPlayerId13" placeholder="0">
    <input type="text" id="txtPlayerId4" placeholder="player 4">
    <input type="text" id="txtPlayerId14" placeholder="0">
    <input type="text" id="txtPlayerId5" placeholder="player 5">
    <input type="text" id="txtPlayerId15" placeholder="0">
    <input type="text" id="txtPlayerId6" placeholder="player 6">
    <input type="text" id="txtPlayerId16" placeholder="0">
    <input type="text" id="txtPlayerId7" placeholder="player 7">
    <input type="text" id="txtPlayerId17" placeholder="0">
    <input type="text" id="txtPlayerId8" placeholder="player 8">
    <input type="text" id="txtPlayerId18" placeholder="0">
    <input type="text" id="txtPlayerId9" placeholder="player 9">
    <input type="text" id="txtPlayerId19" placeholder="0">
    <input type="text" id="txtPlayerId10" placeholder="player 10">
    <input type="text" id="txtPlayerId110" placeholder="0">
    <input type="text" id="txtPlayerId11" placeholder="player 11">
    <input type="text" id="txtPlayerId111" placeholder="0"></div>

    <script type="text/javascript" src="/iScorecard/resources/js/dataTextBoxes.js"></script>
    <link rel="stylesheet" href="/iScorecard/resources/css/style.css">

</body></html>

JS

    function createTextBoxes(event, txtBoxCount) {
    var iCounter = 0,
        playerText = null,
        scoreText = null;

    for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
        playerText = document.createElement('input');
        scoreText = document.createElement('input');
        $(playerText).attr('type', 'text');
        $(scoreText).attr('type', 'text');
        $(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
        $(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
        $(playerText).attr('placeholder', 'player ' + (iCounter + 1));
        $(scoreText).attr('placeholder', '0');
        $('#container').append(playerText);
        $('#container').append(scoreText);
    }
}

$("#btnStart").on('click', function(event) {
    createTextBoxes(event, 11);
    $("#btnStart").hide();
});

How should I modify the code to create the list of text boxes as shown in the mockup screen.

Upvotes: 0

Views: 460

Answers (1)

Chathuranga K
Chathuranga K

Reputation: 226

Yo can accomplish this using css. I can will give you 3 options.

Option 1 - Using only css (with inline-block)

<style type="text/css">
#container{
width:500px;
}
#container input[type="text"]{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>

Above css will make all the input type=text elements as inline-block and take the input width as 40% from parent container. Even you change the main container width. inner elements won't affect. it will always show as two columns

Option 2 - Using only css (with float)

<style type="text/css">
#container{
width:500px;
border:1px solid red;
}
#container input[type="text"]{
display:block;
float:left;
width:40%;
margin-left:5%;
}
.clearfix{
clear: both;
} 
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>

In HTML I am adding extra class for the container DIV

<div id="container" class="clearfix">

This option is using float instead of inline-block. Here I have added an extra class .clearfix whenever we do a float we need to clear it after the floating elements. otherwise it will affect for below elements as well

Option 3 - Adding specific class to the player input box and score input box

<style type="text/css">
#container{
width:500px;
}
#container .player,
#container .score{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>

<script type="text/javascript">
function createTextBoxes(event, txtBoxCount) {
  var iCounter = 0,
  playerText = null,
  scoreText = null;

  for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
    playerText = document.createElement('input');
    scoreText = document.createElement('input');
    $(playerText).attr('type', 'text');
    $(scoreText).attr('type', 'text');
    $(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
    $(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
    $(playerText).attr('placeholder', 'player ' + (iCounter + 1));
    $(scoreText).attr('placeholder', '0');

    $(playerText).attr('class', 'player');
    $(scoreText).attr('class', 'score');

    $('#container').append(playerText);
    $('#container').append(scoreText);
  }
}
</script>

Upvotes: 2

Related Questions