We Keep Coding

How do I make all values in html select element selected using Javascript

In Html have two select tags, the first contains all the worlds countries, the second contains only the countries selected by user.
<form action="/fixsongs.fix">
<table>
<tr>
<td colspan="2">
<label title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</label>
</td>
</tr>
<tr>
<td>
<select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
<option value=" AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option>...<option value="ZW">Zimbabwe</option>
</select>
</td>
<td>
<button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
Add
</button>
<br>
<button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
Remove
</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
<option value="GB">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Start">
The user selects them by highlighting and then click on button which invokes the following Javascript function.
function add_preferred_countries() {
allCountries = document.getElementById('preferred_countries_all');
selectedCountries = document.getElementById('preferred_countries_selected');
var length=$('#preferred_countries_all option:selected').length;
if(length==0) {
return false;
}
$('#preferred_countries_all option:selected').each(function(){
$('#preferred_countries_selected').append($(this));
});
//selectedCountries.value = "";
for (var i = 0; i < selectedCountries.options.length; i++) {
selectedCountries.options[i].selected = selected;
}
}
'
That bits works fine, but I have realized that when I finally submit the form containing this and various other options that it will send items in the select list that are actually selected. So in the absence of a better solution I want to automatically select all values in the preferred_countries_selected whenever user adds new countries, so that when user submits form the preferred countries will be sent to server
I thought this would work, but has no effect
for (var i = 0; i < selectedCountries.options.length; i++) {
selectedCountries.options[i].selected = selected;
I know the existing function has some JQuery in it, but I would prefer pure javascript solution as I don't really understand JQuery syntax.
Ideally I would prefer to do this just as they press submit, but that is another question.

You have some HTML validation issues with your table and you really should not use inline CSS or HTML event attributes (i.e. onclick) as they have many harmful side-effects.
See the inline comments in the code snippet below and note that you need the checked CSS pseudo-class, rather than selected:
// Get references to the two lists
var allCountries = document.getElementById('preferred_countries_all');
var selectedCountries = document.getElementById('preferred_countries_selected');
function add_preferred_countries(operation) {
if(operation === "add"){
// Get the selected countries from list one into an array
var allPreferredSelected = Array.prototype.slice.call(allCountries.querySelectorAll('option:checked'));
// Loop over the array
allPreferredSelected.forEach(function(selOption){
selectedCountries.appendChild(selOption); // Add each to the second list
});
// Loop through the second list and select each option
Array.prototype.slice.call(selectedCountries.querySelectorAll("option")).forEach(function(opt){
opt.selected = "selected";
});
console.log("Item added");
} else {
// Do remove operation here
// Loop over the selected countries in the second list
Array.prototype.slice.call(selectedCountries.querySelectorAll("option:checked")).forEach(function(opt){
selectedCountries.removeChild(opt); // Remove country
});
console.log("Item removed");
}
}
// Get the add and remove buttons into an array and loop over the array
Array.prototype.slice.call(document.querySelectorAll("button[id^='preferred_countries']")).forEach(function(btn){
// Set up a click event handler for the button
btn.addEventListener("click", function(){
add_preferred_countries(this.dataset.action); // Call the add/remove function with the right arg
});
});
/* Do your styling separate from the HTML */
button[id^='preferred_countries'] { width:100px; }
select { width:200px; height:20em; }
<form action="/fixsongs.fix">
<table>
<tr>
<td colspan="2">
<span title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</span>
</td>
</tr>
<tr>
<td>
<select id="preferred_countries_all" multiple="multiple">
<option value=" AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option><option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option><option value="BH">Bahrain</option>
...
<option value="ZW">Zimbabwe</option>
</select>
</td>
<td>
<button type="button" id="preferred_countries_add" data-action="add">Add</button>
<br>
<button type="button" id="preferred_countries_remove" data-action="remove">Remove</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" multiple="multiple">
<option value="GB">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Start">
</form>

submit to url with multiple input of form

I have a form with 3 multiple choice questions. The questions lead to one of 5 pages (url) depending on the selected choices of each question.
I searched here for a javascript that works with a similar situation yet the script doesn't work in my site.
My form code is:
<fieldset id="second">
<h3 class="mbot_0"><label>How many miles does your auto have</label>
</h3>
<select id="mileage" data-hint="" name="mileage">
<option id="m1" selected value="0-15,000">
0-15,000
</option>
<option id="m2" value="15,001-30,000">
15,001-30,000
</option>
<option id="m3" value="30,001-65,000">
30,001-65,000
</option>
<option id="m4" value="65,001-100,000">
65,001-100,000
</option>
<option id="m5" value="100,000+">
100,000+
</option></select>
<h3 class="mbot_0"><label>Does your car have a GDI engine?</label></h3>
<select id="gdi" data-hint="" name="gdi">
<option id="" selected value="--">Select one
</option>
<option id="" value="yes">Yes</option>
<option id="" value="no">No</option>
</select>
<h3 class="mbot_0"><label>Do you use top-tier fuel when you fill up?</label></h3>
<select id="fuel" >
<option id="" selected value="--">Select one
</option>
<option id="" value="yes">Yes
</option>
<option id="" value="no">No
</option>
</select>
<input id="pre_btn1" onclick="prev_step1()" type="button" value="Previous">
<input type="submit" id="calculate"
value="Calculate" onclick="replace()"/>
</fieldset></form>
and My script is
function replace() {
if (document.getElementById('mileage').value == '0-15,000' && document.getElementById('gdi').value == 'yes' && document.getElementById('fuel').value == 'yes') {
window.location = 'http://www.arnolfodesign.com/clients/itw_carbonator/outcome01.html';
} else if (document.getElementById('mileage').value == '0-15,000' && document.getElementById('gdi').value == 'yes' && document.getElementById('fuel').value == 'no') {
window.location = 'http://www.arnolfodesign.com/clients/itw_carbonator/outcome02.html';
}
}
</script>
I'm learning javascript as I go. Please, what am I missing in the script?

I've got the script to work. I stripped out the commas in the "mileage" values and also replaced the submission button from type=submit to type=button. Maybe there was something overriding the submit function? Also changed the script function from "replace()" to "calc()". Unclear which item directly effected the script but it now works as I expected.

Changing visibility of an element on click

<table id="selectsupp">
<tr>
<td>
<select id="category">
<option value="display" readonly="true">-Shop By Category-</option>
<option value="all">All</option>
<option value="preworkout">Pre Workout</option>
<option value="protein">Protein</option>
<option value="mass">Mass Gainer</option>
<option value="bcaa">BCAA</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="company">
<option value="display" readonly="true">-Shop By Company-</option>
<option value="all">All</option>
<option value="on">Optimum Nutrition</option>
<option value="mts">MTS</option>
<option value="mutant">Mutant Nutrition</option>
<option value="allmax">All Max</option>
</select>
</td>
<td>
<input type="submit" id="submit" name="search" value="Search" onclick="find()"/>
</td>
</tr>
</table>
<script>
function find(){
var category = document.getElementById('category');
var valueOfCategory = category.options[category.selectedIndex].value;
var company = document.getElementById('company');
var valueOfCompany = company.options[company.selectedIndex].value;
if (valueOfCategory === "all" && valueOfCompany === "all") {
alert "hello";
document.getElementsByTagName("select")[0].style.visibility = "hidden";
document.getElementsByTagName("select")[1].style.visibility = "hidden";
//display all suggested items
}
Hello fellow coders :) I am having some trouble with setting the visibility of a tag. When I submit i am trying to get rid of the 2 select options and the button also but for some reason It setting .style.visibility = "hidden" is not working. Any suggestions?

Two problems are there
alert "hello";
should be
alert("hello");
And there is } missing at the end of function. And I don't see closing of script tag also.

Well, if you'd bothered checking your browser's debug console, you'd have seen your syntax errors getting logged there:
alert "hello";
should be
alert("hello");
The debug console should be your FIRST stop anytime something on a web page isn't working.

Display text according to the selected option

I have an option for users to select if 'Yes' or 'No'. If options selected values 'y' text box 'adv1' displays 750. If else it is 0.00
<table>
<tr>
<td>Advance Required</td>
<td><select name="advReq" id="ad">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
</td>
<td><input name="adv1" type="text" readonly="readonly" value="" /></td>
</tr>
</table>

<script>
function updateText(val) {
var $el = document.getElementById("adv1");
if(val == 'y'){
$el.value = "$ 750";
} else {
$el.value = "0";
}
}
</script>
<select name="advReq" id="ad" onchange="updateText(this.value)">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<input name="adv1" type="text" id="adv1" value="" />

You can achieve this by using a simple JavaScript.
HTML Markup :
<select name="advReq" id="ad" onchange="changeValue(this.value)">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<input name="adv1" type="text" id="adv" value="" />
JavaScript :
function changeValue(val){
//use comparison operator
if(val=="y")
document.getElementById('adv').value = "$ 750";
else
document.getElementById('adv').value = "0.00";
}
If you wish to change the value dynamically with values from Server at real time. You can do it by using AJAX calls.

Using gen_validatorv4.js to validate items in an array with Internet Explorer

I'm working on a form that uses javascript-coder's gen_validatorv4 script. (Have used it in the past to great success). This form is so that tellers at the bank I work at can put information in on voided checks, to send back to our accounting department and get kicked out as a csv for Foxtrot.
I have tested the script in Firefox and Chrome, with no problems. However, in IE 8 and 9, I get the message "Line #1: Your account Number must be a number!", which is a validation error for not putting a number in that line, and as far as I can figure, it's because I'm using an array. It will repeat again with an error when attempting to do it under maxlen as well. I'm using the array (which is created by the previous form) as there is a variable set of number of checks which may be submitted at any given time.
Anyone have any ideas how to make it work in Internet Explorer properly?
Update: http://jsfiddle.net/syran/xL2EB/10/
I added the array-0.9.js file from js-methods, and that has slightly fixed the issue. It now properly validates the first line of items up to the radio button, but fails at that point. If I remove the radio button check, it will then fail on the 2nd row on num and maxlen verification. Please check the fiddle for the updated code, and an added second line.
HTML Code:
<form name="checkvoid" method="post">
<table id="mytable" border="1">
<tbody>
<tr>
<td nowrap>Branch Number:
<input type="text" name="bid" value="1" size="3">
</td>
<td colspan="6">
<input type="submit" value="Submit Voided Checks">
</td>
</tr>
<tr>
<td align="center">Date</td>
<td align="center">Account #</td>
<td align="center">Serial #</td>
<td align="center">Amount</td>
<td>MO</td>
<td>CC</td>
</tr>
<tr class="check">
<td>
<select name="1[date][month]">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4" selected>Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="1[date][day]">
<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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29" selected>29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="1[date][year]">
<option value="2012">2012</option>
<option value="2013" selected>2013</option>
</select>
</td>
<td>
<input type="text" name="1[actnum]" size="10" value="1">
</td>
<td>
<input type="text" name="1[serial]" size="10" value="1">
</td>
<td>$
<input type="text" name="1[amount]" size="10" value="1">
</td>
<td>
<input type="radio" name="1[type]" value="1" CHECKED>
</td>
<td>
<input type="radio" name="1[type]" value="2">
</td>
<tr>
<td colspan="6">
<input type="checkbox" name="certify" value="1">I certify that all the information above is correct.</td>
</tr>
</tbody>
</table>
<input type="hidden" name="action" value="process">
Javascript:
var frmvalidator = new Validator("checkvoid");
frmvalidator.addValidation("bid", "req", "Please enter your Branch Number!");
frmvalidator.addValidation("bid", "num", "Your Branch Number should be a Number!");
frmvalidator.addValidation("1[actnum]", "req", "Line #1: You must enter an account number!");
frmvalidator.addValidation("1[actnum]", "num", "Line #1: Your Account Number must be a number!");
frmvalidator.addValidation("1[actnum]", "maxlen=8", "Line #1: Your Account Number cannot exceed 8 numbers!");
frmvalidator.addValidation("1[serial]", "req", "Line #1: You must enter a serial number!");
frmvalidator.addValidation("1[serial]", "num", "Line #1: Your Serial Number must be a number!");
frmvalidator.addValidation("1[serial]", "maxlen=10", "Line #1: Your Serial Number cannot exceed 10 numbers!");
frmvalidator.addValidation("1[amount]", "req", "Line #1: You must enter an amount!");
frmvalidator.addValidation("1[amount]", "num", "Line #1: Your Amount must be a number!");
frmvalidator.addValidation("1[type]", "selone", "Line #1: You must select either Money Order or Cashier's Check!");
frmvalidator.addValidation("certify", "shouldselchk", "Your must certify that the form is correct!");
I have it working without using an array in IE: http://jsfiddle.net/syran/xL2EB/4/

Worked fine after I removed the [] brackets that you have wrapping your name property value.
<input type="text" name="1[actnum]" size="10" value="1"> to <input type="text" name="1actnum" size="10" value="1">
You obviously have to update your js to reflect this.

Issue was caused by using a number as the datatype. IE didn't know how to handle it. Someone else gave me that tidbit, and I was able to fix it by creating a 2D array.
http://jsfiddle.net/syran/xL2EB/12/
stuff[#][fieldname]
frmvalidator.addValidation("stuff[1][actnum]", "req", "Line #1: You must enter an account number!");

i have same problem and i change the add_validation function .
you can replace the add_validation function in gen_validatorv4.js to this :
function add_validation(itemname, descriptor, errstr)
{
var condition = null;
if (arguments.length > 3)
{
condition = arguments[3];
}
if (!this.formobj)
{
alert("Error: The form object is not set properly");
return;
}
var itemobj = this.formobj[itemname];
var i=0;
for (var key in itemobj)
{
i=parseInt(i)+1;
var errtmp="";
if(typeof(itemobj[key]) !="object" || itemobj[key]==null || itemobj[key].name==null ) continue;
if(itemobj[key].name.toString().indexOf("[]") >1 )
{
if (itemobj[key].length && isNaN(itemobj[key].selectedIndex))
//for radio button; don't do for 'select' item
{
// itemobj[key] = itemobj[key][0];
}
if (!itemobj[key])
{
alert("Error: Couldnot get the input object named: " + itemname);
return;
}
if (true == this.validate_on_killfocus)
{
itemobj[key].onblur = handle_item_on_killfocus;
}
if (!itemobj[key].validationset)
{
itemobj[key].validationset = new ValidationSet(itemobj[key], this.show_errors_together);
}
if(typeof(itemobj[key].validationset.add)=="function")
{
var errtmp=errstr.replace("{num}",i) ;
itemobj[key].validationset.add(descriptor, errtmp, condition);
itemobj[key].validatorobj = this;
}
}
else
{
var itemobj = this.formobj[itemname];
if (itemobj.length && isNaN(itemobj.selectedIndex))
//for radio button; don't do for 'select' item
{
itemobj = itemobj[0];
}
if (!itemobj)
{
alert("Error: Couldnot get the input object named: " + itemname);
return;
}
if (true == this.validate_on_killfocus)
{
itemobj.onblur = handle_item_on_killfocus;
}
if (!itemobj.validationset)
{
itemobj.validationset = new ValidationSet(itemobj, this.show_errors_together);
}
itemobj.validationset.add(descriptor, errstr, condition);
itemobj.validatorobj = this;
break;
}
}
}