CODEWITHSUNDEEP
javascriptjquerydynamic
Harsh
Harsh

Reputation: 47

How can I perform the same action multiple times based on a number selected in a drop down list?

How can I generate multiple sets of dropdowns and text type input fields (where one set consists of 3 dropdowns and 1 input type=text), based on number of times it has to be generated is by selecting a number from another dropdown.

my code is this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add New Detail</title>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>

<style type="text/css">
#main {
    background-color:#0CF;
    width:600px;
    padding:25px 0;
}

#drop_box_set {
    background:#666;
    width:90%;
    color:#FFF;
    padding:25px 0;
}

</style>
<!------------------------------------------------------------------------------------------------>
<!--------------------------- CHANGE OPTIONS ON CHILD DROPDOWN SCRIPT ---------------------------->
<!------------------------------------------------------------------------------------------------>

<script type="text/javascript">
function setOptions(chosen, selbox) {

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.add_new_customer_form.optthree),5);
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','11');
  selbox.options[selbox.options.length] = new Option('first choice - option two','12');
setTimeout(setOptions('11',document.add_new_customer_form.optthree),5);
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','21');
  selbox.options[selbox.options.length] = new Option('second choice - option two','22');
setTimeout(setOptions('21',document.add_new_customer_form.optthree),5);
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','31');
  selbox.options[selbox.options.length] = new Option('third choice - option two','32');
setTimeout(setOptions('31',document.add_new_customer_form.optthree),5);
}
if (chosen == "11") {
  selbox.options[selbox.options.length] = new Option('first choice - option one - sub one','111');
  selbox.options[selbox.options.length] = new Option('first choice - option one - sub two','112');
}
if (chosen == "12") {
  selbox.options[selbox.options.length] = new Option('first choice - option two - sub one','121');
  selbox.options[selbox.options.length] = new Option('first choice - option two - sub two','122');
}
if (chosen == "21") {
  selbox.options[selbox.options.length] = new Option('second choice - option one - sub one','211');
  selbox.options[selbox.options.length] = new Option('second choice - option one - sub two','212');
}
if (chosen == "22") {
  selbox.options[selbox.options.length] = new Option('second choice - option two - sub one','221');
  selbox.options[selbox.options.length] = new Option('second choice - option two - sub two','222');
}
if (chosen == "31") {
  selbox.options[selbox.options.length] = new Option('third choice - option one - sub one','311');
  selbox.options[selbox.options.length] = new Option('third choice - option one - sub two','312');
}
if (chosen == "32") {
  selbox.options[selbox.options.length] = new Option('third choice - option two - sub one','321');
  selbox.options[selbox.options.length] = new Option('third choice - option two - sub two','322');
}
}
</script>

</head>

<body>

<div align="center"><!--DIV ALIGNMENT CENTER START-->

<div id="main"><!--DIV MAIN START-->

<form name="add_new_customer_form" method="post" action="">

<label class="description">Number Of Computer Devices : </label>

            <select name="element_19" class="short_select"> 
                <option value="" selected="selected"></option>
                        <option value="01" >01</option>
                        <option value="02" >02</option>
                        <option value="03" >03</option>
                        <option value="04" >04</option>
                        <option value="05" >05</option>
                        <option value="06" >06</option>
                        <option value="07" >07</option>
                        <option value="08" >08</option>
                        <option value="09" >09</option>
                        <option value="10" >10</option>
                        <option value="11" >11</option>
                        <option value="12" >12</option>
                        <option value="13" >13</option>
                        <option value="14" >14</option>
                        <option value="15" >15</option>

        </select>
<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Device Type : </label>

            <select name="optone" class="element select medium" style="width:200px;" onchange="setOptions(document.add_new_customer_form.optone.options[document.add_new_customer_form.optone.selectedIndex].value,document.add_new_customer_form.opttwo);">
                <option value=" " selected="selected"> </option>
                        <option value="1">First Choice</option>
                        <option value="2">Second Choice</option>
                        <option value="3">Third Choice</option>
            </select>

</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->

<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Device Brand : </label>

            <select name="opttwo" class="element select medium" style="width:200px;" onchange="setOptions(document.add_new_customer_form.opttwo.options[document.add_new_customer_form.opttwo.selectedIndex].value,document.add_new_customer_form.optthree);">
                <option value=" " selected="selected"></option>
            </select>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->

<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Operating System : </label>

            <select name="optthree" class="element select medium" style="width:200px;">
                <option value=" " selected="selected"></option>
            </select>

</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->

<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Serial Number : </label>

            <input name="element_10" class="element text medium" type="text" maxlength="255" value=""/>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->
</form>
</div><!--DIV MAIN ENDS-->
</div><!--DIV ALIGNMENT CENTER ENDS-->

</body>
</html>

Also, here is a link to jsFiddle I came across while searching for a solution.

In this above jsFiddle if one clicks on "add" button it generates a set of 02 dropdowns + 01 type=text input fields and a REMOVE button, in case some one generated more than requirement.

This is what exactly I need, But the difference is that I need it to be a automated process.

What I need is (according to my code):

If 05 is selected from the fist dropdown saying "Number of Computer Devices", it should generate 05 sets of dropboxes and type=text inputs and remove buttons.

It should generate 05 sets, where 01 set = 03 dropdowns + 01 type=text input field and a remove button if generated more than requiremt.

Upvotes: 2

Views: 806

Answers (3)

yodog
yodog

Reputation: 6242

Add a loop to your code.

Like this

JS

$(function() {
    $("input[type=button][value=Add]").click(function(e) {
        for (i = 0; i < document.getElementById('sel').value; i++) {
            e.preventDefault();
            var newDiv = $("<div>").appendTo("#div");
            $("<input>").attr("name", "a").appendTo(newDiv);
            $("<input>").attr("name", "b").appendTo(newDiv);
            $("<select>").attr("name", "c").appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<select>").attr("name", "d").appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<button>").text("Remove").appendTo(newDiv).click(function(e) {
                e.preventDefault();
                newDiv.remove();
            })
        }
    })
})

HTML

<form>
    <div id="div"></div>
    <select id="sel">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    <input type="button" value="Add" />
</form>

See it working here: http://jsfiddle.net/RASG/bYBPD/

Upvotes: 1

mbeasley
mbeasley

Reputation: 4874

I'm not sure I understand all of your code, but let me see if I understand your problem:

You have a form that you want users to select a number of devices from a drop down box. After the user selects a number, you want a corresponding number of form elements to be populated.

Why don't you merge some of your code in your fiddle with this example.

Upvotes: 0

RobG
RobG

Reputation: 147483

Just a tip: you can replace:

> <select name="optone" ... onchange="setOptions(document.add_new_customer_form.optone.options[document.add_new_customer_form.optone.selectedIndex].value,document.add_new_customer_form.opttwo);">

with:

<select name="optone" ... onchange="setOptions(this.value, this.form.opttwo)">

Similarly for the other listener.

I'd also suggest you get rid of the XHTML transitional DOCTYPE, clearly you aren't transitioning to XHTML (it's been 12 years since XHTML 1.0 and very, very few web sites serve documents as XML, regardless of the DOCTYPE), just use DOCTYPE html.

Upvotes: 0

Related Questions