This (http://jsfiddle.net/dPrXM/) is supposed to make two more fields appear when you click the more button, but it is unfortunately not working. I cannot for the life of me figure out why, but I am convinced that it's something very simple and probably pretty stupid.

Member Avatar

This () is supposed to make two more fields appear when you click the more button, but it is unfortunately not working. I cannot for the life of me figure out why, but I am convinced that it's something very simple and probably pretty stupid.

@monkeytherat

Did you write code?

Sorry, I don't understand what you are saying. The link you sent me isn't quite what I'm looking for which is in part why I wrote my own. I don't want to deal with creating and deleting elements, jsut making them visible / invisible.

Member Avatar

The link you sent me isn't quite what I'm looking for which is in part why I wrote my own. I don't want to deal with creating and deleting elements, jsut making them visible / invisible.

@monkeytherat

This what you wrote in your first paragraph:

This () is supposed to make two more fields appear when you click the more button. 

You didn't explain it well regarding about visible/invisible nor what you post in the first paragraph?

Have you try this:

http://www.javascriptkit.com/javatutors/dom3.shtml#.Ukc1XIbYdHM

that is how to display visible/invisible things.

Is that what you want?

Sorry for being unclear. What I am trying to do is make it so that when I press the button, the first pair of input fields that is not visible (i.e. display = none) should become visible (i.e. display = tr). I tried to just loop through the elements and find the first one that is invisible and then change its visibility, but that seems not to be working for some reason. I was just looking for an explanation as to what is wrong with my code since I am new to javascript and from similar examples I have seen, nothing appears to be wrong.

Member Avatar

I was just looking for an explanation as to what is wrong with my code since I am new to javascript and from similar examples I have seen, nothing appears to be wrong.

I don't understand your code clearly.

function display(){
for (var i = 1; i < 8; i++){
    var id = "courses" + i.toString();
    if (document.getElementById(id).style.display == "none"){
        var elem = document.getElementById(id);
        elem.style.display = "tr";
        break;
    }
}

}

If you want to display an element and make it visible & then invisible then used a statement.

When you used a loop, it shows that you want to add the rows.

If you want to add rows after you click the button, then those 2 rows will appear after each click.

That's the reason why I ask what you are trying to do?

I use the loop to go through the rows and choose the first one that is invisible, then make it visible and break the loop.

have you tried elem.style.display = "block"; instead of "tr"?

Hai;

This code also works

<body>
<style type="text/css">
table, th, td{
    margin: 0;
    font: 16px helvetica, sans-serif;
    border: 1px solid black;
}
tr {
    display: block;
}
</style>
    <form name="teacher" method="post" action="teacher.php">
        <table>
            <tr id="name">
                <td>
                    <label for="first_name">First Name</label>
                </td>
                <td>
                    <input type="text" name="first_name">
                </td>
                <td>
                    <label for="last_name">Last Name</label>
                </td>
                <td>
                    <input type="text" name="last_name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="course1">Course 1</label>
                </td>
                <td>
                    <input type="text" name="course1">
                </td>
                <td>
                    <label for="course2">Course 2</label>
                </td>
                <td>
                    <input type="text" name="course2">
                </td>
            </tr>
            <tr id="courses1" style="display:none;" >
                <td>
                    <label for="course3">Course 3</label>
                </td>
                <td>
                    <input type="text" name="course2">
                </td>
                <td>
                    <label for="course4">Course 4</label>
                </td>
                <td>
                    <input type="text" name="course4">
                </td>
            </tr>
            <tr id="courses2" style="display:none;" >
                <td>
                    <label for="course5">Course 5</label>
                </td>
                <td>
                    <input type="text" name="course5">
                </td>
                <td>
                    <label for="course6">Course 6</label>
                </td>
                <td>
                    <input type="text" name="course6">
                </td>
            </tr>
            <tr id="courses3" style="display:none;">
                <td>
                    <label for="course7">Course 7</label>
                </td>
                <td>
                    <input type="text" name="course7">
                </td>
                <td>
                    <label for="course8">Course 8</label>
                </td>
                <td>
                    <input type="text" name="course8">
                </td>
            </tr>
            <tr id="courses4" style="display:none;">
                <td>
                    <label for="course9">Course 9</label>
                </td>
                <td>
                    <input type="text" name="course9">
                </td>
                <td>
                    <label for="course10">Course 10</label>
                </td>
                <td>
                    <input type="text" name="course10">
                </td>
            </tr>
            <tr id="courses5" style="display:none;">
                <td>
                    <label for="course11">Course 11</label>
                </td>
                <td>
                    <input type="text" name="course11">
                </td>
                <td>
                    <label for="course12">Course 12</label>
                </td>
                <td>
                    <input type="text" name="course12">
                </td>
            </tr>
            <tr id="courses6" style="display:none;">
                <td>
                    <label for="course13">Course 13</label>
                </td>
                <td>
                    <input type="text" name="course13">
                </td>
                <td>
                    <label for="course14">Course 14</label>
                </td>
                <td>
                    <input type="text" name="course14">
                </td>
            </tr>
            <tr id="courses7" style="display:none;">
                <td>
                    <label for="course15">Course 15</label>
                </td>
                <td>
                    <input type="text" name="course15">
                </td>
                <td>
                    <label for="course16">Course 16</label>
                </td>
                <td>
                    <input type="text" name="course16">
                </td>
            </tr>
            <tr>
                <td>
                    <button onclick="display();" type="button" id="moreBtn">More</button>
                </td>
            </tr>
        </table>
    </form>
<script type="text/javascript">
function display(){
    for (var i = 1; i < 8; i++){
        var id = "courses" + i.toString();
        if (document.getElementById(id).style.display == "none"){
            var elem = document.getElementById(id);
            elem.style.display = "block";
            break;
        }
    }

}
</script>    
</body>

OR

I did this with another methode. Please check the example below.

<body>
<style type="text/css">
table, th, td{
    margin: 0;
    font: 16px helvetica, sans-serif;
    border: 1px solid black;
}
tr {
    display: block;
}
</style>
    <form name="teacher" method="post" action="teacher.php">
        <table>
            <tr id="name">
                <td>
                    <label for="first_name">First Name</label>
                </td>
                <td>
                    <input type="text" name="first_name">
                </td>
                <td>
                    <label for="last_name">Last Name</label>
                </td>
                <td>
                    <input type="text" name="last_name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="course1">Course 1</label>
                </td>
                <td>
                    <input type="text" name="course1">
                </td>
                <td>
                    <label for="course2">Course 2</label>
                </td>
                <td>
                    <input type="text" name="course2">
                </td>
            </tr>
            <tr id="courses1" style="display:none;" >
                <td>
                    <label for="course3">Course 3</label>
                </td>
                <td>
                    <input type="text" name="course2">
                </td>
                <td>
                    <label for="course4">Course 4</label>
                </td>
                <td>
                    <input type="text" name="course4">
                </td>
            </tr>
            <tr id="courses2" style="display:none;" >
                <td>
                    <label for="course5">Course 5</label>
                </td>
                <td>
                    <input type="text" name="course5">
                </td>
                <td>
                    <label for="course6">Course 6</label>
                </td>
                <td>
                    <input type="text" name="course6">
                </td>
            </tr>
            <tr id="courses3" style="display:none;">
                <td>
                    <label for="course7">Course 7</label>
                </td>
                <td>
                    <input type="text" name="course7">
                </td>
                <td>
                    <label for="course8">Course 8</label>
                </td>
                <td>
                    <input type="text" name="course8">
                </td>
            </tr>
            <tr id="courses4" style="display:none;">
                <td>
                    <label for="course9">Course 9</label>
                </td>
                <td>
                    <input type="text" name="course9">
                </td>
                <td>
                    <label for="course10">Course 10</label>
                </td>
                <td>
                    <input type="text" name="course10">
                </td>
            </tr>
            <tr id="courses5" style="display:none;">
                <td>
                    <label for="course11">Course 11</label>
                </td>
                <td>
                    <input type="text" name="course11">
                </td>
                <td>
                    <label for="course12">Course 12</label>
                </td>
                <td>
                    <input type="text" name="course12">
                </td>
            </tr>
            <tr id="courses6" style="display:none;">
                <td>
                    <label for="course13">Course 13</label>
                </td>
                <td>
                    <input type="text" name="course13">
                </td>
                <td>
                    <label for="course14">Course 14</label>
                </td>
                <td>
                    <input type="text" name="course14">
                </td>
            </tr>
            <tr id="courses7" style="display:none;">
                <td>
                    <label for="course15">Course 15</label>
                </td>
                <td>
                    <input type="text" name="course15">
                </td>
                <td>
                    <label for="course16">Course 16</label>
                </td>
                <td>
                    <input type="text" name="course16">
                </td>
            </tr>
            <tr>
                <td>
                    <button onclick="display(index);" type="button" id="moreBtn">More</button>
                </td>
            </tr>
        </table>
    </form>
<script type="text/javascript">
var index=0;
function display(val) {
    index = val+1;
    document.getElementById("courses"+index).style.display="block";
    if(index>=7) document.getElementById("moreBtn").style.display="none";
}
</script>    
</body>

This can simply done using jQuery correct me if am wrong

@Bachov Neither of those methods works :/

@designershiv Possibly, but I don't know jQuery. I don't see why this can't be done with my simple 8 or so line function, though, no need to get into jQuery.

Can no one really help with this? It seems like it should be trivial...

@monkeytherat you are right. your script is working fine for me but not fiddle.