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>
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 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>
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>
I am doing a school task and I'm stuck.
I want to gray out the input field based on what is selected in the drop-down menu.
https://jsfiddle.net/xdvan6vf/
function ccGrey() {
if (document.getElementById("creditcard").onchane){
alert("this doesnt work very well")
}
}
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-16 control-label" for="payment-method">Payment Method</label>
<div class="col-md-16">
<select id="payment-method" name="payment-method" class="form-control order-form">
<option value="1">Online</option>
<option value="2">In Store</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
<div class="col-md-16">
<input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form" onclick="ccGrey">
</div>
</div>
I didn't understand what was your purpose but for handling select selected index changing,you must work on onChange on SELECT element not INPUT event like this:
function selectChanged() {
var x = document.getElementById("payment-method").value;
document.getElementById("creditcard").disabled = (x == 1);
}
//Checking for initial run
selectChanged();
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-16 control-label" for="payment-method">Payment Method</label>
<div class="col-md-16">
<select id="payment-method" name="payment-method" class="form-control order-form" onChange="selectChanged()">
<option value="1">Online</option>
<option value="2">In Store</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
<div class="col-md-16">
<input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form">
</div>
</div>
I have one drop down list which has two options
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
When i select the owner, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
When i select the member, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
It is happening at onchange event.
If i not selecting no one, These two text box sections will be hide.
How to make this functionality
you can user ng-show or ng-hide to do this, here is a demonstration,
when ng-model="membertype" is equals to 'owner' it will show the below div;
<div class="form-group" ng-show="(membertype == 'owner')">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
when ng-model="membertype" is equals to 'member' it will show the below div;
<div class="form-group" ng-show="(membertype == 'member')">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
<div class="form-group" ng-show="membertype == 'member'">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
divs to show on event change in dropdown
<div class="form-group" ng-if="membertype == 'owner'">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
On page load set textbox visibility to none using style
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number" style="display:none" >
</div>
OnChange of dropdownlist call the script
<script>
yourfunction(value)
{
if(value === "owner")
{
document.getElementById("ownernumber").style.display="block";
}
}
</script>