We Keep Coding

Selecting a drop-down box option does not affect page

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;

get the value of an <div> tag

I am interested in when choosing an option from a drop-down list the value of the selected option that stá visualiando in a < div > that value is captured in a javascript variable. The list referred to originated in an AJAX routine that queries a database. On page php , where there is a div shown above . I need your help to take this value from the list.

Assuming that you meant for your question read the way RightClick explained it in the comments, you need something like this:
window.onload = function() {
var ids = $('.dropdown').map(function(){
return this.id;
}).get();//Get array of ids
var options = document.getElementsByClassName('dropdown');
for(var i = 0; i < options.length; i++) {
var anchor = options[i];
anchor.onclick = function() {
var h = new XMLHttpRequest();
h.open("GET", "/myDB?q="+ids[i], true);//This should be synchronous
h.send();
document.getElementById("responseDiv").innerHTML = h.responseText;
}
}
}
`

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.

DOM Elements created in JavaScript function disappear after function returned

I have a dropdown list with multiple selections allowed. A user selects from the list and then clicks the submit button with an onclick=test() which calls a JS function. I am using Jsp pages, and this is a Spring MVC framework project with DWR for remote service.
The data that's returned from the remote service - dwrService is handled by the callback function - handleAddSuccess. Based on the item(s) selected, I need to populate one or more textareas. From looking at Firebug, I see the textarea display and then being populated, but once the function, test() completes, the textarea disappears. I have been looking for answers everywhere, but no results.
function test() {
var careIDs = dwr.util.getValue("careIDs");
dwrService.getNewCares(careIDs, {
callback : handleAddSuccess,
errorHandler : handleAddError
});
}
function handleAddSuccess(data) {
var aFragment = document.createDocumentFragment();
var divta1 = document.getElementById("divta1");
for (i = 0; i < data.length; i++) {
var ta = document.createElement("textarea");
ta.setAttribute("id", "definition"+i);
ta.setAttribute("cols", "75");
ta.setAttribute("rows", "75");
divta1.appendChild(ta);
aFragment.appendChild(divta1);
}
document.body.appendChild(aFragment);
for (i = 0; i < data.length; i++) {
dwr.util.setValue("definition"+i, data[i].definition);
}
alert(" end of handleAddSuccess " ) ;
}
I have also returned from the callback function, and the case is the same - I could see the textarea elements being setup in Firebug and populated with values, but once the function returned, the textarea element disappears.

You don't return false from within test(), so the form gets submitted when the submit button is clicked and the page is reset to its initial state (depending on what the server does with the submitted form).

How Can I Check the checkbox that belongs a GridVIew?

I want to do a javascript function that check the unchecked checkbox. My function nowadays, check all the unchecked checkbox, and I need that just check a specific GridView unchecked checkbox
function checar() {
var el = document.getElementsByTagName("input");
for (var i = 0; i < el.length; i++) {
if (el[i].type == "checkbox") {
el[i].checked = true;
}
}
}

You want to first limit the scope of your search for elements. One way to do so would be to use getElementById
function checar() {
var grd = document.getElementById("<%=grd.ClientID%>"); // <-- Add this line
var el = grd.getElementsByTagName("input"); // <-- change the scope of this to grd
//rest of your code here.
}
Sample using divs, but you'll get the idea I think: http://jsfiddle.net/8LRkk/
Edited to include setting the specific Grid ID.

To get at all of the checkboxes of a particular gridview, you need to grab checkboxes whose ClientID contain the portion of the gridview's ClientID as well since all controls have an id which is "stacked".
Your function should work as a base, it just needs to have an added check in it:
function checar() {
var el = document.getElementsByTagName("input");
// Get the client id of the gridview from ASP here
var gvID = '<%= this.myGridview.ClientID %>';
for (var i = 0; i < el.length; i++) {
// Call the id of the checkbox and check to see if it
// contains the client id of the gridview at the same time
if (el[i].type == "checkbox" && el.id.indexOf(gvID) != -1) {
el[i].checked = true;
}
}
}