CODEWITHSUNDEEP
javascripthtmlcombobox
ediblecode
ediblecode

Reputation: 11971

Change HTML layout based on combo box selection

I am designing a HTML web page which allows the user to query an xml file. Basically, they choose the column they would like to query, the search type and then type in their value. However, if they choose between in the combo box, then after the first text input box, I would like an & label, and another input box to appear.

The current code is below:

<form name="myform" action="podcatalog.xml" method="POST">
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value="author">Author</option>
<option value="title">Title</option>
<option value="pages">Pages</option>
<option value="year">Year</option>
</select>

<select id="ddl2" onchange="configureTextFields(this, 'querystring')">
</select>

<input type="text" name="querystring"/>

<input type="submit" value="Search"/>

</form>

<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
    var string = new Array('Contains', 'Equals');
    var number = new Array('=', '<', '>', 'Between', '!=' );

    switch (ddl1.value) {
        case 'author':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < string.length; i++) {
                createOption(document.getElementById(ddl2), string[i], string[i]);
            }
            break;

        case 'title':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < string.length; i++) {
                createOption(document.getElementById(ddl2), string[i], string[i]);
            }
            break;

        case 'pages':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < number.length; i++) {
                createOption(document.getElementById(ddl2), number[i], number[i]);
            }
            break;

        case 'year':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < number.length; i++) {
                createOption(document.getElementById(ddl2), number[i], number[i]);
            }
            break;

            default:
                document.getElementById(ddl2).options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

function configureTextFields(ddl2) {
    switch (ddl2.value) {
        case 'Between':

        // Need code here?

Upvotes: 0

Views: 3101

Answers (1)

Robert
Robert

Reputation: 3074

You would need to add a div after the first input box with a css class on it to hide the div. Then when your configureTextFields(this, 'querystring') fires if the item chosen is between then you'll use javascript to remove the css class.

Personally I'd recommend looking into using jquery for this. Here is a thread from another forum that is doing something similar.

http://www.webdeveloper.com/forum/showthread.php?t=194923

If your not familiar with jquery you will want to check it out, it can make your life a whole lot easier. http://jquery.com/

Upvotes: 3

Related Questions