Help with script

Question

brandon66 0 Expert in Progress

11 Years Ago

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>

javascript

4 Contributors
11 Replies
277 Views
6 Days Discussion Span
Latest Post 11 Years Ago Latest Post by brandon66

iamthwee

11 Years Ago

How about using a loop?

JorgeM 958 Problem Solver

11 Years Ago

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.

iamthwee commented: Exactly what I was thinking +14

JorgeM 958 Problem Solver

11 Years Ago

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/

brandon66 commented: The script doesnt seem to work for me on jfiddle for some reason +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

The script doesnt seem to work for me on jfiddle for some reason

brandon66 0 Expert in Progress · Answer 1 · 2013-08-16T21:28:22+00:00

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

brandon66 0 Expert in Progress · Answer 2 · 2013-08-16T21:41:12+00:00

Would something like this work

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



}

or

do
   {



   }
 while ((#selected) > 0);

iamthwee · Answer 3 · 2013-08-16T22:23:20+00:00

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.

brandon66 0 Expert in Progress · Answer 4 · 2013-08-19T14:17:17+00:00

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>

brandon66 0 Expert in Progress · Answer 5 · 2013-08-22T19:50:06+00:00

does anyone have an idea on how to loop this?

iamthwee · Answer 6 · 2013-08-22T22:37:28+00:00

http://learn.jquery.com/javascript-101/loops/

paulkd 59 Newbie Poster · Answer 7 · 2013-08-23T09:02:51+00:00

I don't think you need to loop. I haven't had time to test but this page looks like you could adapt JorgeM's code and simply select the textboxes.

http://css-tricks.com/useful-nth-child-recipies/

brandon66 0 Expert in Progress · Answer 8 · 2013-08-23T18:55:31+00:00

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