I'm currently using vanilla JS to match a given string, and then populate a drop down based on the match. I want to be able to click the drop down once to populate the drop down, but I currently have to click twice to then select the option, which would then add the same entries again (which isn't so much of an issue as once an option was selected, I can always reset the length to 0 so the user would likely not notice). I was thinking perhaps I need two event listeners instead of one but unsure of what direction to go or perhaps a "clickdown" and "clickup" event (if they even exist for mouse clicks?).
I'm still very much a beginner and not sure if what I am wanting to achieve is possible in one click or perhaps my approach is incorrect, so any pointers would be great.
document.getElementById('form').addEventListener('click', function() {
function addType(mactype) {
var type = document.getElementById('mode');
var option = document.createElement('option');
option.text = mactype;
type.add(option);
}
var macinput = MACinput.value;
var macoutput = MACoutput.value;
if (macinput.length > 0) {
var pattern = new RegExp("....-....-....");
if (pattern.test(macinput) == true) {
addType("Huawei -> Colon");
addType("Huawei -> HP");
addType("Huawei -> String");
}
}
Related
I'm building a preference list where the user selects a number of items from a list and they're then presented back to them in order of preference.
I've a prototype built, but I need some help with a feature I'd like to add. I want the user to see what preference the next item they select will be.
The behaviour would be:
First the user is presented with "Choose your 1st preference"
When they select their 1st preference this then changes to "Choose your 2nd preference, and so on.
It'd also need to know if they'd deselected a preference and on doing so it'd need to say "Choose your 1st preference (or whatever preference)" again.
I've created a JSfiddle here
I'm imagining to be able to use grep in some way to do this?
var nextPreference = $.grep(preferencesAsText, function(v) {
// return v !== First preference that isn't one of the preferences that are already selected
});
Any help would be great, thanks!
Edit: I've managed to get an array of the items that are in the list of chosen preferences by doing this:
var chosenPreferences = $('[data-schemeorder]').map(function() {
return $( this ).text();
})
.get();
var arrayOfChosen = $.makeArray(chosenPreferences);
console.log(arrayOfChosen);
So basically I just need a way of finding the first preference that isn't in this list, if that makes sense... updated fiddle
Why don't you use schemePrefArray.length to get the number of elements selected and display the text you need?
the text displayed would be preferencesAsText[schemePrefArray.length]
no?
OK, so I think I've figured this one out. If you create an array of the chosen preferences and then use grep to create an array of the items that aren't in the preferences text, you can then use this to find the first item that is not selected.
var chosenPreferences = $('[data-schemeorder]').map(function() {
return $( this ).text();
})
.get();
var arrayOfChosen = $.makeArray(chosenPreferences);
var differenceArray = [],
initialVal = 0;
$.grep(preferencesAsText, function(el) {
if($.inArray(el, arrayOfChosen) == -1) differenceArray.push(el);
initialVal++;
})
if(differenceArray[0] === undefined) {
$('#chosenLimit').show();
$('#chooseYourPrefs').hide();
} else {
$('#chosenLimit').hide();
$('#chooseYourPrefs').show();
$('#chooseNextPreference').text(differenceArray[0]);
}
And an updated fiddle here
I am currently attempting to make a page that would allow for users to search multiple knowledge bases from a single field.
Currently, I have been able to build this tool out so that clicking the corresponding button will search the designated tool, but I am trying to get a single button to search all 4.
Where I am stuck is the function tied to the All button. When I click it, it only appears to be running the last function in the group rather than opening 4 browser tabs with all 4 results.
I have attached a JSFiddle, in case my explanation is poor.
Note: The page is not pretty as I am trying to get it working before I add any CSS. I really just need JS advice. I am still somewhat of a novice with JS, so if anyone can provide a fairly simple solution, that would be most ideal.
Super Search Fiddle:
This is just to give an idea on how it might work depending on you needs. Ill assume that all the searches return a boolean value. So the code would go something like this:
function doAll() {
var msg = ["google","payroll","inquira","sdfc"]
var retvalue = [googleSearch(),payrollSearch(),inquiraSearch(),sfdcSearch()];
for (var i = 0; i < retvalue.length; i++){
if(retvalue[i] == false){
console.log(msg[i]+" search returned false");
}
}
}
It will do all the searches first and after it finishes, it will give out which searches failed, but you can change that functionality according to your needs.
Hope it helps
Update/Alternative(Almost same code):
function doAll() {
var msg = ["google","payroll","inquira","sdfc"]
var retvalue1 = googleSearch();
var retvalue2 = payrollSearch();
var retvalue3 = inquiraSearch();
var retvalue4 = sfdcSearch();
var retvalue = [retvalue1,retvalue2,retvalue3,retvalue4];
//var retvalue = [googleSearch(),payrollSearch(),inquiraSearch(),sfdcSearch()];
for (var i = 0; i < retvalue.length; i++){
if(retvalue[i] == false){
console.log(msg[i]+" search returned false");
}
}
}
I have a .net page that contains a huge amount of always the same dropdownlist in a repeater. The rendering performance of this site is...dispappointing.
I played around with delivering only the values and display texts for the dropdownlist to the page and then filling the selects with javascript. Works well, but I can't really see an improvement. In the end the page spends a lot of time with appending the options to the select tags.
Can someone with more experience tell me if it is theoretically possible to be faster than just filling the select tags in markup. Feels to me as if the browser has to "create" it at least once per select tag anyway, so it may not matter where the options come from. But maybe my javascript solution is just not very performat
Load time isnt't really a concern - it is for an intranet page.
here is what I did in the end:
I create an option list of 1 element for every select control to preserve the preselected values. If a select is focused or hovered over, I check if it contains onyl one element. If yes, I fill it dynamically from a collection of key values. It works without delay even for very large option lists.
I register an event listener for every select box and call this function
function fillDDL(ddl, arr) {
var i, len;
var optVals;
if (ddl.options.length === 1) {
var val = ddl.options[ddl.selectedIndex].value;
var docfrag = document.createDocumentFragment();
var opt;
ddl.remove(0);
opt = new Option("", "", true, false);
docfrag.appendChild(opt);
for (i = 0, len = arr.length; i < len; i++) {
optVals = arr[i];
opt = new Option(optVals[1], optVals[0], false, optVals[0] === val);
docfrag.appendChild(opt);
}
ddl.appendChild(docfrag);
}
Maybe innerHTML would be even faster, but right now I get instant results anyway.
I'm trying to remove (or disable) certain list items on a NetSuite form based on the selected option of a different list. I have been able to alter the form in other ways, using custom code, but the list items appear to be created on the page dynamically. The field is actually an input field, that is altered by JavaScript, when you "open" it (apparently).
Any assistance with this would be greatly appreciated. My only other option appears to be to add all of the options to each list programatically (via SuiteScripts), but I'd rather not do that, since there are a lot of lists that need to be altered, depending on other options selected by the client.
EDITED
Well, I found a way, using some of the code from the SuiteScript functions... It's not ideal, but it could work... Unless anyone has a better way of doing it...
//Add Option
var textCustom = "test inserted option";
var valueCustom = '100';
var selectedCustom = 'T';
var fldnamCustom = 'custevent_fieldNameGoesHere';
var formCustom = document.forms['main_form'];
var fldCustom = getFormElement(formCustom,fldnamCustom.toLowerCase());
if (fldCustom != null){
addSelectOption(document,fldCustom,textCustom,valueCustom,selectedCustom);
}
//Remove Option
valueCustom2="1";
var formCustom2 = document.forms['main_form'];
var fldCustom2 = getFormElement(formCustom2,fldnamCustom.toLowerCase());
if (fldCustom2 != null){
eval( valueCustom2 != null ? 'deleteOneSelectOption(fldCustom2, valueCustom2)' : 'deleteAllSelectOptions( fldCustom2, window )' )
}
I'm trying to build a quiz with multiple choice questions, one of which has multiple correct answers. So I'm trying to check which checkboxes in my questions have been selected by a student in order to give the right feedback. my code is:
for(var i = 0; i< input1.length; i++)
{
if(input1[0].checked && input1[1].checked)
{
submit_answer.onclick = showFeedback1;
}
else
{
submit_answer.onclick = false1;
}
}
It never takes the first if, even if I select those two only. No matter what I put in the if statement, it only takes the else.
and this is just a part of my .js
var quiz = document.getElementById('quiz');
var questions = quiz.getElementsByTagName('p');
input1 = questions[0].getElementsByTagName('input');
var submit_answer = document.getElementById('submit_answers'); // this is the submit button
I cannot make proper assumption of what you are trying to do.
FIRST PROBLEM
Your for loop is incrementing on 1, so on the each next iteration it is comparing using same previously used value.
SECOND PROBLEM
Your structure is horrible, your script fetches up all the input elements inside every p. You should properly organize your element in groups and then match whether or not they are checked.