Selecting a drop-down box option does not affect page - javascript

I'm trying to make an extension that selects facilitates filling out info on checkout page of a website (you'll probably have to add to cart before you can go to the checkout page). Currently I'm just setting the "selected" value of a certain option tag to be true, but it seems not to affect the page as intended. I'm talking about the Country and State selection on the checkout page (I want it to be Canada and BC). Would prefer vanilla Javascript
Here's my code:
var checkoutSelects = document.querySelectorAll("select:not([type=hidden])");
for(var i = 0; i < checkoutSelects.length; i++) {
if(checkoutSelects[i].getAttribute("id").toLowerCase().includes('country')) {
var countryOptions = checkoutSelects[i].querySelectorAll('option');
for(var a = 0; a < countryOptions.length; a++) {
if(countryOptions[a].value.toLowerCase().includes("canada")) {
countryOptions[a].selected = true;
}
}
}
}

Can you try countryOptions.selectedIndex = a;
instead of
countryOptions[a].selected = true;

Related

Add sap.ui.commons.CheckBox onto a sap.m.page

I'm new to SAPUI5 and want to make a page, with contains several CheckBoxes, based on SAPUI5. At this moment I have following code to create the CheckBoxes:
function chosevalues(){
re_items = [];
var items = [];
var text = ["1070","1071","1072","1073","1074","1075","1076"];
for (var i = 0; i < text.length; i++) {
alert("in for with i= " + i);
var box = new sap.ui.commons.CheckBox({
text : text[i],
tooltip : 'Value checkbox',
checked : false,
change : function() {
if(oCB.getChecked()){
alert(this.getText());
re_items.push(this.getText());
}else{
alert('NO');
}
}
});
items.push(box);
}
page4.addContent(items);
app.to("page4");
}
Now I place the array on the page-content, but the text and the boxes are very small.
I tried with a sap.ui.table.Table and also with a sap.m.List. Nothing worked.
It should be like this: SAPUI5 Explored - CheckBox
But I found no way to include the mvc-view in my javascript code.
On the one hand I can programm with javascript to create the CheckBoxes like the example, and on the other hand I can try to include the mvc-view.
The Problem is, that I have no idea for both.
in SAPUI5 there are 2 major libraries - sap.ui.commons (for desktop only) and sap.m (for both desktop and mobile).
You have to decide which library suits most to your needs and go for it.
What you were trying to achieve (large check boxes) is possible only when using sap.m library.
Here is a small examle code based on your function:
var text = ["1070","1071","1072","1073","1074","1075","1076"];
var oVBox = new sap.m.VBox();
for (var i = 0; i < text.length; i++) {
oVBox.addItem(new sap.m.CheckBox({text:text[i]}));
}
And here is a demonstration: LINK

Issues in setting cookies for store form input values in javascript

I took below code from online,
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
localStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(localStorage.myValues);
I created simple asp page,
Now, If i click the next after after enter some input value, it will go to next page, and again i click back, it doesn't show entered input values.
I need to show that values, may i know, how can i achieve this one thanks in advance.
Here is the worked jsfiddle
I need to add with my existing javascript code for achieving my need.
But i just confused, how to add code?
Can anyone help me? Thanks in advance.
On page load, you must add the following code:
var $inputs = $(".input");
var myValues = localStorage.getItem("myValues") ? JSON.parse( localStorage.getItem("myValues") ) : [];
for(var i = 0; i < myValues.length; i++) {
$inputs[i].value = myValues[i];
}
This will make sure that on page load, if any data is present in the localStorage it will be populated in the respective input fields.
Now when you click on next button:
$("#nextbutton").click(function () {
var myValues = [],
$inputs = $('.input');
for (i = 0; i < $inputs.length; i++) validateEmail($inputs[i]);
if ($('.invalid').length !== 0) return false;
for (i = 0; i < $inputs.length; i++) {
myValues.push($inputs[i].value)
}
localStorage.myValues = JSON.stringify(myValues);
});
This is used to store the data into the localStorage after validation.

How can I show/change array contents?

I'm doing the quiz from javascriptissexy.
Dynamically (with document.getElementById or jQuery) remove the current question and add the next question, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
How can I remove the current question + list of answers and display the new ones dynamically? It works fine right now but think it's asking me to make the transition from questions smoother.
function nextQuestion(){
j++;
currentQuestion.innerHTML = allQuestions[j].question;
for(var i = 0; i < allQuestions[j].choices.length; i++){
currentChoices[i].innerHTML = allQuestions[j].choices[i];
};
};
Before replacing the content, you must to hide, change the content and then show-it again
$("#question").fadeOut("slow", function(){
$("#question_content").html(allQuestions[question].question);
for(var i = 1; i <= allQuestions[question].choices.length; i++){
$("#choise"+i).html(allQuestions[question].choices[i-1]);
};
$("#question").fadeIn("slow");
});
Please see this example on JSFiddle http://jsfiddle.net/en4rt9o7/
You can remove using the shift
function nextQuestion() {
var question = allQuestions.shift();
currentQuestion.innerHTML = question.question;
for (var i = 0; i < question.choices.length; i++) {
currentChoices[i].innerHTML = question.choices[i];
};
};

Refresh Button in Accordion

I would like to update the accordion header FormationName information directly from UI when user clicks on refresh button.
However, in the current design accordion header is updated by hard coded string ("party") just for testing purpose. When user clicks on refresh button first accordion header FormationName is updated.
$("#refresh").click(function () {
myData.offsetFormations[0]["FormationName"] = "party";
$('#accordion').accordion('destroy');
build();
});
http://jsfiddle.net/xg7cr0g4/85/
Ok, here's what I came up with. First, add all elements with the class .formationName into an array. It should have the same length as your myData.offsetFormations:
var names = [];
var counter = 0;
$(".formationName").each(function(){
names[counter] = $(this).text();
counter++;
});
Logging this element will result in an array of 8 names, which have the values of the headers (adjusted or otherwise.)
Next, loop over your myData.offsetFormations and set the value of [i]["FormationName"] to that of the name array:
for(var i = 0; i < myData.offsetFormations.length; i++){
myData.offsetFormations[i]["FormationName"] = names[i];
}
Your whole function should look like this:
$("#refresh").click(function () {
var names = [];
var counter = 0;
$(".formationName").each(function(){
names[counter] = $(this).text();
counter++;
});
for(var i = 0; i < myData.offsetFormations.length; i++){
myData.offsetFormations[i]["FormationName"] = names[i];
}
$('#accordion').accordion('destroy');
build();
});
And here's the updated fiddle showing the function in action:
JSFiddle
Hope that helps!

Asp.net listbox used client side

I have two asp.net listbox control in my page lbox1 and lbox2
lbox1 is filled in code behind .
Now user can select items on lbox1 and by clicking on a button the selected items goes in lbox2.
I do this using javascript becouse I don't want postback on each click.
this is the javascript function :
function Updatelist() {
var sel = document.getElementById("lbox1");
var listLength = sel.options.length;
for (var i = 0; i < listLength; i++) {
if (sel.options[i].selected)
document.getElementById("lbox2").add(new Option(sel.options[i].value));
}
}
Now I need to send on server side the content of lbox2 using another button.
I think that using a simple asp button with a onserverclick event not work becouse in server side lbox2 is never filled!
How can I do ?
You'll need to add a button and JS function that copies the values from the lbox1 control into an <asp:HiddenField> control. Once you post back, the selected values will be available in the hidden control's Value property.
To avoid postback use html dropdown... and for your code ans will be below:-
function Updatelist() {
var sel = document.getElementById("lbox1");
var listLength = sel.options.length;
var opt = document.createElement('option');
document.getElementById("lbox2").options.add(opt);
for (var i = 0; i < listLength; i++) {
if (sel.options[i].selected) {
document.getElementById("lbox2").options.add(opt);
opt.text = sel.options[i].value;
opt.value = sel.options[i].value;
}
}
}

Categories