We Keep Coding

using jQuery to get selected value from form

I have a form that has a select field defined like this
The myName[] is like that because there are several repetitions in the sign-up form (the user first defines how many he wants to enter, and then that many forms are generated)
Now I would like to get the selected value using jQuery whenever somethign is selected, but as expected, it won't work: it's trying to get the info from an id, and there's more than one of this id. The result is that it's always getting the content of the first select field with the id it finds. I tried changing the id to a class, but that didn't work.
So how can I get the selected value of the select box that's actually triggering the event?
$(document).ready(function() {
$('#idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
alert(naam);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" id="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>

Why can't you just use $(this).val(), if you want the selected Element?
But yes, when you've got multiple of the same ID, jQuery will over ever select the first one it finds - Though you do seem to know this; I've changed it to a class in this demo
$(document).ready(function() {
$('.idOfmyName').on('change', function() {
alert($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="edward">Edward </option>
<option value="vivian">Vivian </option>
</select>

for multiple you can do something like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<script>
$(document).ready(function() {
var names = [];
$('.idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
if($.inArray(naam,names)){
names.push(naam);
}
alert(names);
});
});
</script>

Vanilla JavaScript way to get selected value using onchange method
function getSelectedValue(val) {
alert(val);
}
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>

check required field in Javascript on different button

i am not too good with java Script but trying to learn few things in different ways and this community always help me to learn such stuff.
i need some help from you guys again. below is my code and what i want is.
i have different dropdowns on a single page, with different buttons to run different queries in php. but i want to make sure that drop should have some selected value before proceeding to php query on button click. i am not able to perform this task, below is the sample which is definitely wrong. i want on button click "fun" Myfunction should run which should check that proper value is selected from drop down s1 and here s2 value is not required. and same is with 2nd button vice verse. kindly help and any idea would be appreciated.
function myFunction() {
document.getElementById("s1").value = "required"
}
function myFunction1() {
document.getElementById("s2").value = "required"
}
dd1:
<select id="s1">
<option>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<br>dd2:
<select id="s2">
<option>Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br>
<br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction1()">fun1</button>

You have to check value of document.getElementById("s1").selectedIndex and ...(s2) as following:
function myFunction() {
var s1 = document.getElementById("s1").selectedIndex;
var s2 = document.getElementById("s2").selectedIndex;
if (s1<1 && s2<1) {
alert("Please select atleast one item from dropdowns!");
return false;
};
}
<html>
<body>
dd1:<select id="s1">
<option >Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option >Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction()">fun1</button>
</body>
</html>

Using jQuery will do the trick. You just need to check the value of your select component. To achieve this, you should first add a value for when nothing is selected:
dd1:<select id="s1">
<option value="0">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option value="0">Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
Now, when nothing is selected, the value of your component will be 0. To check this values, you have to do something like this:
function myFunction() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
function myFunction1() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
Using vanilla
If you don't want to use jQuery for whatever the reason, you just have to change var selectedValue1 = $('#s1').val(); for var selectedValue1 = document.getElementById('s1').value;.
I hope this helps :)

jQuery select option last doesn't work

I've got a button and list of options. The idea is that when user clicks the button the default option changes from disabled to max value. And oposite - if the input is not checked, the default is again disabled.
But the value returns undefined. If I change the first and thelast to numeric values, everything works fine. What's wrong?
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected> -- choose -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
jQuery(function(){
jQuery(".input").click(function(){
var thefirst = jQuery(this).next('#select option:first').val();
var thelast = jQuery(this).next('#select option:last').val();
if( jQuery(this).is(':checked') )
jQuery(this).next('#select').val(thelast);
else
jQuery(this).next('#select').val(thefirst);
});
});

.next() gets the next sibling, so you need to get the select and use .find() or .children() afterwards:
var thefirst = jQuery(this).next('#select').find('option:first').val();
var thelast = jQuery(this).next('#select').find('option:last').val();

Since IDs must be unique, there's no point in doing something like:
jQuery(this).next('#select option:first')
when
jQuery('#select option:first')
would suffice, plus .next() would fail here since it evaluates the siblings of an element and filters on anything you pass, but your filter is what would cause it to not match anything.
Instead, use:
jQuery(".input").click(function () {
var thefirst = jQuery('#select option:first').val();
var thelast = jQuery('#select option:last').val();
if (jQuery(this).is(':checked')) jQuery('#select').val(thelast);
else jQuery('#select').val(thefirst);
});
jsFiddle example

The vanilla javascript alternative for future viewers
(function () {
"use strict";
var inputs = document.getElementsByClassName('input'), input;
for (var i = 0; input = inputs[i]; i++) {
input.addEventListener('click', function (e) {
e.target.nextElementSibling.lastElementChild.selected = e.target.checked;
e.target.nextElementSibling.firstElementChild.selected = !e.target.checked;
}, false);
}
})();
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected>-- choose --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

Hide/Remove an option value from select if a value is selected/changed

I wanted to hide or remove the <option value=" "></option> when some value is selected from another drop down.
So this is something how I need it:
<Select id="first">
<option value="1">one</option>
<option value="2">two</option>
</select>
Now, when a option two is selected, the below drop down's first value which is a blank string "" should either get remove or hide from the selection.
<select id="too">
<option value=""></option>
<option value="time"time</option>
</select>
JQuery is a very effective library and I am still getting into it as a begineer. Any help on how to do this would be a great help

$( "#first" ).change(function() {
if(2 == $(this).val()){
$("#too").children()[0].remove();
}
});
http://jsfiddle.net/NHM28/

Here is your solution plain javascript
<html>
<Select id="firstSelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="secondSelect">
<option value=""></option>
<option value="time">time</option>
</select>
<script>
var node = document.getElementById("firstSelect");
node.addEventListener('change', removeOptionTag);
function removeOptionTag(){
var secNode = document.getElementById('secondSelect');
var allTags = secNode.getElementsByTagName('option');
secNode.removeChild(allTags[0]);
}
</script>
</html>

Here's a way of doing it.
HTML:
<select>
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
JS:
$(document).ready(function(){
$("select").click(function(){
if($("select option:selected").val() != ""){
$("select option[value='']").hide();
}
});
});
http://jsfiddle.net/9w6cN/

Get value from select tag on javascript

I want to change the <img src> with value from my <select>.
I have the next HTML code:
<img id="fotosel" /><br/>
<select id="cmbfotos" onchange="aplicarFoto()">
<option value="gokussj3.jpg">Goku SSJ3</option>
<option value="gokussj4.jpg">Goku SSJ4</option>
<option value="gohanssj2.jpg">Gohan SSJ2</option>
<option value="gotenks.jpg">Super Gotenks</option>
<option value="krilin.jpg">Krilin</option>
</select>
and Javascript code:
var fotosel = document.getElementById("fotosel");
var cmb = document.getElementById("cmbfotos");
function aplicarFoto(){
fotosel.src = "fotos/"+cmb.options[cmb.selectedIndex].value;
}
But that doesnt work. I made a test putting an alert() with cmb.options[cmb.selectedIndex].value and nothing appears.
Some guess? Thank you!

Change your aplicarFoto() function to:
function aplicarFoto(_src) {
fotosel.src = 'fotos/' + _src;
}
and in your HTML:
<select id="cmbfotos" onchange="aplicarFoto(this.value)">
...
</select>

Try this
<img id="fotosel" /><br/>
<select id="cmbfotos" onchange="aplicarFoto(this.value)">
<option value="gokussj3.jpg">Goku SSJ3</option>
<option value="gokussj4.jpg">Goku SSJ4</option>
<option value="gohanssj2.jpg">Gohan SSJ2</option>
<option value="gotenks.jpg">Super Gotenks</option>
<option value="krilin.jpg">Krilin</option>
</select>
Javascipt :
var fotosel = document.getElementById("fotosel");
function aplicarFoto(elmImage){
fotosel.src = "fotos/"+elmImage;
}