I have a form with 10 Select Lists all have the same items. The items are populated from a PHP/MySQL array. The user needs to select one item per select list. I need to prevent the user from selecting the same item twice before submitting the form.
function checkDropdowns(){
var iDropdowns = 10;
var sValue;
var aValues = new Array();
var iKey = 0;
for(var i = 1; i <= iDropdowns; ++i){
sValue = document.getElementById('test' + i).value;
if ( !inArray(sValue, aValues) ){
aValues[iKey++] = sValue;
}else{
alert('Duplicate!');
return false;
}
}
return true;
}
Use javascript to add an event listener on the value change of the selects. That function would then loop through the selects taking the values into memory after having compared it to the values it had already. If the loop finds that the current select has an option that is already selected, put it back to default value and display a little message...
Or, still on a change event, take the value of the just selected item and remove all the items of this value in the 10 selects. So at the end the user will only have 1 choice, since he only sees the options he can choose. But be careful, if the user changes his mind on one select, make sure you add back the option you removed in the first place.
Option 2 is to be prefered as a user point of view, you will cause less frustration.
EDIT:
The code you are providing already does quite a lot... All you need now is something to revert the change if it is invalid:
var defaultValues = [];
function onLoadSelect(){//Please execute this on document load, or any event when the select are made available.
var iDropdowns = 10;
var iKey = 0;
for(var i = 1; i <= iDropdowns; ++i){
var sValue = document.getElementById('test' + i).value;
defaultValues['test' + i] = sValue;
}
}
Then, in your function's else, reset the value according to the defaults we have gathered:
else{
alert('Duplicate!');
document.getElementById('test' + i).value = defaultValues['test' + i];
return false;
}
I have written code, i think it can be improved but it works as you asked.
Put it in inside script tag under body so it loads after document.
Put id names of select/dropdown elements in id array.
Take a look: //took me 3 hours O_O
http://jsfiddle.net/techsin/TK9aX/15/
i think i need better strategy to approach programming.
Related
I have three MultiselectLists
Countries which has 22 values
Cities which has ~800 values
Sites which has ~1700 values
I am using the jquery bootstrap-multiselect library
It is fast enough for what I am trying to do that the user doesn't notice any overhead except in one case when the user selects USA 600 Cities and 1200-1300 sites get checked/selected this takes about 30 seconds in IE, and about 6 seconds in Firefox which is enough for a reasonable person to believe that something is wrong with the page.
I don't want to change the UI of the website at all since this works beautifully in every other case, including when the user hits a "select-all" or "deselect-all" and just wants to run a full report
these are the two functions that take about 90-95% of the time to execute
getInputByValue: function(value) {
var checkboxes = $('li input', this.$ul);
var valueToCompare = value.toString();
for (var i = 0; i < checkboxes.length; i = i + 1) {
var checkbox = checkboxes[i];
if (checkbox.value === valueToCompare) {
return $(checkbox);
}
}
}
getOptionByValue: function(value) {
var options = $('option', this.$select);
var valueToCompare = value.toString();
for (var i = 0; i < options.length; i = i + 1) {
var option = options[i];
if (option.value === valueToCompare) {
return $(option);
}
}
}
and this is the code I use to select all of the options, I have a Dictionary>>(); that I pass from my controller into my view that governs the relationship between the Countries/Cities/ and sites
onChange: function (option, checked, select) {
try{
if (checked == true) {
var t0 = performance.now();
$('#Cities').multiselect('select', Object.keys(CountryCitySite[$(option).text()]),'triggeronChange');
var t1 = performance.now();
list = Object.keys(CountryCitySite[$(option).text()])
var t2 = performance.now();
for(var i = 0; i<list.length; i++)
{
$('#Sites').multiselect('select', CitySite[list[i]])
}
var t3 = performance.now();
}
else if (checked == false) {
$('#Cities').multiselect('deselect', Object.keys(CountryCitySite[$(option).text()]), 'triggeronChange');
list = Object.keys(CountryCitySite[$(option).text()])
for(var i = 0; i<list.length; i++)
{
$('#Sites').multiselect('deselect', CitySite[list[i]], 'triggeronChange')
}
}
}
Some thoughts:
1. maybe in the case of USA I could do an Ajax, and post everything to the server and then return three new selectlists with the appropriate options checked? the problem with this is that I don't see this taking less than like 7 or 8 seconds if not more which is still much too long
var options = $('option', this.$select);
this Jquery selection is several orders of magnitude slower than just using native javascript Document.getelementsbytagname, since I know that all of the checkboxes have unique values maybe I could replace this Jquery selection with native javascript and get all of the checkboxes that way
as a 'hack' I could send two invisible multiselectlists at the very beginning with all of the boxes for USA checked, these invisible multiselects behave exactly the same as the visible ones in most respects but if the user selects USA, these are shown instead of the originals. This actually does work, it makes the website a little slower but since the selection of every other option is so quick it doesn't really matter, it seems like a sub-par solution but this is currently the best I have
if anyone thinks of anything else or can give any advice on this I would be very appreciative
Sincerely Josh
Trying to teach myself javascript I can do some minor scripts by myself but this one has got me stumped. I have been trying for weeks and cant get anywhere.example image
MY goal is to have the field labeled end item automatically populate with the last item filled in on the list.
I know how to do this in excel but with javascript I am completely lost any guidance would be greatly appreciated thanks in advance.
I have tried this before:
var one = this.getField("a1");
var two = this.getField("a2");
var three = this.getField("a3");
//for all 25 fields
if(two.value==''||two.value==null){
this.getField("a1")}
else if (three.value==''||three.value==null){
this.getField("a2")}
//for all 25 fields
The loop shown below loops over all of your fields. As long as it finds a value, it remembers that value (so "theResult" always contains the currently last found item). If no value is found (in other words, if we find the last item in the list, we simply break and know that "theResult" contains the last real value.
// Start by not having any result
var theResult = null;
// Loop over all fields
for (var theIndex = 1; theIndex < 26; theIndex++) {
// get this field
var theField = this.getField( "a" + theIndex );
// If this field has a value, take it, if not quit our loop
if (theField.value) {
theResult = theField.value;
} else {
break;
}
}
I have a working Ajax call and function that populates a datalist. The datalist is used to select from a finite list an addition to an UL element on the page. Once I add one from the datalist to the actual list, I want to remove that option from the datalist. The brute force method I'm using is to clear the datalist and repopulate it.
function populate_datalist_from_array(list_id, list_str)
{
clearChildren( list_id );
var arr = eval ( list_str );
for (var i = 0; i < arr.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = arr[i];
opt.value = arr[i];
document.getElementById(list_id).appendChild(opt);
}
}
function clearChildren( parent_id ) {
var childArray = document.getElementById( parent_id ).children;
if ( childArray.length > 0 ) {
document.getElementById( parent_id ).removeChild( childArray[ 0 ] );
clearChildren( parent_id );
}
}
I've verified that the list_str object is correct. i.e., it contains only the options not already in the current list. But after calling populate_datalist_from_array with that new list, the datalist in the dropdown doesn't change. Is this because the browser has essentially compiled all of the values that were there (like it were a normal, browser-based autocomplete) and doesn't 'forget' the values that I want removed?
Teemu's JsFiddle works fine. However, it's normally better to avoid recursion, and multiple DOM queries when not required.
Here is an edit that only requires a single DOM query, and is iterative. (Note decrement before index because this is a zero based list)
clearChildren = function (parent_id) {
var parent = document.getElementById(parent_id);
var childArray = parent.children;
var cL = childArray.length;
while(cL > 0) {
cL--;
parent.removeChild(childArray[cL]);
}
};
(In JSFiddle on MacBookPro I saved 10 ms - from 15 ms total - on a list of 500 elements, but could be more dramatic with larger DOM's on mobile).
If list_str really is OK, your code works. You can check it in action at jsFiddle.
The most general reason for a behaviour you've described, is that your code refreshes the page. If you remove type="button" from the "Change options" button in the linked fiddle, you'll get an error (due to the fiddle itself). In your page you probably have something similar invoking populate_datalist_from_array(). Notice, that also hitting Enter on an active text input will do submit/refresh.
I'm wondering, Is there a JavaScript command (whats the proper name for the thing im looking for?) where I can select all input boxes in a form rather than just one?
E.g:
function checkform(id){
var theForm = document.getElementById( id );
if (theForm.surname.value == '') {
alert( "you didn't type in your surname");
theForm.surname.focus();
return false;
}
else if (theForm.surname.value.length == 0) {
alert( 'You\'ve left some of the fields blank' );
theForm.surname.focus();
return false;
}
return true;
}
I have this code. The purpose of it is that it checks each input box in the form to see if information has been entered, and if it hasn't, an alert appears when the user submits the form.
Is there a way I could change this piece of JavaScript in order to check every input box and not just the surname one (as seen in the example).
The method getElementsByTagName can give you all the inputs, the elements property will hold a NodeList of all the controls in a form.
var nodeList = theForm.getElementsByTagName('input');
or
var nodeList = theForm.elements;
I think you need the document.getElementsByTagName() method for this one. You could link this up with your current function like so:
var inputs = document.getElementsByTagName('input'), // get all input tags in the document
i = 0, // set counter to zero
l = inputs.length; // get number of inputs you have found
for (i; i < l; i += 1) { // loop through the inputs you have found
checkform(inputs[i].id); // send the id of each input to the `checkform` method
}
Of course you might want to rewrite the function you have to make it more efficient, but you could potentially drop this straight into your code (outside the checkform function) and it should do what you want.
So the JavaScript code below is what I am using to pull data from our automated marketing software Eloqua. This works for single-select drop downs. What I want it to do is work for multi-select drop downs.
I know that the ProductValue variable works. So with that said I am positive that it is in the if(ProductValue == ProductList[i].value) specifically the " .value " since this is calling the value on in the drop-downs. Is there a way to make this multiple? This has been driving me nuts for days.
function CustomerInformation()
{
var ProductValue = "<span class=eloquaemail>MarketingCustomerInformation1</span>"; //Field Merge...Field merge is working
var ProductList = document.getElementById('C_Marketing_Customer_Information1').options; //Calling the contact record field
for(var i=0; i< ProductList.length; i++)
{
if(ProductValue == ProductList[i].value)
{
document.getElementById('C_Marketing_Customer_Information1').value = ProductValue;
break;
}
else
{
document.getElementById('C_Marketing_Customer_Information1').value = "Select";
}
}
}
you could use multiple for loops:
var ProductValue = "<span class=eloquaemail>MarketingCustomerInformation1</span>"; //Field Merge...Field merge is working
var ProductList = document.getElementById('C_Marketing_Customer_Information1').options; //Calling the contact record field
for(var i=0; i< ProductList.length; i++)
{
for(var j=0;j<ProductValue.length;j++)
{
if(ProductValue[j] == ProductList[i].value)
{
document.getElementById('C_Marketing_Customer_Information1').option[i].selected="selected";
}
}
}
Could also add a boolean var to select a default for when nothing gets selected.
BASIC IDEA
The first loop will go through all the values in the multi-select list.
The second loop will go through all the values you pass it (meaning ProductValue will need to be an array of all the values you want selected).
IF the current item in the first array (ProductList[i]) is equal to (==) the current item in the second array (ProductValue[j]) THEN you will mark the option as selected.
Some useful tools for your JS needs:
google
W3Schools.com
Firebug (Firefox addon, though most browsers have something tied to F12 that can help, use it to see your variables and step through the functions)