enable textbox based on dropdown select do not work
Somehow my textbox is still disabled regardless any selection from the dropdown
can anyone help me on this problem. the code is stated as below.
<div class ="container">
<script>
function changeTextBox()
{
var val=$('#category').val();
if(val==='option1' || val==='option2'|| val==='option3' || val==='option4')
{
$('#subcategory').removeAttr("disabled");
}
else{$('#subcategory').prop('disabled', true);}
}
</script>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="category" class="col-sm-2 control-label" id ="category">Category</label>
<div class="col-sm-3">
<select class="form-control" id="category" name="category" onChange="changeTextBox();">
<option value="select">--select--</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
</div>
</div>
<div class="form-group">
<label for="sub" class="col-sm-2 control-label">Sub Category Type</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="subcategory" disabled/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-1">
<button type="submit" class="btn btn-default">Add</button>
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-default">Edit</button>
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-default">Delete</button>
</div>
</div>
</form>
</div>
The reason it doesn't work is because you have set the id="category" for both the label and the select. Your id has to be unique! Remove the id from the label and all will work well. See this fiddle for example. Cheers!
Related
I need to disable my reset button if form field empty. I am trying to do it using below code. Please check this sample
<div class="col-sm-3">
<select class="form-control" ng-model="SelectedYear"
ng-options="label for label in Years" ng-
change="UpdateNumberOfDays()">
<option value="">--Year--</option>
</select>
</div>
<div class="col-sm-3">
<select class="year-text form-control" ng-model="SelectedMonth"
ng-disabled="!SelectedYear" ng-options="label for label in Months"
ng-change="UpdateNumberOfDays()">
<option value="">--Month--</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-model="SelectedDay"
ng-disabled="!SelectedMonth || !SelectedYear"
ng-options="label for label in Days | limitTo:NumberOfDays">
<option value="">--Day--</option>
</select>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">NIC/NIN </label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="san.nic"
placeholder="NIC/NIN">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Adds </label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="san.adds"
>
</div>
</div>
I am trying to disable button using below code
<button type="button" ng-disabled="!san.nic || !san.adds || !SelectedMonth || !SelectedYear || !SelectedDay">Reset</button>
Above button is did not disabled correctly. But when i remove month,year,day its working. according to my requirement i can not change that month,year,day model names.
below button is working well. how i disable reset button using all the models
<button type="button" ng-disabled="!san.nic || !san.adds">Reset</button>
I made one form in html, if user submit form then value stored in form will stored in database.
and i put one option Edit if user click on edit then open that filled form in model, but how to fill the dropdown in html.
this is my form code
<!-- Large Modal -->
<div id="additem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Message Preview</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="additem" enctype="multipart/form-data">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Price with
Discount</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="offerprice">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Product
Availability</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="availability">
<option value="" disabled selected>Product
Availability</option>
<option value="In Stock">In Stock</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
this is my button code for load data when click on edit this code will execute
<button class="adtocart"
onclick="loaddata(${listitem.item_id},'${listitem.name}','${listitem.brand}','${listitem.price}','${listitem.description}','${listitem.availability}','${listitem.itemtype}',${listitem.offerprice});"
data-toggle="modal" data-target="#edititem">
<i class="fa fa-edit"></i>
</button>
this is my javascript function for handel data send by button. this how i fill the value of text box
function loaddata(item_id,name,brand,price,description,availability,itemtype,offerprice)
{
alert("Hello! I am an alert box!");
document.f1.item_id.value=item_id;
document.f1.name.value=name;
document.f1.brand.value=brand;
document.f1.price.value=price;
document.f1.description.value=description;
}
below code is for display filled form for edit data
<!-- Edit Item Model Start -->
<!-- Large Modal -->
<div id="edititem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Edit Item</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="edititem" enctype="multipart/form-data"
name="f1">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="hidden" id="item_id" name="item_id"> <input
type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"
id="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
<!-- Edit Item Model End -->
Actually, I don't really know what you are looking for. But maybe this piece of code would be helpful.
function selectOption(value)
{
// get the select
const selectTest = document.f1.itemtype;
// the loop runs over all options
for (let i = 0; i < selectTest.options.length; i++)
{
if( value === selectTest.options[i].value)
{
// if the "value" is an possible option
// this option is selected and the loop is aborted.
selectTest.options[i].selected = true;
break;
}
}
}
// call the function with the value of the second option
selectOption('test2');
<form name="f1">
<select name="itemtype" >
<option value="test1">TEST 1</option>
<option value="test2">TEST 2</option>
<option value="test3">TEST 3</option>
<option value="test4">TEST 4</option>
<option value="test5">TEST 5</option>
<option value="test6">TEST 6</option>
</select>
</form>
I tried to get the ID on the option selected when the modal was in show state.
$("#modal-form").on('shown.bs.modal', function(e) {
console.log("CHANGE");
var id = $("#customer option:selected").val();
console.log(id);
});
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John">John</option>
<option value="Alex">Alex</option>
</select>
<span class="help-block with-errors"> </span>
</div>
</div>
Hope this will be helpful.
$("#customer").change(function(e) {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John">John</option>
<option value="Alex">Alex</option>
</select>
<span class="help-block with-errors" </span>
</div>
</div>
I find out you have not selected any option and you are checking for select option, select any one option and check it out.
$("#modal-form").on('shown.bs.modal', function(e) {
console.log("CHANGE");
var id = $("#customer option:selected").val();
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John" selected>John</option>
<option value="Alex">Alex</option>
</select>
<span class="help-block with-errors"> </span>
</div>
</div>
Try the following code. Find the element from the parent,
$(document).on('shown.bs.modal', '#modal-form', function() {
console.log("CHANGE");
//var id = $("#customer>option:selected").val();
var id = $('#customer').find(":selected").val();
alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<form id="modal-form">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John">John</option>
<option value="Alex">Alex</option>
</select>
</form>
<span class="help-block with-errors" </span>
</div>
</div>
In my project, I have two RadioButtons called UserTypeRadio. With that, I have a DropDownList and a TextBox. I want to toggle the visibility of the DropDownList and the TextBox depending on which RadioButton is selected.
RadioButton
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" onclick="radioButtonEmployeeSelected()" checked class="userSelection" /> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" onclick="radioButtonOtherUserSelected()" class="userSelection" /> Other User</label>
</div>
</div>
</div>
DropDownList
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
TextBox
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" hidden />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
jQuery Code
$('.userSelection').on('change', function () {
//alert($(this).val());
//if ($(this).val() === "Employee") {
$("#textBoxOtherUser").toggle();
$("#dropDownUserNames").toggle();
//}
});
I am trying to hide TextBoxOtherUser when Employee is selected from the RadioButton, and I am trying to hide DropDownUserNames when I click Other User option from the RadioButton.
The toggle() is performing as per expectation. However, on performing Inspect Element from the Browser, when Other User is selected from the RadioButton, I see that the DropDownList is not getting disbled. In fact, I see that when the Employee is not selected, style="display: inline-block;" is present in the code. On the other hand, when the Employee is selected, style="display: none;" is shown. In other words, on selecting Employee displays the DropDownList in the required UI. But when Employee is not selected, instead of getting disabled, the DropDownList is shown in the plain old block format.
What to do?
by using data attribute you can do this .. add data-user for employee and otheruser radio inputs and add data-show to the related select/textbox and you can then use the next code
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames" data-show="employee">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" data-show="otheruser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
Note: if you include your js code before including jquery you'll need to wrap your js code inside $(document).ready(function(){ // code here })
Finally if you need to hide the whole row you can simply cut/paste the data-show attribute to the parent instead of select or textbox
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20" data-show="employee">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20" data-show="otheruser">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
by adding .filter(':checked').change(); at the end this mean run the change event for the checked radio on load
I have a select dropdown of addresses on change of select dropdown I need to get option attributes and paste them in input fields.
Here is what I tried so far TryFiddle
I have data attributes as data-address, data-city, data-zipcode and data-country for each option, when I select any option I want that options data-attr to be pasted in respective input boxes;
here is my code
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
alert('change');
$("#bill_address").val($(this).attr('data-address'));
$("#bill_city").val($(this).attr('data-city'));
$("#bill_zipcode").val($(this).attr('data-zipcode'));
$("#bill_country").val($(this).attr('data-country'));
})
})
Html code
<div id="collapseOne" class="panel-collapse collapse in">
<form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
<div class="form-group">
<select name="" class="form-control" id="saved_billing_addresses">
<option value="">Select Address</option>
<option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
<option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
<option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
</select>
</div>
<div class="form-group">
<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
</div>
<div class="form-group">
<input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
</div>
<div class="form-group">
<input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
</div>
<div class="form-group">
<input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
</div>
<div class="form-group" style="width:150px;float:left;">
<button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
</div>
</form>
</div>
</div>
I dont know whats going wrong it should work, please provide any suggestions
This is one of the rare places where jQuery doesn't do much for you, your best bet is to use the select box's native selectedIndex property and options collection:
// Get the selected HTMLOptionElement
var opt = this.options[this.selectedIndex];
E.g.: (updated fiddle)
$(document).ready(function() {
$('#saved_billing_addresses').on("change", function() {
var opt = this.options[this.selectedIndex];
if (opt) {
opt = $(opt);
$("#bill_address").val(opt.attr('data-address'));
$("#bill_city").val(opt.attr('data-city'));
$("#bill_zipcode").val(opt.attr('data-zipcode'));
$("#bill_country").val(opt.attr('data-country'));
}
})
});
Try it..
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
$("#bill_address").val($('option:selected', this).data('address'));
$("#bill_city").val($('option:selected', this).data('city'));
$("#bill_zipcode").val($('option:selected', this).data('zipcode'));
$("#bill_country").val($('option:selected', this).data('country'));
})
});
.hide-it{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<div id="collapseOne" class="panel-collapse collapse in">
<form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
<div class="form-group">
<select name="" class="form-control" id="saved_billing_addresses">
<option value="">Select Address</option>
<option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
<option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
<option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
</select>
</div>
<div class="form-group">
<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
</div>
<div class="form-group">
<input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
</div>
<div class="form-group">
<input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
</div>
<div class="form-group">
<input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
</div>
<div class="form-group" style="width:150px;float:left;">
<button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
</div>
</form>
</div>
</div>
You have some typos:
$(this) within change event is not $(this).find(':selected')
.data('address') could be used for attr('data-address')
event handler within the same event handler is useless
whenever possible you can cache selected elements
My proposal is:
$(function () {
$('#saved_billing_addresses').on("change", function(e){
var jqSelectedOption = $(this).find(':selected');
$("#bill_address").val(jqSelectedOption.data('address'));
$("#bill_city").val(jqSelectedOption.data('city'));
$("#bill_zipcode").val(jqSelectedOption.data('zipcode'));
$("#bill_country").val(jqSelectedOption.data('country'));
});
});
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="collapseOne" class="panel-collapse collapse in">
<form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
<div class="form-group">
<select name="" class="form-control" id="saved_billing_addresses">
<option value="">Select Address</option>
<option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
<option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
<option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
</select>
</div>
<div class="form-group">
<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
</div>
<div class="form-group">
<input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
</div>
<div class="form-group">
<input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
</div>
<div class="form-group">
<input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
</div>
<div class="form-group" style="width:150px;float:left;">
<button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
</div>
</form>
</div>
This is what you need.
$('#saved_billing_addresses').on("change",function(event){
const $this = this.options[this.selectedIndex];
$("#bill_address").val($this.getAttribute('data-address'));
$("#bill_city").val($this.getAttribute('data-city'));
$("#bill_zipcode").val($this.getAttribute('data-zipcode'));
$("#bill_country").val($this.getAttribute('data-country'));
});
You can also use the find to get the data attributes
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
$("#bill_address").val($(this).find(':selected').data('address'));
$("#bill_city").val($(this).find(':selected').data('city'));
$("#bill_zipcode").val($(this).find(':selected').data('zipcode'));
$("#bill_country").val($(this).find(':selected').data('country'));
})
});
Why you added two on Change events functions,Please remove second one. Try this..
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
$("#bill_address").val($(this).find('option:selected').attr('data-address'));
$("#bill_city").val($(this).find('option:selected').attr('data-city'));
$("#bill_zipcode").val($(this).find('option:selected').attr('data-zipcode'));
$("#bill_country").val($(this).find('option:selected').attr('data-country'));
})
});