How to get a DOM using dojo by the tag name?
I have a html code like this :
<select name="limit">
<option value="10">10</option>
<option value="25">25</option>
</select>
in jQuery framework, it will be:
var limit = $("select[name=limit]");
...but in Dojo framework, what must I do ?
Should I use dojo.query("select[name=limit]") ?
Yes, dojo.query("select[name=limit]") is correct, but remember that in dojo, it returns an array (even if there is only one match in the DOM). So to get the first (and possibly only) match, you need select the first element:
var limit = dojo.query("select[name=limit]")[0];
Consider you have an input field named 'myInput'. <input id="1" name="myInput" />
For getting a value (or other attribute) use following:
([0] define index of your component)
dojo.query('[name="myInput"]').attr('value')[0];
If you want to set some value, you will do this:
dojo.query('[name="myInput"]')[0].value = 'newValue';
Related
I want to get the data inside "opt_id".
And the same code works when i use selelct tag insted of datalist.
This is how my code looks like:
var get_data = document.getElementById("select_opt");
var dataIndex = get_data.options[get_data.selectedIndex].getAttribute("opt_id");
<input id="optio_lists" list="options" placeholder="Search...">
<datalist id="select_opt">
<option opt_id="0" label="Cricket">Cricket</option>
<option opt_id="1" label="Football">Football</option>
<option opt_id="2" label="Tennis">Tennis</option>
<option opt_id="3" label="Basketball">AKITA</option>
</datalist>
In your script tag in the get_data variable at document.getElementById() you have misspelled the id - instead of select_opt you have written select_op.
Data list is just a source of data and is different from a select box. Hence selectedIndex property doesn't makes sense here.
Check this link for more details - Is there a SelectedIndex for an HTML5 DataList?
I have a specific problem with multiple select values.
<form id="form-to-submit">
<select multiple="true" name="sel" id="sel">
<option id="0_1" value="0">Bacon</option>
<option value="1">Pickles</option>
<option id="0_3" value="2">Mushrooms</option>
<option value="3">Cheese</option>
</select>
</form>
<button id="setValues">Set Values</button>
JS:
$("#setValues").click(function() {
$("#sel").find("option").removeAttr("selected");
$("#0_1").attr("selected","selected");
$("#0_3").attr("selected","selected");
});
I've crated a JSfiddle which shows the problem:
When you click on Set Values button, it clears all options selected attribute, then sets it to selected for first and third options.
PROBLEM: In Firefox after second click on Set Values button, it clears the selection values.
In other browsers it works well.
Any ideas?
Instant solution!!!!
$("#0_1").prop("selected", true);
$("#0_3").prop("selected", true);
Some explanation ?!!?
So, what's the difference between .attr() and .prop()!!!
Basically, properties are of DOM elements whereas attributes are for HTML elements which are later parsed into DOM tree using browsers parser.
Because of some inconsistent behaviour amongst different browsers it's preferred to use .prop() instead of .attr().
Quoted from jQuery API Documentation :
"To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."
There are lot's of reasons you want to switch to .prop(). Here's a great thread that helped me to dive into more of .attr() and .prop() ;)
.prop() vs .attr()
Two things:
To set the selected state, use prop, not attr.
In CSS selectors, and id cannot start with a digit, so #0_1 and #0_3 are invalid selectors. (They happen to work because of an optimization in jQuery where something that's obviously an id selector on its own ends up going to getElementById instead of a CSS selector parser like querySelectorAll or Sizzle's own parser, but it's not something you should rely on. For instance, if you had an element with id="123" and an element inside it with class foo, $("#123 foo") would throw an error.)
Fixes:
<form id="form-to-submit">
<select multiple="true" name="sel" id="sel">
<option id="x0_1" value="0">Bacon</option>
<option value="1">Pickles</option>
<option id="x0_3" value="2">Mushrooms</option>
<option value="3">Cheese</option>
</select>
</form>
<button id="setValues">Set Values</button>
$("#setValues").click(function() {
$("#sel").find("option").removeAttr("selected");
$("#x0_1").prop("selected",true);
$("#x0_3").prop("selected",true);
});
Updated fiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can I apply the required attribute to <select> fields in HTML5?
I'm using the html5 contact form from here but I'm having issues trying to make the <select> field required. Everything else works fine, just having trouble with this and the dev hasnt responded when I asked about the field. this is what I have
<select name="package" id="package" title="Please choose a package" class="required">
<option value="">------------------</option>
<option value="basic">Basic</option>
<option value="plus">Plus</option>
<option value="premium">Premium</option>
</select>
What am I missing to get this working correctly?
I believe that the top answer to this question is what you're looking for.
To quote,
This works for me - Have the first value empty - required works on empty values.
<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
check this: http://www.w3.org/TR/html-markup/select.html
global attributes
Any attributes permitted globally.
name = string
The name part of the name/value pair associated with this element for the purposes of form submission.
disabled = "disabled" or "" (empty string) or empty
Specifies that the element represents a disabled control.
form = ID reference NEW
The value of the id attribute on the form with which to associate the element.
size = positive integer
The number of options to show to the user.
multiple = "multiple" or "" (empty string) or empty
If present, indicates that its select element represents a control for selecting zero or more options from a list of options.
If not present, indicates that its select element represents a control for selecting a single option from a list of options.
autofocus = "autofocus" or "" (empty string) or empty
Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
required = "required" or "" (empty string) or empty
Specifies that the element is a required part of form submission.
so you require a required = "required" attribute to your <select>
If you have a better browser, you can try this (like in this thread):
<select required>
<option value=""></option>
<option value="basic">Basic</option>
<option value="plus">Plus</option>
<option value="premium">Premium</option>
</select>
, but still you should use JavaScript because not a lot of people have browsers that support HTML5 required attribute. It's not supported by IE and Safari.
<select id="wbox" name="listbox" size="20"onchange="call(this)">
<optgroup label="Taxes">
<option value="1694" label="DNA-option1"></option>
<option value="1642">RNA-option2</option>
I have a list box that I would like to extract the label of the selected option, and use it in a JavaScript function.
function call(op) {
alert(op.label);
alert(op.name);
alert(op.value);
var x = op.label;
}
However this always returns as label, undefined. I've tried changing the way the option label is written in the html. This might not be the best way to write the java script function. I absolutely cannot use the option value, it is a unique id and used for something else. Any suggestions on what I am doing wrong or a better way to do this?
To get the selected <option>, you need to use the selectedOptions property. This is an array, because <select> tags can (optionally) support multiple selection. This array contains <option> tag objects, so you should be able to get your label using op.selectedOptions[0].textContent.
I guess:
<select id="wbox" name="listbox" size="20" onchange="call(this.selectedOptions)">
<optgroup label="Taxes">
<option value="1694" label="DNA-option1">RNA-option1</option>
<option value="1642" label="DNA-option2">RNA-option2</option>
</select>
<script type="text/javascript">
function call(op){
for(var i=0;i<op.length;i++){
console.log('Label: '+ op[i].getAttribute('label'));
}
}
</script>
I was working on a script that grabs the value from the selected option in a drop down select list and assigns it to an object. The only problem I'm having is that it's saying I have a null object.
The .js is as follows:
var s = document.getElementById('mode');
alert(s.options[s.options.selectedIndex].value);
function selectValue(){
yo.newSelect(s.options[s.options.selectedIndex].value);
return true;
}
The HTML is as follows:
<div id="text_editing">
<form action="javascript:;" method="post" onsubmit="editHomePage()">
<select name="CYD" id="mode" onchange="selectValue()">
<option value="Home">Home</option>
<option value="About">About</option>
<option value="Contact">Contact</option>
</select>
<textarea name="sexyText" row="500" col=500">
</textarea>
<input value="submit" name="text_submit" type="submit" onclick="selectValue()">
</form>
I'm just looking for a solution in plain js. I not interested in using jQuery for such a small site.
If all your options have a value, you can simply write:
alert(s.value);
which will return the value of the first selected option (so not suitable for multiple selects with more than one selected).
Incidentally, from your listener you could do:
<input type="submit" onclick="selectValue(this)">
then in the function:
function selectValue(el) {
alert(el.form.mode.value);
}
It looks like initially, none of the options are selected; therefore, s.options[s.options.selectedIndex] would be null when the page first loads.
I would recommend using the Firebug plugin for Firefox to step through your code; you can easily identify these kinds of issues using the debugger.