Develop Reference

How do I get the id of a element in a form?

I need to get the id of an element within a form so I can tag the element as "false" or "true". Or, alternately, I need a way to associate a name with an element that can I pull in javascipt so I can change the associated value.
var form = document.getElementById("myForm");
form.elements[i].value
Those lines of code is what I tried but it doesn't seem to work.
Edit:
function initial(){
if (localStorage.getItem("run") === null) {
var form = document.getElementById("myForm").elements;
for(var i = 0; i < 1 ; i++){
var id = form.elements[i].id;
sessionStorage.setItem(id,"false");
}
localStorage.setItem("run", true);
}
}
So basically when I run the page, I want a localStorage item attached to all the buttons on the screen. I want this to run once so I can set all the items to false. Problem is I don't know how to get the ids so I have a value to attach to the button. Any idea of how to accomplish a task like this.
Edit2:
function initial(){
if (localStorage.getItem("run") === null) {
var form = document.getElementById("myForm");
var tot = document.getElementById("myForm").length;
for(var i = 0; i < tot ; i++){
sessionStorage.setItem(form.elements[i].id,"false");
}
localStorage.setItem("run", true);
}
}
This is the new code. It mostly seems to work but for some reason only the first value is getting set to false. Or maybe it has to do with this function, I'm not sure.
function loader(){
var form = document.getElementById("myForm");
var tot = 5;
for(var i = 0; i < 5 ; i++){
if(sessionStorage.getItem(form.elements[i].id) === "true"){
document.getElementById(form.elements[i].id).style.backgroundColor = "green";
return ;
}else{
document.getElementById(form.elements[i].id).style.backgroundColor = "red";
return false;
}
}
}
Anyways, I'm running both of these at the same time when the page is executed so they are all set to false and turn red. But when a button is properly completed, the color of the button turns green.

It's available via the id property on the element:
var id = form.elements[i].id;
More on MDN and in the spec.
Live Example:
var form = document.getElementById("myForm");
console.log("The id is: " + form.elements[0].id);
<form id="myForm">
<input type="text" id="theText">
</form>

You're already storing all the elements in the form so it must be :
var form = document.getElementById("myForm").elements;
var id = form[i].id;
Or remove the elements part from the form variable like :
var form = document.getElementById("myForm");
var id = form.elements[i].id;

How to change asp.net DropDownList SelectedValue using javascript?

I have three dropdownlist controls in my asp.net web app project from which the user will choose items. What I want is that the user must not choose the same values, meaning that the value selected in the one Dropdownlist can not be selected in the other dropdownlist, and if the user tries to select the same value I want to reset the selectedValue property to that dropdownlist. Is there anyway I can achieve this using javascript? It's better to make it on the client side.
Thank you!
The Dropdownlist Looks like this: Image here

First add same class name in all three dropdowns. e.g
'class=dropdownClass'
Add dropdown Number as attribute in all
three dropdowns -> 'dropdownNo=1' , 'dropdownNo=2' , 'dropdownNo=3'
Also add ids (it must be different)-> dropdownId1 , dropdownId2 ,
dropdownId3 respectivitely
<script>
$(document).ready(function () {
$('.dropdownClass').on('change', function () {
//when ever any dropdown change (class name is same)
//get the attribe no
var CurrentdropdownNo = $(this).attr('dropdownNo')
var CurrentdropdownValue = $(this).val();
if (CurrentdropdownNo == 1) {
var value2 = $('#dropdownId2').val() ;
var value3 = $('#dropdownId3').val() ;
//check with dropdown 2,3
if (CurrentdropdownValue == value2 || CurrentdropdownValue == value3)
{
//reset the current dropdown
//do stuff here , what you want
}
}
if (CurrentdropdownNo == 2) {
var value1 = $('#dropdownId1').val();
var value3 = $('#dropdownId3').val();
//check with dropdown 1,3
if (CurrentdropdownValue == value1 || CurrentdropdownValue == value3) {
//reset the current dropdown
//do stuff here , what you want
}
}
if (CurrentdropdownNo == 3) {
var value1 = $('#dropdownId1').val();
var value2 = $('#dropdownId2').val();
//check with dropdown 1,2
if (CurrentdropdownValue == value1 || CurrentdropdownValue == value2) {
//reset the current dropdown
//do stuff here , what you want
}
}
})
})
Note: Change class name Or id name as want ..

Use change Event of every dropdownlist
this is just one change event that i use for Dropdownlist. Do same thing for other drowpdownlists.
var firstDropVal="";
var SecndDropVal="";
var ThrdDropVal ="";
$("#dropOne").change(function () {
var firstDropVal = $("#dropOne").val();
var firstDropVal = $("#dropTwo").val();
var firstDropVal = $("#dropThree").val();
if(firstDropVal == SecndDropVal){
$("#dropOne").val(0)// Or Do what you want to do
}
});

JS add attribute to string

I have a post ajax that return retorno1 and just to get it simple i put their output as string value as ajax posted like the example .. then I need to add more than 1 option that the value is 0 so I need to say if the value is 0 show the selected item "NON" and if the value other so show it and select it.
I'm using setAttribute("selected", "selected") but I know it's wrong, so what is the correct code to add attribute to this string?
var i = 0;
var returno1 = "<option value='21'>Hello</option><option value='22'>Bye</option>";
var pre = retorno1 + '<option value="0">------ N/A ------</option>';
var count = $($.parseHTML(pre)).filter('option').length;
var dep_dr = $("#departamento_drop option:selected").val();
$.each($.parseHTML(pre),function(i,item){
var val_drop =($(item).val());
var text_drop =($(item).html());
if (val_drop == dep_dr){
jQuery("#departamento_drop").html(pre).setAttribute("selected", "selected");
}else if(dep_dr == "0"){
jQuery("#departamento_drop").html(pre).setAttribute("selected", "selected");
}
})

Working fiddle
Try to use attr() or prop() to set or get attribute to elements, check example bellow :
jQuery("#departamento_drop").empty();
$.each($.parseHTML(pre),function(i,item){
var current_itme=$(item);
var val_drop =current_itme.val();
var text_drop =current_itme.html();
if (val_drop == dep_dr || dep_dr == "0"){
current_itme=current_itme.attr("selected", "selected");
}
jQuery("#departamento_drop").append(current_itme);
})
Hope this helps.

Why do you need use strings? Use objects insted.
var values = [{val:33, title:'Hi'},{val:34, title:'Bue'},{val:0, title:'-------NA-------'}],
selected = 34;
values.forEach(function(item){
$('#dd').append($('<option>', {value:item.val, text:item.title, selected: item.val==selected}));
})

jquery function select custom attribute from select box

I am trying to get the custom attribute values from the select box. It is triggered by a checkbox click which I already have working. I can get the name and value pairs just fine. I want get the custom attributes (therapy) (strength) (weight) and (obstacle) from the option value lines. is this possible?
select box
<option value="2220" therapy="1" strength="1" weight="0" obstacle="0">Supine Calf/Hamstring Stretch</option>
<option value="1415" therapy="0" strength="0" weight="0" obstacle="0">Sitting Chair Twist</option>
<option value="1412" therapy="0" strength="0" weight="0" obstacle="0">Static Abductor Presses</option>
jQuery
// exercise list filter category
jQuery.fn.filterByCategory = function(checkbox) {
return this.each(function() {
var select = this;
var optioner = [];
$(checkbox).bind('click', function() {
var optioner = $(select).empty().scrollTop(0).data('options');
var index=0;
$.each(optioner, function(i) {
var option = optioner[i];
var option_text = option.text;
var option_value = parseInt(option.value);
$(select).append(
$('<option>').text(option.text).val(option.value)
);
index++;
});
});
});
};

You need to find the selected , like this:
var $select = $('#mySelectBox');
var option = $('option:selected', $select).attr('mytag');

That is how to get selected option attribute:
$('select').find(':selected').attr('weight')

Get selected option and use attr function to get the attribute:
$("select").find(":selected").attr("therapy")
JSFIDDLE

Loop through gridview rows on client-side javascript

I have a gridview with a template field of check boxes.
I have my rows color coded in BLUE color in the gridview based on a database value on page load.
Now I want a button on the page to loop through the gridview and select the the checkbox for the rows that are in BLUE Color without a post back.
any help would be appreciated.
thanks.

Loop through gridview rows on client-side javascript
var GridviewRows = $("#<%=gvbooksdetails.ClientID%> tr").length;
var rowlenght = GridviewRows - 1;
for (var i = 0; i < rowlenght; i++)
{
var Aname = document.getElementById("MainContent_gvbooksdetails_lblgvauthorname_" +[i]+"").innerHTML;
var Bname = document.getElementById("MainContent_gvbooksdetails_lblgvbookname_" +[i]+ "").innerHTML;
var BType = document.getElementById("MainContent_gvbooksdetails_lblgvbooktype_" +[i]+ "").innerHTML;
var Pubilication = document.getElementById("MainContent_gvbooksdetails_lblgvPublisher_" + [i] + "").innerHTML;
var Bid = document.getElementById("MainContent_gvbooksdetails_hiddenid_"+[i]+"").value;
}
Instead of foreach we can use this method.

$('#mygrid tr.blueClass input[type="checkbox"]').each(
function() {
this.checked = true;
});
Assuming mygrid is the name of your gridview, and each blue row has a class called blueClass