CODEWITHSUNDEEP
javascriptjqueryhtmlcss
krayzk
krayzk

Reputation: 927

Dynamically creating complex select objects in a web form

I am designing a webform that may capture anywhere from 1 to 150 rows of data giving definitions to what type of data is provided in a given row of a csv. These rows of data are all exactly same but I do not know how many of them will be used at the outset. I would like to start with one row and let the end user click an add button to add a new row. On the W-3 schools website there was a small tutorial on how to do this: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create but there are some problems I am seeing. first, it is buggy. If you go to the link and click the 'try it' button it will create a simple select dropdown. Wonderful! However, If you click it again it then creates a blank one, with every subsequent click creating the same. The other problem is that the select element I would need to use is huge (160 possible options) and uses optgroups to keep it separated and intuitive here is a sample:

<select name="data_value" id="data_value_selector">
    <optgroup label="Entity Provider">
        <option style="margin-left:12px;" value="name">Name</option>
        <option style="margin-left:12px;" value="dba">DBA</option>
        <option style="margin-left:12px;" value="facility_type">Facility Type</option>
    </optgroup>

    <optgroup label="Individual Provider"></optgroup>
        <optgroup style="margin-left:12px;" label="Name">
            <option value="full_name">Full Name</option>
            <option value="name_prefix">Prefix</option>
            <option value="first_name">First Name</option>
            <option value="middle_name">Middle Name</option>
            <option value="last_name">Last Name</option>
            <option value="name_suffix">Suffix</option>
            <option value="pro_suffix">Professional Suffix</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Birth Date">
            <option value="full_birth_date">Full Birth Date</option>
            <option value="day_of_birth">Day Of Birth</option>
            <option value="month_of_birth">Month Of Birth</option>
            <option value="year_of_birth">Year Of Birth</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Education">
            <option value="education_institution">Education Institution</option>
            <option value="education_city">Education City</option>
            <option value="education_county">Education County</option>
            <option value="education_state">Education State</option>
            <option value="education_country">Education Country</option>
            <option value="education_start_date">Education Start Date</option>
            <option value="education_end_date">Education End Date</option>
            <option value="graduation_date">Graduation Date</option>
            <option value="degree" >Degree</option>
        </optgroup>

    <optgroup label="Provider Information"></optgroup>
        <optgroup style="margin-left:12px;" label="Address">
            <option value="full_address">Full Address</option>
            <option value="address_1">Address 1</option>
            <option value="address_2">Address 2</option>
            <option value="address_city">City</option>
            <option value="address_county">County</option>
            <option value="address_state">State</option>
            <option value="address_zip_code">Zipcode</option>
            <option value="address_country">Country</option>
            <option value="address_csz">City/State/Zip</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Phone">
            <option value="phone_number">Number</option>
            <option value="phone_extension">Extension</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Singular Values">
            <option value="url">URL</option>
            <option value="tin">TIN Number</option>
            <option value="email">Email</option>
            <option value="dea_registration_number">DEA Regisration Number</option>
            <option value="npi_number">NPI Number</option>
            <option value="upin_number">UPIN Number</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Provider Values">
            <option value="provider_value">Provider Value</option>
        </optgroup>
</select>

...And this is not even the entire select object. In the W-3 tutorial it builds each element independently as variables and adds them to each other individually. As you can see this might take some time to write and just seems very bulky. I would like to define the select object once and have it replicated that way (if possible) with every click. I imagine each newly created select object would need a unique name, but I am not 100% sure on that. If that is the case, is there a way to just append a 1 to the name of the first one and so on?

Upvotes: 0

Views: 242

Answers (2)

Digzol
Digzol

Reputation: 323

You could use the cloneNode() method. Here is an example:

http://jsfiddle.net/JKNT4/7/

HTML

<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
    <select name="data_value[]">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div id="child_selectors"></div>

Javascript

 function addRow() {
     var itm = document.getElementById("parent_selector");
     var cln = itm.cloneNode(true);
     cln.removeAttribute("id");
     document.getElementById("child_selectors").appendChild(cln);
 }

Upvotes: 2

DontVoteMeDown
DontVoteMeDown

Reputation: 21475

If you want something in jQuery you can use clone() function. See:

$("#data_value_selector").clone().appendTo("#select-box");

Demo.

I changed the name attribute to send a collection of the selected values. You can change this behaviour to a custom name in the click event, if you want:

var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");

I hope this helps you.

Upvotes: 3

Related Questions