How to get Id option selected on modal show using JS? - javascript

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>

Related

How To Use JavaScript To Copy Text From corrosponded address field To permanent address field?

I am creating the address field of the form. I have made City List Depending on State by using Ajax. When I check the checkbox, the value of the corresponded address is not coming in the permanent address. Could it be but i am struggling with this. please check my code and tell me its answer.
Code:-
<div class="corrospond-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_state" class="form-control">
<option value="">choose state</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
<div class="my-5">
<input type="checkbox" class="p_address" name="">
<h6 style="display: inline-block;">same paramanent address </h6>
</div>
<div class="permanent-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_permanent_state" class="form-control">
<option value="">choose state</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_permanent_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
js file
<script>
$(document).ready(function(){
$.ajax({
url:"php/states.php",
type:'post',
dataType:'json',
contentType:false,
processData:false,
success:function(data){
$('.state select').append(data);
},
error:function(){
console.log("ERROR IN AJAX");
}
});
});
$(document).on('change','.p_address',function(){
if($(this).is(":checked")){
let state = $('.corrospond-address .state select').val();
let city = $('.corrospond-address .city select').val();
$('.permanent-address .state select').val(state);
$('.permanent-address .city select').val(city);
}
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="corrospond-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_state" class="form-control">
<option value="Oklahama">Oklahama</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
<div class="my-5">
<input type="checkbox" class="p_address" name="">
<h6 style="display: inline-block;">same paramanent address </h6>
</div>
<div class="permanent-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_permanent_state" class="form-control">
<option value="">choose state</option>
<option value="Oklahama">Oklahama</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_permanent_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
<script>
$(document).on('change','.p_address',function(){
if($(this).is(":checked")){
let state = $('.corrospond-address .state select').val();
let city = $('.corrospond-address .city select').val();
$('.permanent-address .state select').val(state);
$('.permanent-address .city select').val(city);
}
});
</script>
Check out this edit, it works. But most importantly when testing this code in your browser look at what VALUE is showing, and Where that value is taken FROM.
<select name="customer_state" class="form-control">
<option value="Oklahama">Oklahama</option>
</select>
As you can see NOW it actually has an value of Oklahama
Before it was like this:
<select name="customer_state" class="form-control">
<option value="">Oklahama</option>
</select>

empty form fields when I change value of select

i have a form contains select category_id which allows hide and show inputs title and name and select type, i want when i change category id value all other fields must be empty.
$(document).on('change', '#category_id', function() {
$("#divt > input,#divtn > input,#divty > input").val('');
var stateID = $(this).val();
//alert(stateID);
if (stateID == '1') {
$("#divt").hide();
$("#divn").hide();
$("#divty").show();
}else if(stateID == '2'){
$("#divt").show();
$("#divn").show();
$("#divty").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group" id="divt">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="title" class="form-control"/>
</div>
<div class="form-group" id="divn">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<div class="form-group" id="divty">
<label>type <span class="text-hightlight">*</span></label>
<select class="form-control" name="type">
<option></option>
<option value="1">type a</option>
<option value="2">type b</option>
</select>
</div>
</form>
</div>

To reset the select field you need this code
$("#divty").find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
Here is the working snippet:
$(document).on('change', '#category_id', function() {
$("#divt > input,#divtn > input,#divty > input").val('');
var stateID = $(this).val();
//alert(stateID);
if (stateID == '1') {
$("#divty").find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
$("#divt").hide();
$("#divn").hide();
$("#divty").show();
}else if(stateID == '2'){
$("#divt > input").val('');
$("#divn > input").val('');
$("#divt").show();
$("#divn").show();
$("#divty").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group" id="divt">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="title" class="form-control"/>
</div>
<div class="form-group" id="divn">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<div class="form-group" id="divty">
<label>type <span class="text-hightlight">*</span></label>
<select class="form-control" name="type">
<option></option>
<option value="1">type a</option>
<option value="2">type b</option>
</select>
</div>
</form>
</div>

If you're trying to empty value of the textboxes, I guess the selector is wrong on line 2
try
$("input.form-control").val('');
or $("#myform input.form-control").val('')

Set text field min and max value based on the option selected in previous dropdown

I have a drop down and a text box next to it.
When some value is selected in the dropdown, the textbox should allow min and max characters based on the selected option.
Suppose I select option 1, then the textbox next to it should allow minimum 10 characters and max 16 characters.
How to achieve it?
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
</div>
</div>
</div>

you have to change a little your code
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="10/16">name1</option>
<option value="20/32">name2</option>
<option value="30/48">name3</option>
<option value="40/64">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
and jQuery
$('#prooftype').change(function(){
var tmp = $(this).val().split('/');
$('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);
})

If you pass the the option value of 12/16 to the backend, obviously the data will reflect. I think you need something like this:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
And your JQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var selectedopt;
$('#prooftype').change(function(){
selectedopt= $(this).val();
//Add your condition here, and check the selected option value:
if(selectedopt== "name1")
{
//Set input min and max value based on the selected option value.
$('#inputid').attr('minlength','10').attr('maxlength','16');
}
elseif(selectedopt== "name2")
{
$('#inputid').attr('minlength','20').attr('maxlength','25');
}
// And so on........
})
</script>

including javascript in a ".vm" file

This is my velocity(.vm) file. I need to write a code such that if I select an option from any 1 dropdown the other dropdwon gets disabled and if I choose the "--Select--" option, both dropdowns are enabled.
<div class="form-group">
<label for="pvncId" class="col-sm-2 control-label">Provincienaam</label>
<div class="col-sm-8">
<select id="pvncId" name="pvncId" title="Province" class="form-control
form_select">
<option value="">--Select--</option>
#foreach($pvnc in $provincelist)
<option value="$pvnc.gml_id">${pvnc.provincienaam}</option>
#end
</select>
<span class="help-block" id="help-block-service"></span>
</div>
<div class="col-sm-2"></div>
</div>
<div class="form-group">
<label for="gemId" class="col-sm-2 control-label">Gemeentenaam</label>
<div class="col-sm-8">
<select id="gemId" name="gemId" title="Gemeenten" class="form-control
form_select">
<option value="">--Select--</option>
#foreach($gem in $gemeentenlist)
<option value="$gem.gml_id">${gem.gemeentenaam}</option>
#end
</select>
<span class="help-block" id="help-block-service"></span>
</div>
<div class="col-sm-2"></div>
</div>

enable textbox based on dropdown select do not work

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!

Categories