How to get the CheckBoxlist value using JavaScript - javascript

Using below javascript function can able to get the all the text of checkbox list. But can't able to get the value (It passing as "on").
var CHK = document.getElementById("<%=chkFun.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var label = CHK.getElementsByTagName("label");
var listOfSpans = chkBox.getElementsByTagName('span');
for (var i = 0; i < checkbox.length; i++) {
var value = checkbox[i].value;
alert("Selected = " + label[i].innerHTML); //Get the text
}

The default value of a checkbox is "on" which is what you are getting. You are not setting the value of the checkbox properly.
If the value attribute was omitted, the default value for the checkbox is on , so the submitted data in that case would be [name]=on.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Related

I can't assign value from hiddenField into loop in JavaScript

Like in subject I have value getting from server side to hidden field and then I want to loop for this value to shows mine divs, but it didn't work (When I just input var i = 0 it normally works) Here is my code:
var numberOfDivs = parseInt(document.getElementById('<%= numberOfShowedDivs.ClientID %>').value);
var i = numberOfDivs;
function appendText() {
i++;
$("#task" + [i]).show(300);
document.getElementById('<%= numberOfShowedDivs.ClientID %>').value = i;
}
What is wrong?

Get the selected value in google app script

How to pass a select box value.
I have a spreadsheet where i want to filter based on a select box value.
I made a way to call the app function on form submit. But I am not able to pass one more parameter at the other side.
I want to filter based on the select box value and thereby retrieve the result from the spreadsheet on to the web app. This is my selectbox in html.
Select DATA
<select name ="productId" id="gettheVAL">
<option>DATA1 </option>
<option>DATA2 </option>
<option>DATA3 </option>
</select>
Can anyone guide me on this? I have called the function via this
form.on('submit', function(event){
event.preventDefault();
runner.withSuccessHandler(function(array){
for (var i = 0; i < array.length; i++) {
var item = '<tr><td>' + array[i] +'</td></tr>';
table.append(item);
}
}).retrieveValuesFromForm(this);
Update
Adding the function - retrieveValuesFromForm below:
function retrieveValuesFromForm(req) {
//var selectedvalue=$('input[name="gettheSelectValue"]:checked').val();// tried like this but $ is undefined here
var sheetActive = SpreadsheetApp.openById("SHEETID");
var sheet = sheetActive.getSheetByName("SHEETNAME");
var range = sheet.getRange('A:U');
var rawData = range.getValues();
var data = [];
for (var i = 0; i < rawData.length; i++) {
if ((rawData[i][2] == selectedvalue)) // Check to see if column 3 says selectedvalue if not skip it
{
//processing
}
}
return data;
}
Based on the assumption that you have a field in your form such as
<select name ="productId" id="gettheVAL">
In your form, You could call your Google App Script function with the following parameter
runner.withSuccessHandler(function(array){
...
}).retrieveValuesFromForm($("#gettheVAL").val());
You would then change the signature for retriveValuesFromForm
function retrieveValuesFromForm(selectVal) {
...
}
Here's how I pass a selected option and a few other things.
function sendText()
{
var culr=$('input[name="priority"]:checked').val();
var type=$('#sel1').val();
var txt=$('#txt1').val();
var obj={'type':type,'text':txt,'color':culr};
$('#txt1').css('background-color','#ffff00');
google.script.run
.withSuccessHandler(clearText)
.dispText(obj);
}
I'm guessing that you need to add this line into your head tag area.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Javascript validation on select input

I am trying to make a javascript validating form, and am a bit stuck on validating drop down inputs (select)
I have been using this so far but am unsure on how to implement the validation to the select options, if anyone could give me some tips that would be great.
Edit: Also, how would I implement email validation, e.g containing #, thanks
Thanks
<input id="firstname" onblur="validate('firstname')"></input>
Please enter your first name
Thanks
http://jsfiddle.net/ww2grozz/13/
you need to handle select as follow
var validated = {};
function validate(field) {
// Get the value of the input field being submitted
value = document.getElementById(field).value;
// Set the error field tag in the html
errorField = field + 'Error';
// Set the success field
successField = field + 'Success';
if (value != '') {
document.getElementById(successField).style.display = 'block';
document.getElementById(errorField).style.display = 'none';
validated[field] = true;
} else {
document.getElementById(successField).style.display = 'none';
document.getElementById(errorField).style.display = 'block';
validated[field] = false;
}
}
function SimulateSubmit() {
// Query your elements
var inputs = document.getElementsByTagName('input');
// Loop your elements
for (i = 0, len = inputs.length; i < len; i++) {
var name = inputs[i].id;
if (!validated[name]) {
// Call validate
validate(name);
// Prevent default
}
}
var all_select = document.getElementsByTagName("select"); // get al select box from the dom to validate
for (i = 0, len = all_select.length; i < len; i++) {
var name = all_select[i].id;
if (!validated[name]) {
// Call validate
validate(name);
// Prevent default
}
}
}
here the Working fiddle
using jQuery function
$('input').on('keyup', function() {
var isValid = $.trim($(this).val()) ? true : false;
// show result field is Valid
});
You must use <form> tag and set your action to it I have done that check this link and I have added select tag and set it to -1 by default for checking purpose while validating

create html field based on js variable value

I have a property called results.row in JS. Using the value of that, I have to create textboxes in html. Suppose the value of results.row is 5,then I want to create 5 textboxes in html.
Also, the data to be shown on the textboxes is inside results.rows.item(i) . Is it possible to display?
HTML
<textbox name="Medicine Name" id="medicine"/>
JS
var rows = 5;
for (var i = 0; i < rows; i++)
{
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.value = 'value here ' + i;
document.getElementsByName('medicine')[0].appendChild(textbox);
}

Need a solution to this javascript coding problem

I have a SELECT in a FORM.
This select is populated using js.
I need to add a "Selected" attribute to one of these options.
I get which one, by checking a MySql database to see the name of the community which needs to have a "selected attribute" added to it.
<select name="community" id="community">
//OPTIONS HERE
</select>
The filler() function:
function filler(com){
//com is the options which needs to be selected, this variables value comes from the mysql database
var community = document.getElementById("community");
var area = document.getElementById("area").value;
// area is just another input on the page which value also is fetched from mysql db. Each area has x communities, so I have alot of IF:s.
if(area == 'Blekinge') {
community.length = 6;
community.options[0].value = "Välj Kommun";
community.options[0].text = "-- Välj Kommun --";
community.options[0].id = "Välj Kommun";
community.options[1].value = "Karlshamn";
community.options[1].text = "Karlshamn";
community.options[1].id = "Karlshamn";
community.options[2].value = "Karlskrona";
community.options[2].text = "Karlskrona";
community.options[2].id = "Karlskrona";
community.selected = 0;
}
}
As you can see, "com" variable is the option which needs to have the "selected" attribute added to it.
I have over 30 of these if-statements, and I have no clue how to create a function to add this "Selected" attribute to the matching option.
So I have "com" which for example could be "Karlskrona" in the example above. How should I add the selected to it?
I need a simple function for this which works in all major browsers...
Set the selectedIndex property of the SELECT to whichever index you need. Zero-based, of course.
Just do
community.value = com;
example at http://www.jsfiddle.net/jMapA/
for(var i = 0; i < community.options.length; i++) {
if(community.options[i].id == com)
community.selectedIndex = i;
}
function selectOptionValue(selectId, value)
{
select = document.getElementById(selectId);
if (select)
{
for (var i = 0; i < select.options.length)
{
if (select.options[i].value == value)
{
select.options[i].selected = 'selected';
return true;
}
}
}
return false;
}
Use my function like this:
selectOptionValue('community', 'Karlskrona');

Categories