0

I was wondering if their is an easier way to do this; I want to select a number one through twelve from a dropdown and display that many textboxes and their labels this is how im setting it up.

<script>
$(document).ready(function() {
        $('#one').hide();
        $('#two').hide();
        $('#three').hide();
        $('#four').hide();
        $('#five').hide();
        $('#six').hide();
        $('#seven').hide();
        $('#eight').hide();
        $('#nine').hide();
        $('#ten').hide();
        $('#eleven').hide();
        $('#twelve').hide();
    $('#quantity').change(function() {
        dropdown = $('#quantity').val(); 
        if (dropdown == '1')
        {
           $('#one').show();
        }
        if (dropdown == '2')
        {
         $('#one').show();
         $('#two').show();
        }
        if (dropdown == '3')
        {
         $('#one').show();
         $('#two').show();
         $('#three').show();
        }
        if (dropdown == '4')
        {
         $('#one').show();
         $('#two').show();
         $('#three').show();
         $('#four').show();
        }
    });
});
</script>
</head>
<body>
<form id="packForm" action="" method="post">
<fieldset>
<legend>Packout</legend>
         <ul>
            <li>
            <label>How many units to packout?:</label>
            <select  id="quantity" name="quantity" class="validate[required]">
                    <option value="">Choose a quantity...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
            </select>
            </li>
        <li id="one" >
            <label>ISN 1:</label>
            <input  type="text" id="ISN1" name="ISN1" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="two">
            <label>ISN 2:</label>
            <input  type="text" id="ISN2" name="ISN2" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="three">
            <label>ISN 3:</label>
            <input  type="text" id="ISN3" name="ISN3" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="four">
            <label>ISN 4:</label>
            <input  type="text" id="ISN4" name="ISN4" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="five">
            <label>ISN 5:</label>
            <input  type="text" id="ISN5" name="ISN5" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="six">
            <label>ISN 6:</label>
            <input  type="text" id="ISN6" name="ISN6" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="seven">
            <label>ISN 7:</label>
            <input  type="text" id="ISN7" name="ISN7" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
                <li id="eight">
            <label>ISN 8:</label>
            <input  type="text" id="ISN8" name="ISN8" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="nine">
            <label>ISN 9:</label>
            <input  type="text" id="ISN9" name="ISN9" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="ten">
            <label>ISN 10:</label>
            <input  type="text" id="ISN10" name="ISN10" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="eleven">
            <label>ISN 11:</label>
            <input  type="text" id="ISN11" name="ISN11" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

            <li id="twelve">
            <label>ISN 12:</label>
            <input  type="text" id="ISN12" name="ISN12" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>

        </ul>
        </fieldset>
        </form>
</body>

</html>
4
Contributors
11
Replies
65
Views
3 Years
Discussion Span
Last Post by brandon66
Featured Replies
  • 2

    definately the loop is the way to go.... to give you a hint... you may want to re-ID those `li` elements and give new IDs such as li1, li2, li3, etc... there are different methods to approach this problem, but the various options will all use some form of a … Read More

  • 2

    Ok brandon66, one way to approach this is to first hide all of the textboxes. you can do this by adding a class and setting this class to display:none; In the loop, you simply show each textbox by ID. since you are using a variable in your loop, you can … Read More

0

I was thinking that but im not too familiar with javascript/jquery; learning though.

2

definately the loop is the way to go.... to give you a hint... you may want to re-ID those li elements and give new IDs such as li1, li2, li3, etc...

there are different methods to approach this problem, but the various options will all use some form of a loop to make this more effecient. What if you had 100 options? This manual show/hide isnt scalable.

Votes + Comments
Exactly what I was thinking
0

Would something like this work

While (Selected).val() <> 0{



}

or

do
   {



   }
 while ((#selected) > 0);

Edited by brandon66

0

What you need to do is reference your ids as actual numbers.

For example id='1', id='2'

This will make it easy to loop and select any forseen number.

Edited by iamthwee

0

so this is what I have so far might need a little schooling with the javascript loops to do this

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="Styles/default.css"/>
<link rel="stylesheet" href="Scripts/posabsolute-jQuery-Validation-Engine/css/validationEngine.jquery.css"/>
<script src="Scripts/posabsolute-jQuery-Validation-Engine/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/posabsolute-jQuery-Validation-Engine/js/languages/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="Scripts/posabsolute-jQuery-Validation-Engine/js/jquery.validationEngine.js" type="text/javascript"></script>
<title>Packout</title>
<script>
        jQuery(document).ready(function(){
            // binds form submission and fields to the validation engine
            jQuery("#packForm").validationEngine();
        });     
        </script>
<script>
//loop here to hide/show li based on value selected in dropdown


</script>
</head>
<body>
<form id="packForm" action="" method="post">
<fieldset>
<legend>Packout</legend>
         <ul>
            <li>
            <label>How many units to packout?:</label>
            <select  id="quantity" name="quantity" class="validate[required]">
                    <option value="">Choose a quantity...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
            </select>
            </li>
        <li id="1" >
            <label>ISN 1:</label>
            <input  type="text" id="ISN1" name="ISN1" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="2">
            <label>ISN 2:</label>
            <input  type="text" id="ISN2" name="ISN2" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="3">
            <label>ISN 3:</label>
            <input  type="text" id="ISN3" name="ISN3" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="4">
            <label>ISN 4:</label>
            <input  type="text" id="ISN4" name="ISN4" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="5">
            <label>ISN 5:</label>
            <input  type="text" id="ISN5" name="ISN5" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="6">
            <label>ISN 6:</label>
            <input  type="text" id="ISN6" name="ISN6" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="7">
            <label>ISN 7:</label>
            <input  type="text" id="ISN7" name="ISN7" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="8">
            <label>ISN 8:</label>
            <input  type="text" id="ISN8" name="ISN8" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="9">
            <label>ISN 9:</label>
            <input  type="text" id="ISN9" name="ISN9" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="10">
            <label>ISN 10:</label>
            <input  type="text" id="ISN10" name="ISN10" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="11">
            <label>ISN 11:</label>
            <input  type="text" id="ISN11" name="ISN11" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>
            <li id="12">
            <label>ISN 12:</label>
            <input  type="text" id="ISN12" name="ISN12" maxlength="12"  class="validate[required],validate[custom[hex]]"/></li>   
        </ul>
        </fieldset>
        <p>
        <input type="submit" id="sub" value="Submit"/>
        <input type="hidden" name="addMe" value="True" />
        </p> 
        </form>
</body>
</html>
2

Ok brandon66, one way to approach this is to first hide all of the textboxes. you can do this by adding a class and setting this class to display:none;

In the loop, you simply show each textbox by ID. since you are using a variable in your loop, you can use that variable in your block that shows the textbox.

here is an example that you can look at and see a working model using a loop to show textboxes based on the dropdown value.

http://jsfiddle.net/aGdtg/1/

Votes + Comments
The script doesnt seem to work for me on jfiddle for some reason
0

I guess it just happened to be with the jquery version; Thanks for all your help everyone! taught me a little bit more!

Edited by brandon66

This question has already been answered. 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.