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?
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.
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);
}
Related
I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.
I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.
I want to prompt the user with messages/errors in these scenarios:
the shed is chosen to be wider than it is long.
the shed is atleast 60cm smaller than the carports in both width and length
only one of the sheds dimensions being chosen
the form looks like this
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
Bind a function to your <select> elements onchange property.
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
That is, assuming you want the validation to happen when the user changes one of the select's values.
If you want to validate with a button click, you can instead bind the function to the click event of the button.
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.
As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.
It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).
I'm using a select field on my site which reloads the page and then adds this to value to a separate div. I want to be able to disable this option if any of the divs have the same value as the option.
<select id="bayname" name="bayname">
<option value="">--Select Bay--</option>
<option value="1">Bay 1</option>
<option value="2">Bay 2</option>
<option value="3">Bay 3</option>
<option value="4">Bay 4</option>
<option value="5">Bay 5</option>
<option value="6">Bay 6</option>
<option value="7">Bay 7</option>
<option value="8">Bay 8</option>
<option value="9">Bay 9</option>
<option value="10">Bay 10</option>
<option value="11">Bay 11</option>
<option value="12">Bay 12</option>
<option value="13">Bay 13</option>
<option value="14">Bay 14</option>
<option value="15">Bay 15</option>
<option value="16">Bay 16</option>
<option value="17">Bay 17</option>
<option value="18">Bay 18</option>
<option value="19">Bay 19</option>
<option value="20">Bay 20</option>
<option value="21">Bay 21</option>
<option value="22">Bay 22</option>
<option value="23">Bay 23</option>
<option value="24">Bay 24</option>
<option value="25">Bay 25</option>
<option value="26">Bay 26</option>
<option value="27">Bay 27</option>
<option value="28">Bay 28</option>
<option value="29">Bay 29</option>
<option value="30">Bay 30</option>
</select>
For example if a user clicks on 'Bay 1' a div will be created like this:
<li id="1509013949" class="cart-select cart-mode-cart">
1
</li>
And then when the page reloads again, i want to create an if statement so if the value from the select is within one of the divs then it should add it as disabled.
I've had ago at doing this using the code below and i can't get it to print out in the console log.
var baynumberoption = $("#bayname option").val();
var baynumber = $(".cart-select a[href='#select']").text();
if (baynumber.indexOf(baynumberoption) >= 0) {
console.log("match found");
}
$("#bayname option") returns all of the options so I think you really want to use the following. Note if you don't want to rely on the inner text of the link, you can also add data attribute like data-id="1" to store the value which can be used like:
$("#bayname option").each(function() {
var val = $(this).val();
if ( $(".cart-select a[data-id=" + val + "]").length > 0 ) {
$(this).attr("disabled", "disabled");
}
});
Some of the syntax may be off but you get the idea.
I have found plenty of tutorials on how to change the arrow colors of a however they don't work where multiple is set to multiple="multiple" and I have TWO arrows rather than one.
The website is textatradesman.com, The HTML is as follow:
<select id="select" multiple="multiple">
<option class="clicktoselect" value="">Click or Tap to Select</option>
<option value="http://www.Textabuilder.co.uk/">TextA Builder.co.uk</option>
<option value="http://www.Textaplumber.co.uk/">TextA Plumber.co.uk</option>
<option value="http://www.Textalocksmith.co.uk/">TextA Locksmith.co.uk</option>
<option value="http://www.Textahandyman.co.uk/">TextA Handyman.co.uk</option>
<option value="http://www.Textapainter.co.uk/">TextA Painter.co.uk</option>
<option value="http://www.Textacarpenter.co.uk/">TextA Carpenter.co.uk</option>
<option value="http://www.Textaplasterer.co.uk/">TextA Plasterer.co.uk</option>
<option value="http://www.Textatiler.co.uk/">TextA Tiler.co.uk</option>
<option value="http://www.Textabricklayer.co.uk/">TextA Bricklayer.co.uk</option>
<option value="http://www.Textaboilerrepair.co.uk/">TextA Boilerrepair.co.uk</option>
<option value=".">A - Z List of trades below....</option>
<option value="http://www.TextaApplianceRepair.co.uk/">TextA ApplianceRepair.co.uk</option>
<option value="http://www.textanacrepair.co.uk/">TextA ACRepair.co.uk</option>
<option value="http://www.textanalarmfitter.co.uk/">TextA AlarmFitter.co.uk</option>
<option value="http://www.Textaarchitect.co.uk/">TextA Architect.co.uk</option>
<option value="http://www.textaasphalter.co.uk/">TextA Asphalter.co.uk</option>
<option value="http://www.Textafrenchpolisher.co.uk/">TextA FrenchPolisher.co.uk</option>
<option value="http://www.Textagaragedoorfitter.co.uk/">TextA GarageDoorFitter.co.uk</option>
<option value="http://www.Textagardener.co.uk/">TextA Gardener.co.uk</option>
<option value="http://www.Textawindowfitter.co.uk/">TextA WindowFitter.co.uk</option>
</select>
Yes.
Simple <select> has one arrow. Multiple <select> has two arrows. What's the problem? If you don't like arrows, you can add a combo plugin like chosen or select2 from jquery.
You can explain better the problem and what you like to achieve.
I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.