jQuery to serialize selected option's value, not label - javascript

I have a select control:
<select name="AdditionalCategory">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>
I then use jQuery to send AJAX request, serializing the form:
$.post("../../d/up.php",$("#main").serialize(),
function(data){
But, if I choose Category 1 for example, the serialize() function serializes the label, not the value of the option. So the request would be up.php/?AdditionalCategory=Category 1
Is there a way to tell the function to send the value, like this:
up.php/?AdditionalCategory=1

It should work fine but there is a slight error in your HTML form which is the closing tag of <option> you have is </value> which shoule be </option> instead.
Check working code below:
$(function() {
$("#but").click(function() {
console.log($("#main").serialize());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main">
<select name="AdditionalCategory">
<option value="1" selected>Category 1</option>
<option value="2">Category 2</option>
</select>
</form>
<button id="but">Click me</button>

Related

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>

Javascript add new select index with data from database

I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>

Why select() method is not working in Combobox?

I need to do in Combobox exact things that I do with in textbox. When the page loads Combobox first value with like Focus().select()
$(document).ready(function(){
$('#sel_bookID').focus().select();
});
<input type=text id="sel_bookID" value="ddddddddd" name='userid1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Like this when page load
You can set an option as the default using the selected attribute:
<select>
<option>Opt 1</option>
<option selected="true">Opt 2</option>
<option>Opt 3</option>
</select>
However, if you really want to use jQuery to do this you can use .prop method:
$(document).ready(function() {
$('#opt2').prop('selected', true);
});
<select>
<option>Opt 1</option>
<option id="opt2">Opt 2</option>
<option>Opt 3</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
$(document).ready(function(){
$('#sel_bookID').focus().select();
});
<select id="sel_bookID" name='userid1'>
<option value="ddddddddd">ddddddddd</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Maybe your trying to do like this?
<select id="sel_bookID">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(document).ready(function(){
alert($("#sel_bookID option:selected").text());
});
or maybe you only need autofocus please check this link on select autofocus

jQuery get the <select> value rather than the selected <option> value

In the above example the console logs a value of 1 which is the currently selected option. How can you log the <select> tag's value of 2?
$(document).ready(function() {
console.log($('.mySelect').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelect" value="2">
<option value="1" selected>Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
This is not valid HTML syntax.
Use data attributes like data-someattr for values you want to pass.
This would work for you .
console.log( $('.mySelect[value=2]').val() );

Remove Selected Value in Dropdown List Using JavaScript

I have an HTML list that I want to remove elements from as the user chooses. I've tried using this code from this thread but my issue seems to be accessing the element.
Here's my HTML:
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" onclick="placeShip()">Remove Selected Ship</button>
And here's my JavaScript:
$( document ).ready(function() {
var shipList=document.getElementById('shipSelec');
});
function placeShip() {
shipList.remove(shipList.options[shipList.selectedIndex].value;);
shipList.remove(shipList.options[shipList.selectedIndex]);
shipList.remove(shipList.options[selectedIndex]);
shiplist.remove([shipList.selectedIndex])
}
I have several instances of the remove() method but that none of them work.
However, the best way I can convey my error to you is through JSFiddle.
As you've jQuery loaded on the page, use it to bind events and remove element from DOM.
First, bind click event on the button using click. Use the :selected pseudo-selector to select the selected option from the dropdown and remove() to remove it from DOM.
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
$(document).ready(function() {
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button">Remove Selected Ship</button>
</div>
Updated Fiddle
Note that there are several issues in your code
In fiddle "LOAD TYPE" option should be selected to "No Wrap".
jQuery is not included. This can be included using the "Frameworks & Extensions" option in the JavaScript tab
Syntax error in the first statement in the placeShip() near .value;);
shipList is local to the ready callback and hence not accessible from outside of it. Not even in placeShip()
With pure JavaScript
var shipList = document.getElementById('shipSelec');
shipList.options[shipList.selectedIndex].remove();
Fiddle
$("#btn").click(function() {
$("#shipSelec option:disabled").prop("disabled", false)
$("#shipSelec option:selected").prop("disabled", true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" id="btn">Remove Selected Ship</button>
I suggest just disable the option not remove

Categories