JS DOM - Difference between document.getElementById & selecting by name [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have code like this:
<form name="selectForm">
<select multiple name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br />
<input type="button" value="Select Cars" onclick="alert('You selected ' + howMany(document.selectForm.cars) + ' cars')" />
</form>
My main question is about this line: document.selectForm.cars
what does this do and where can I find relevant information to read up on it? Why is it not using the usual getElementBy...? Mozilla only gives interfaces that are not relevant to this.

You are unlikely to see this pattern in more recent tutorials because it is a bit archaic:
document.selectForm
refers to to the form element with the name (or possibly id) attribute of selectForm. document.selectForm.cars is the <select> element inside it named cars. This old style of using document.*name* to refer to elements on the page should be replaced by document.getElementsByName or (after giving the form an ID) document.getElementById in modern code.
You could have figured this out by going to the console and typing document.selectForm, and you would have seen the element displayed

Related

Get the ID of an option in select dropdown [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 months ago.
Improve this question
I have a select dropdown:
<select onChange={(e)=> console.log(e.target.id)} id="cars" name="carlist" form="carform" >
<option id="a" value="volvo">
Volvo
</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I would like to get the ID a when selecting 'volvo' from the dropdown, thus getting the ID of the option, how can I achieve this?
The reason why I'm trying to get an id is because this dropdown can have multiply options with the same name (they would be separated by a line)
Use the selectedIndex to get this.
var getId = document.querySelector('#cars');
console.log(getId.options[getId.selectedIndex].id);
You can have the pass the reference of 'this' and get it from there.
something like the below answer
How to get selected option ID with Javascript not JQuery

How to show text in a textbox based on selected value? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm working on my MVC project and need to bind selected value with textbox - what I mean is when you choose an item on a selected list then this value appears in a text box. Here is an example:
<div class="row">
<select id="chasis" name="type">
<option value="sedan">sedan</option>
<option selected value="hatchaback">hatchback</option>
<option value="cabrio">cabrio</option>
<option value="coupe">coupe</option>
</select>
</div>
<label>Your choice is: <input id="chasisText" type="text" value=""></label>
and jQuery code:
<script>
$(function() {
$("select#chasis").change(function(e){
$("#chasisText").val(e.target.value);
});
});
</script>
This code works well but my question is if there is any other way to show selected value in a textbox? Maybe easier or more tricky?
add jquery cdn to head part of your HTML if you havent added, ignore if already added.
add chasisChange function to select
<select id="chasis" onchange="chasisChange()" name="type">
below Jquery function (chasisChange()) will be executed when value changes of select portion of HTML.
function chasisChange(){
var val = $('#chasis').val();
console.log(val);
$('#chasisText').val(val);
}
working example

Write-in option with dropdown option [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
how to include write-in option after drop-down option in html or javascript. As an example in the coding below,
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
But the user's choice wasn't in the list given (e.g. Honda). so he/she can write their option in 'others' option.
Apologies for my english. Thanks in advance.
It seems you may want to use the <datalist> along with an <input>, which offers the functionality you're looking for; in the below example if the user types S then the option of Saab will show up which can be selected, or the user can continue to type to add a new option to the list:
<datalist id="carOptions">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</datalist>
<input type="text" name="automaker" list="carOptions" />
While this may not be precisely what you're hoping for it does offer the functionality you require without a dependence on JavaScript.
References:
* <datalist>.
* HTMLDataListElement.
You can easily do that with jquery.
$('#dropdownId').append($('<option>', {
value: -1,
text: 'None of them work for me..'
}));
And just handle the case when the value is -1

Allowing users to edit font family [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
How can I allow users of my website to edit the font family?
I want a drop down on a page that changes the font of the site. It should happen instantly, not needing a button click if possible.
How do I do this?
Improving - try this little jQuery
<html>
<head><title>Test</title></head>
<body style="font-family: Helvetica;">
<select name="ListMenuId" id="ListMenuId">
<option value="">Change this</option>
<option value="1">This change the font family to Verdana</option>
</select>
<select name="ListMenu2" id="ListMenu2">
<option value="">Change for selected font-family</option>
<option value="Verdana">This change the font family to Verdana</option>
<option value="Arial">This change the font family to Arial</option>
<option value="Helvetica">This change the font family to Helvetica</option>
<option value="Times New Roman">This change the font family to Times New Roman</option>
</select>
</body>
<script type="text/javascript">
$(function(){
$('#ListMenuId').change(function(){
$('body').css('font-family', 'Verdana'); // Specific font-family
});
$('#ListMenu2').change(function(){
$('body').css('font-family', $(this).val()); // Gets font-family from list menu option value
});
});
</script>
</html>
You can use jQuery to do this easily:
$("body").css("font-family","Arial");

In multi dropdown , How can i get the currently removed value [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I get the currently removed value from a multi dropdown box.
For example
<select name="select[]" multiple id="select1">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>"
I first select 1 then 2 and after that I deselect 2 . I need a j query to get me the value 2. Is that possible.
Thanks in advance...
Try this
<script>
var last_value = 1;//put the value default of your select
$(document).ready(function(){
$('#select1').change(function(){
alert(last_value);
last_value = $(this).val();
});
});
</script>
DEMO

Categories

Resources