How to save name of select option instead of value - javascript

I have this code:
$("#subscription").on('change', function(){
$('#plan').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bank_name" class="form-control input-md chosen-select" id="subscription">
<option value="">Choose Bank</option>
<option value="swiftbank1">bank 1</option>
<option value="swiftbank2">bank 2</option>
</select>
<input type="text" id="plan" class="form-control input-md" name="swift">
What it does is add swift code in to the input field, that works fine!
Problem is that when I add data on database then both values is what I choose example I choose bank 1 then both will be saved as swiftbank1 .
I need it to save bank name (bank 1) and swift (swiftbank1) in database.
I understand that value is what it is but is it possible to add name in database instead of value? In this case this value works to be passed from selection to input.
Thanks

You can use .text for getting selected text.
$("#subscription").on('change', function(){
var text = $("#subscription :selected").text();
var value = $("#subscription").val();
console.log(text); // this will print text
console.log(value); // this will print value
//var plan = $('#plan').val(text); // this will change the value of plan
$("#plan").attr("value",text); // this will add the value attribute
$('#plan').val(text); // this will change the value of plan
$('#subscription :selected').val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="bank_name" class="form-control input-md chosen-select" id="subscription">
<option value="">Choose Bank</option>
<option value="swiftbank1">bank 1</option>
<option value="swiftbank2">bank 2</option>
</select>
<input type="text" id="plan" class="form-control input-md" name="swift">

try this to get text of selected option
$("#subscription").on('change', function(){
$('#plan').val(this.options[this.selectedIndex].text);
});

Since you will need to pass the value to store in database so a quick way is to keep the value as swiftbank1###bank1
Split the string with ### on server end and store them separately like this:
$selectValue = $_POST['select_name'];
$valueArray = explode("####",$selectValue);
$valueArray[0] will have swiftbank1 and $valueArray[1] will have bank1

use this $('#plan').val($('#subscription option:selected').text());

Related

How to get data attribute values from html select?

I want to create a form where if I choose a name from a selection.
The next input field will be autofilled.
It works with the value of the selected item, but I can't get it work with data tags.
Here is some simplified HTML:
<select class="select" id="test " name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">
JavaScript (this works):
function myFunction(e) {
document.getElementById("myText").value = e.target.value;
}
JavaScript (this doesn't work):
function myFunction(e) {
document.getElementById("myText").value = e.target.options[event.target.selectedIndex].dataset.adr;
}
The second JavaScript example works, but only if I don't use the class="select" tag on the selection. So there must be something in the CSS that could interfere with the JavaScript part?
Is there another method to get the data tag from the selected item?
Pass in the select as the parameter, then do select.options[select.selectedIndex] to get the element. This limits the amount of code needed for the job. The rest is self explanatory.
function myFunction(e) {
document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute("data-adr");
}
<select class="select" id="test " name="" onchange="myFunction(this)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">

on key up get selected drop down value not get correct value

I have tried to get the selected dropdown value based on some other input type text field using below code. However every time it gets the first value, i.e 15,
even when I have selected another option.
$(".director_code").keyup(function() { //this is Dropbox class selector
var schoolid = $("#schoolId").children(":selected").val();
// i also tried:
// $('#schoolId').find('option:selected').val();
console.log(schoolid);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
in snippet work perfectly but in my project not working well
show img
here i select second option i.e b but its display alert 15
but actual value of b is 16
Your code is working fine and as expected. On keyup event on input field, it is returning the selected option value.
What are you expecting then?
In the below screenshot, see the console log output w.r.t. input keyup logged with time.
You should try this
$("#schoolId").change(function(){
var selectedVal = $(this).children("option:selected").val();
$('#director_code').val(selectedVal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
Based on your question maybe you want like this please check and let me know if something missed.
$(".director_code").keyup(function() {
try
{
var value = $(this).val();
//$("#schoolId").val($(this).val());
var oschoolId = $('#schoolId > option').filter(function () { return $.trim($(this).text()) == $.trim(value) }).val();
if(oschoolId!=undefined)
{
$('#schoolId').val(oschoolId);
console.log(oschoolId);
console.log($(this).val());
}
}catch(e)
{
console.log("Error: "+e.message);
}
});
$("#schoolId").change(function(){
var value= $(this).children("option:selected").text();
$('#director_code').val(value)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">

Getting the name of a drop-down selection using JavaScript

I'm using JavaScript to pull in some information into a list and I'm not sure how to target a drop-down selection.
This is what I'm using to grab the result of a checked radio button:
RequestType: $("input[name=requestType]:checked").val(),
How would I be able to use the same format to grab the selection of a drop-down?
SessionType:
You don't need to call the function on every click, just a listener for the change-event is normally enough.
If you also want to get the value of the select-input at other moments, you can save the selected value in an variable or query the input-selects with the :selected-option.
$('#rChoices').on('change', function(event) {
let value = event.target.value;
console.log(value);
});
$('#btnGetValue').on('click', function(event) {
let value = $('#rChoices option:selected').val();
console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row rChoices">
<label for="rChoices" class="col-form-label">Please choose a application below:</label>
<select class="form-control" id="rChoices">
<option class="" selected disabled>---------</option>
<option value="onedrive" id="onedrive">OneDrive</option>
<option value="teams" id="teams">Teams</option>
<option value="outlook" id="outlook">Outlook</option>
<option value="officesuite" id="officesuite">Office Suite</option>
<option value="planner" id="planner">Planner</option>
<option value="sharepoint" id="sharepoint">SharePoint</option>
<option value="stream" id="stream">Stream</option>
<option value="yammer" id="yammer">Yammer</option>
</select>
<div class="help-block with-errors"></div>
</div>
<button id="btnGetValue">Get Value</button>
This worked for my current situation:
SessionType: $('#rChoices :selected').text()

Change ReadOnly Input Value on <select> option change

I want to display the value in a "select > option" in an based on the location selected from my tag.
Here is the html:
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
And here is the javascript:
$(document).ready(function() {
$("#stateCoord option").filter(function() {
return $(this).val() == $("#stateCoordInfo").val();
}).attr('selected', true);
$("#stateCoord").live("change", function() {
$("#stateCoordInfo").val($(this).find("option:selected").attr("value"));
});
});
I'm still getting the hang on javascript so a detailed explanation won't hurt. Thanks in advance.
If I assume correctly, you want this:
1) initialization of the select option at document ready, that strange thing the code with filter() was trying to do.
2) Capture the change event on the select and show the value of the current selected option on the input. This is what the live() (deprecated) part was trying to do.
$(document).ready(function()
{
$("#stateCoord").val("").change();
$("#stateCoord").change(function()
{
$("#stateCoordInfo").val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord">
<option value="" selected>SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo">
$(document).ready(function() {
$("body").on("change","#stateCoord",function() {
$("#stateCoordInfo").val($(this).find("option:selected").val());
});
$("#stateCoord").trigger("change");
});
From what I understand, you want to update the text shown in the readonly text box with the value attribute of the selected option from the dropdown.
To do this, you just need to update the val of your read-only text box to the val of the drop-down whenever change event is fired.
$(document).ready(function() {
$('#stateCoord').change(function(e) {
$('#stateCoordInfo').val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
I am not sure, if this is what you need, but I think it should be: JSfiddle
Here is the JS code:
$(document).ready(function() {
$("#stateCoord").change(function() {
var value = $("#stateCoord option:selected").text();
$("#stateCoordInfo").val(value);
});
});

Clone <select> without the selected option

I need to clone a select without cloning the selected one and each time i try to clone it ,check previous select and remove selected options !
<select class="form-control name_list" name="idproduit1" id="idproducts1">
<option value="1">piece7</option>
<option value="3">Piece88</option>
<option value="4">Piece6</option>
<option value="5">piece99</option>
<option value="7">Produit 6</option>
Js :
$('#add').click(function(){
i++;
var options = $('[name="idproduit1"] > option ').clone().find('option:selected').remove().end();
$('#dynamic_field').append('<select class="form-control name_list" name="idproduit'+i+'"></select>');
$('[name="idproduit'+i+'"]').append(options);
});
You can still keep your current code (which is not shared on the post as of time of writing) and just add
clonedSelectEl.selectedIndex = 0;
Provided you have set a default placeholder option

Categories