We Keep Coding

Javascript Run one click then another

What I'm trying to do is make it open the breed_selector dropdown menu, and then select breed1, then .click, then move onto the next breed and click, and continue, It needs to do this three times, but unfortunately it only selects the first breed of dog and clicks, not all three.
Thanks
(function() {
var x = document.getElementById("breed_selector).options;
for(var i=0;i<x.length;i++){
if(x[i].text=="Labrador"){
x[i].selected=true;
document.getElementsByClassName("shop")[0].click();
break;
}
}
var x = document.getElementById("breed_selector").options;
for(var i=0;i<x.length;i++){
if(x[i].text=="poodle"){
x[i].selected=true;
document.getElementsByClassName("shop")[0].click();
})();
At the moment, it just doesn't do anything,
I have tried
var = document.getElementById("breed_selector").options;
for(var i=0;i<x.length;i++){
if(x[i].text=="poodle", "Labrador", "pug"){
x[i].selected=true;
document.getElementsByClassName("shop")[0].click();
break;
But the above doesn't work either, any input would be great, Thanks :)
UPDATED CODE which still doesn't work
(function() {
var x = document.getElementById("breed_selector").options;
for(var i=0;i<x.length;i++){
var text = x[i].text;
if(x[i].text === "Labrador" && text === "Pug"){
x[i].selected=true;
document.getElementsByClassName("shop")[0].click();
break;
}
}
})();

You could try this to click on ALL the options of the select element:
var breedSelector = document.getElementById("breed_selector");
var howMany = breedSelector.length;
var buttonShop = document.querySelector(".shop");
for (var i = 0; i < howMany; i++) {
breedSelector.selectedIndex = i;
buttonShop.click();
}
Note, though, that it will click the button several times in quick succession.
In order to select only certain options based on their value, you could try something like:
var breedSelector = document.getElementById("breed_selector");
var whichOnes = ["Labrador", "Poodle", "Golden"]; //whichever you want.
var buttonShop = document.querySelector(".shop");
whichOnes.forEach(function(breed){
breedSelector.selectedIndex = [].findIndex.call(breedSelector, function(option) { return option.textContent == breed});
buttonShop.click();
}

Using a user selected choice from a drop-down to populate a text field in Google Forms

I am creating a Judging Form for a research competition and I am trying to use Google Forms to do so. What I am attempting to do is have a drop down list the Research Poster Numbers and have then have the user selected choice from the drop down fill text field for the poster title. I will be pulling the both the Poster Number and Title from an existing spreadsheet.
var caseScoreForm = FormApp.openById('FormTitle');
var scoreSheet = SpreadsheetApp.openById('SpreadSheetName');
var lastRow = scoreSheet.getLastRow();
function fillposterNumbersDropDown(posterNumberRange) {
var posterNumber = caseScoreForm.addListItem();
var posterNumberValue = "";
var posterNumberLog = "";
var posterNumberArr = [];
var posterNumberRange = scoreSheet.getRange('Score Sheet!A2:' + lastRow).getValues();
// loads the posterNumber array
for (var i = 0; i < posterNumberRange.length; i++) {
posterNumberValue = posterNumberRange[i][0];
Logger.log(posterNumberValue);
posterNumberLog = posterNumber.createChoice(posterNumberValue);
posterNumberArr.push(posterNumberLog);
}
posterNumber.setTitle('Poster Number:').setChoices(posterNumberArr).setRequired(true);
}
function setPosterTitleTextResponce(posterTitleRange) {
var posterTitleRange = scoreSheet.getRange('Score Sheet!B2:' + lastRow).getValues();
var posterTitle = caseScoreForm.addTextItem();
var posterTitleValue = "";
var posterTitleLog = "";
var posterTitleArr = [];
var posterNumberIndex = null;
var posterNumberChoices = FormApp.getActiveForm().getItems(FormApp.ItemType.LIST)[1].asListItem().getChoices();
var userChoice = getUserChoice();
//get the users choice index from the posterNumber dropdown
if (userChoice != null) {
for (var i = 0; i < posterNumberChoices.length; i++) {
if (userChoice == posterNumberChoices[i]) { // need getUserChoice();
posterNumberIndex = i;
break;
}
}
}
//loads the posterTitle array
for (var i = 0; i < posterTitleRange.length; i++) {
posterTitleValue = posterTitleRange[i][0];
posterTitleLog = Logger.log(posterTitleValue);
posterTitleArr.push(posterTitleLog);
}
//print out the posterTitle using the posteNumbers index
posterTitle.setTitle('Poster Title:').setRequired(true); // need way to wright to textfield
}
I think all I have left to do is just get the users choice for the active form and print it to the poster Title text field. I know there is the Get pre-filled URL link in Google forms, but we are projecting about 200 entrees for this competition.
If any one has any help/tip/suggestions or have any alternatives, please let me know.

Using labels like HTML5 placeholder

I am trying to use <label> elements in my html contact form like the HTML5 placeholder attribute for inputs. I have written the following JavaScript to to act as a reusable function witch will provide the following functionality.
Find the input by name.
Get the value of the input.
Find the label belonging to the input.
Change the label style depending on the state of the input.
Change the label style depending on the value of the input.
However it is not working and I don't know why as no errors appear in the console. What am I doing wrong? here is a JS Fiddle with code
function placeholder(field_name) {
// Get the input box with field_name
// Then get input value
var box = document.getElementsByName(field_name);
var i;
for (i = 0; i < box.length; i++) {
var value = document.getElementById(box[i].value);
}
// Get the labels belonging to each box using the HTML for attribute
var labels = document.getElementsByTagName('LABEL');
for (i = 0; i < labels.length; i++) {
if (labels[i].htmlFor !== '') {
var elem = document.getElementById(labels[i].htmlFor);
if (elem) {
box.label = labels[i];
}
}
}
// Colors
var focusColor = "#D5D5D5";
var blurColor = "#B3B3B3";
// If no text is in the box then show the label grey color
box.onblur = function () {
box.label.style.color = blurColor;
};
// If input focuses change label color to light grey
box.onfocus = function () {
box.label.style.color = focusColor;
};
// If there is text in the box then hide the label
if (box.value !== "") {
// Quick do something, hide!
box.label.style.color = "transparent";
}
}
// Call the function passing field names as parameters
placeholder(document.getElementsByName("email"));
placeholder(document.getElementsByName("firstName"));
placeholder(document.getElementsByName("lastName"));

This might be considered a little overkill on the number of listeners I've used, feel free to remove any you think unnecessary, but I've tried to employ your HTML structure as you have it and give you all desired effects. It should work for either the <label>s for matching the <input>s id OR matching it's <name> (given no id matches). I'll always say prefer using an id over name. I believe this JavaScript should also work in all browsers too, except the addEventListener for which you'd need a shim for old IE versions (let me know if it doesn't in one/the error message).
Demo
var focusColor = "#D5D5D5", blurColor = "#B3B3B3";
function placeholder(fieldName) {
var named = document.getElementsByName(fieldName), i;
for (i = 0; i < named.length; ++i) { // loop over all elements with this name
(function (n) { // catch in scope
var labels = [], tmp, j, fn, focus, blur;
if ('labels' in n && n.labels.length > 0) labels = n.labels; // if labels provided by browser use it
else { // get labels from form, filter to ones we want
tmp = n.form.getElementsByTagName('label');
for (j = 0;j < tmp.length; ++j) {
if (tmp[j].htmlFor === fieldName) {
labels.push(tmp[j]);
}
}
}
for (j = 0; j < labels.length; ++j) { // loop over each label
(function (label) { // catch label in scope
fn = function () {
if (this.value === '') {
label.style.visibility = 'visible';
} else {
label.style.visibility = 'hidden';
}
};
focus = function () {
label.style.color = focusColor;
};
blur = function () {
label.style.color = blurColor;
};
}(labels[j]));
n.addEventListener('click', fn); // add to relevant listeners
n.addEventListener('keydown', fn);
n.addEventListener('keypress', fn);
n.addEventListener('keyup', fn);
n.addEventListener('focus', fn);
n.addEventListener('focus', focus);
n.addEventListener('blur', fn);
n.addEventListener('blur', blur);
}
}(named[i]));
}
};
placeholder("email"); // just pass the name attribute
placeholder("firstName");
placeholder("lastName");

http://jsfiddle.net/cCxjk/5/
var inputs = document.getElementsByTagName('input');
var old_ele = '';
var old_label ='';
function hide_label(ele){
var id_of_input = ele.target.id;
var label = document.getElementById(id_of_input + '-placeholder');
if(ele.target == document.activeElement){
label.style.display = 'none';
}
if (old_ele.value == '' && old_ele != document.activeElement){
old_label.style.display = 'inline';
}
old_ele = ele.target;
old_label = label;
}
for(var i = 0; i < inputs.length; i++){
inputs[i].addEventListener('click', hide_label);
}
I will point out a couple things, you will have to find away around the fact that the label is inside the input so users now can't click on half of the input and actually have the input gain focus.
Also I guess you want to do this in IE (otherwise I would strongly advise using the html5 placeholder!) which means you would need to change the ele.target to ele.srcElement.

Can we get radiobuttonList.Items.Count in .aspx page

Can we get the count of total radiobuttonlist items from .aspx page. I have to call a javascript function onclientclick of a button and i want to loop through the total number of radiobuttonlist items. So can anyone tell me that can we get it from .aspx page. Because in my scenario i can not use code behind for this.
function ClearRBL() {
for (i = 0; i < RBLCOUNT; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
How can i get RBLCOUNT here from .aspx page only? If not possible then in Javascript please.

I don't know how the aspx side would work, but if you want to do it just in JavaScript you could do something like the following that doesn't need to know the total number of elements in advance:
function ClearRBL() {
var i = 0,
rbl;
while (null != (rbl = document.getElementById('rblWorkerList_' + i++)))
rbl.checked = false;
}
The above assumes that the element ids end in numbers beginning with 0 counting up by 1s; the while loop will keep going until document.getElementById() doesn't find a matching element (in which case it returns null). A less cryptic way of writing it is as follows:
function ClearRBL() {
var i = 0,
rbl = document.getElementById('rblWorkerList_' + i);
while (null != rbl) {
rbl.checked = false;
i++;
rbl = document.getElementById('rblWorkerList_' + i);
}
}
P.S. When the while loop finishes i will be equal to the number of radio buttons, which may be useful if you want to do something with that number afterwards.

Try this:- This is not exactly what you want but hope it will help you.
function GetRBLSelectionID(RadioButtonListID) {
var RB1 = document.getElementById(RadioButtonListID);
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
var retVal = "";
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
retVal = radio[i].id;
break;
}
}
return retVal;
}

you can give a name all radio button and then get them like this.
var RBLCOUNT= document[groupName].length;
or
var RBLCOUNT= 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if(inputs[i].type =="radio"){
RBLCOUNT++;
}
}

I just created a javascript function as mentioned by Karthik Harve and found the total number of rows generated dynamically as below: -
function ClearRBL() {
var rblLen = document.getElementById('rblWorkerList');
for (i = 0; i < rblLen.rows.length; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
It's working on both Mozila and IE.
Thanks alot to all who tried to help.

Checkboxes in Javascript

Here's the deal. The task is to write a function which should be able determine the number of checkboxes checked for each question and prompt a user if more than 3 answers were selected.
I have a total of 8 questions and each question has 4 to 8 answers, in the checkbox format.
This is what I came up with:
function countChecks(){
var m = 0;
var n = 0;
chk = document.getElementsByName("DSelectionID");
for(var i=0; i<myitems.length i=""></myitems.length>
var value = myItems[i];
for(n = 0; n < value.length; n++) {
if(value[n].checked) {
m++;
}
}
return m;
}
the above function works fine for one question and returns 'm' to the main function, which handles it this way:
var check = countchecks();
if (check > 3)
alert ("more than 3 checkboxes were selected");
else {
//do the thing
}
to traverse all the 8 questions this is what I came up with:
function countChecks(){
var m = 0;
var n = 0;
//this captures id's for the right questions
chk = document.getElementsByName("DSelectionID");
chk2 = document.getElementsByName("DSelectionID2");
chk3 = document.getElementsByName("DSelectionID3");
chk4 = document.getElementsByName("DSelectionID4");
chk5 = document.getElementsByName("DSelectionID5");
chk6 = document.getElementsByName("DSelectionID6");
chk8 = document.getElementsByName("DSelectionID8");
chk9 = document.getElementsByName("DSelectionID9");
var myItems = new Array();
myItems[0]= chk;
myItems[1]= chk2;
myItems[2]= chk3;
myItems[3]= chk4;
myItems[4]= chk5;
myItems[5]= chk6;
myItems[6]= chk8;
myItems[7]= chk9;
//loops through all the questions
for(var i=0; i
var value = myItems[i];
//loops through the checkboxes for each question
for(n = 0; n < value.length; n++)
{
if( value[n].checked)
{
m++;
if (m > 3) {
return false;
}
}
}
}
}
and the main body handles it like this:
var check = countChecks()
if (check == false)
alert ("more than 3 checkboxes were selected");
else {
//do the thing
}
It is something very simple I'm missing in the countChecks() function
Any ideas?

Using jquery would make this pretty trivial
if ($('#yourform input[type=checkbox]:checked').length() > 3) {
alert('More than 3 checked');
}

chk = document.getElementsByName("DSelectionID"); does not grab the ID, it grabs a reference to the element in the DOM.
To get the ID you need to use:
chk = document.getElementsByName("DSelectionID").getAttribute("id")