5
Contributors
16
Replies
91
Views
3 Years
Discussion Span
Last Post by designershiv
0

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?

0

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.

0

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?

0

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.

0

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?

Edited by LastMitch

0

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.

0

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>

Edited by Bachu: correction

0

@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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.