I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown
I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing
HTML Code which will use for condition:
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
HTML Code Which i want to disable if slider_type equal to 1
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
I tried this JavaScript code lines for 1 input area but it's not worked
<script type="text/javascript">
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
</script>
What's really wrong?
You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.
Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.
function DisableSliderInputArea() {
if (document.getElementById("slider_type").value == "1") {
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");
// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
Related
I want the value in the input text to be null after the hide process
This is my view :
<div class="form-group row">
<label for="status" class="col-sm-4 col-form-label col-form-label-sm">Status Karyawan</label>
<div class="col-sm-8">
<select id="status" name="status" class="form-control form-control-sm" required>
<option value="" selected>Pilih Status Karyawan</option>
<option value="Kontrak">Kontrak</option>
<option value="Tetap">Tetap</option>
</select>
</div>
</div>
<div class="form-group row" id="tgl_pengangkatan" style="display:none">
<label for="tgl_pengangkatan" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Pengangkatan</label>
<div class="col-sm-8 input-group">
<input name="tgl_pengangkatan" type="text" class="form-control datepicker form-control-sm" id="tgl_pengangkatan" placeholder="yyyy-mm-dd" value="">
</div>
</div>
<div class="form-group row" id="tgl_berakhir_kontrak" style="display:none">
<label for="tgl_berakhir_kontrak" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Akhir Kontrak</label>
<div class="col-sm-8 input-group">
<input name="tgl_berakhir_kontrak" type="text" class="form-control datepicker form-control-sm" id="tgl_berakhir_kontrak" placeholder="yyyy-mm-dd" value="">
</div>
</div>
And than, this is my script:
<script>
$(function () {
$("#status").change(function() {
var val = $(this).val();
if(val === "Kontrak") {
$("#tgl_berakhir_kontrak").show();
$("#tgl_pengangkatan").hide();
$("#tgl_pengangkatan").val('');
}
else if (val === "Tetap") {
$("#tgl_pengangkatan").show();
$("#tgl_berakhir_kontrak").hide();
$("#tgl_berakhir_kontrak").val('');
}
});
});
I want to make it like that to minimize errors in the input process, thanks.
The element you are trying to change should be called with its name, not the id. Try changing it as:
$('[name="tgl_berakhir_kontrak"]').val('');
By the way, it's not a good practice to give identical name and id to separate elements on the same page.
I have a form that looks like this:
<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
<div class="form-group col-xs-3" >
<label for="powerPlantName">PowerPlant Name</label>
<input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantType">PowerPlant Type</label>
<select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
<option value="" disabled>--Select Type--</option>
<option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
{{ powerPlantType }}
</option>
</select>
</div>
<div class="form-group col-xs-3" >
<label for="organizationName">Organization Name</label>
<input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantStatus">PowerPlant Active Status</label>
<select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus">
<option value="" disabled>--Select Status--</option>
<option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses">
{{ powerPlantStatus }}
</option>
</select>
</div>
<div class="form-group col-md-3 col-xs-4">
<button [disabled]="loading" class="btn btn-primary">Search</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
<div class="form-group col-md-3 col-xs-3">
<button class="btn btn-primary" (click)="f.reset()">Reset</button>
</div>
</form>
The layout for which looks like this:
When I click the Reset button, the default values for the drop down disappears - as shown in the figure below.
How do I make sure that the default value is retained even after hitting the Reset button?
Any ideas?
Have an additional value in the list of elements with id = -1
types:any[]=[
{id:-1,Name:'Select One'},
{id:1,Name:'abc'},
{id:2,Name:'abdfsdgsc'}
];
HTML will look as
<select [(ngModel)]="selectedElement.id">
<option *ngFor="let type of types" [ngValue]="type.id"> {{type.Name}}</option>
</select>
On Reset
reset(){
this.selectedElement = {id:-1,Name:'Select One'};
}
LIVE DEMO
Remove the form reference from f.reset(), change to reset(). Where reset() is the component class method:
reset(){
this.model.powerPlantType = '';
this.model.powerPlantStatus = '';
// and other input resettings too
}
And then change
<button type="button" (click)="reset()">Reset</button>
DEMO
Change the button type from "button" to "reset":
<button type="reset>Reset</button>
Demo
I have one html form in that there are three tabs within three div.
i want to submit form on one submit button without console error.
I used below script for tabbed html 5 validation its work but it gives console error on chrome browser, like
An invalid form control with name='campign' is not focusable.
please help if anybudy know about this.
<html>
<body>
<div class="col-md-12 col-sm-12 ad_dealer nav-tabs-menu">
<ul class="nav nav-tabs">
<li class="active" title="Personal Information">
<a data-toggle="tab" href="#per-info">
<span> Personal Information</span></a></li>
<li class="secnd" title="Communication Address">
<a data-toggle="tab" href="#comm-add">
<span> Communication Address</span></a></li>
<li class="secnd" title="Experience & Educational Details">
<a data-toggle="tab" href="#exp-edu">
<span>Exp & Educational Details </span></a></li>
</ul>
</div>
<div class="tab-content dealer-tabs">
<!-- <div class="col-md-12">
<h6 class="gg per_info det-area"><span class="line-center">Personal Information</span></h6>
</div> -->
<div id="per-info" class="tab-pane fade in active row col-sm-12">
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Blood Group<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Blood Group" required oninvalid="this.setCustomValidity('Please Select Blood Group')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">A+ </option>
<option value="2">A-</option>
<option value="2">AB+</option>
<option value="2">AB-</option>
<option value="2">B+</option>
<option value="2">B-</option>
<option value="2">O+</option>
<option value="2">O-</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Date of Birth<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="enqdate" name="enqdate" value="" class="form-control datepicker" placeholder="dd-mmm-yyyy" title="Please Enter Date of Birth" required oninvalid="this.setCustomValidity('Please Enter Date of Birth')" onChange="setCustomValidity('')" onkeypress = "return false; event.charCode >= 48 && event.charCode <= 57">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Marital Status<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Marital Status" required oninvalid="this.setCustomValidity('Please Select Marital Status')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Married </option>
<option value="2">Unmarried</option>
<option value="3">Divorced </option>
<option value="4"> Widowed</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Wedding Date</label>
<div class="col-md-6">
<input type="text" id="enqdate" name="enqdate" value="" class="form-control datepicker" placeholder="dd-mmm-yyyy" title="Please Enter Wedding Date">
</div>
</div>
</div>
<div class="clearfix"> </div>
<!-- <div class="col-md-12">
<h6 class="gg cust_mar det-area"><span class="line-center">Alternate Information</span></h6>
</div> -->
<div class="clearfix"> </div>
<div div id="comm-add" class="tab-pane fade row col-sm-12">
<div class="comm-top">
<div class="form-group row col-sm-6 address-sec" id="campa">
<label class="col-md-4 form-control-label" for="">Permanent Address<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="campign" name="campign" class="form-control" placeholder="Permanent Address" title="Please Enter Permanent Address" required oninvalid="this.setCustomValidity('Please Enter Permanent Address')" onChange="setCustomValidity('')" style='margin-bottom:5px;' maxlength="250">
<input type="text" id="campign" name="campign" class="form-control" placeholder="" title="" style='margin-bottom:5px;'>
<input type="text" id="campign" name="campign" class="form-control" placeholder="" title="">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent Village<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-vill" id="per-vill" title="Please Select Permanent Village" required oninvalid="this.setCustomValidity('Please Select Permanent Village')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Marwad ">Marwad </option>
<option value="Thergaon">Thergaon</option>
<option value="Sarangkheda">Sarangkheda</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent Tehsil<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-teh" id="per-teh" title="Please Select Permanent Tehsil" required oninvalid="this.setCustomValidity('Please Select Permanent Tehsil')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Amalner ">Amalner </option>
<option value="Mulshi">Mulshi</option>
<option value="Mulshi">shada</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent District<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-dis" id="per-dis" title="Please Select Permanent District" required oninvalid="this.setCustomValidity('Please Select Permanent District')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Jalgaon ">Jalgaon </option>
<option value="Pune">Pune</option>
<option value="Mulshi">Mulshi</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent State<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Permanent State" required oninvalid="this.setCustomValidity('Please Select Permanent State')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Maharashtra </option>
<option value="2">Punjab</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 has-feedback">
<label class="col-md-4 form-control-label" for="">Permanent Pin Code<span class="requerido">*</span></label>
<div class="col-md-6">
<input name="myInput_DRS" class="form-control"
onkeypress="return isNumeric(event)"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "10"
min = "1"
max = "10" />
<!-- <input type="text" id="pincode" name="pincode" class="form-control" placeholder="Permanent Pin Code" title="Please Enter Permanent Pin Code" required="" pattern="[0-9]{6}" oninvalid="InvalidMsg(this,'Please Enter Valid Pin Code','Please Enter Pin Code');" oninput="InvalidMsg(this,'Please Enter Valid Pin Code','');" onpaste="return false" onChange="setCustomValidity('')" maxlength="6" onKeyPress="return isNumberKey(event)" onKeyUp="return isNumberKeyWithMark(event,'pincode','validateMark')" /> -->
<span class="glyphicon glyphicon-ok form-control-feedback" value="" id="validateMark" style="display:none;"></span>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Permanent Contact No<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="percontactno" name="percontactno" value="" class="form-control" placeholder="Permanent Contact No" title="Please Enter Permanent Contact No" required="" pattern="[0-9]{1,20}" onpaste="return false" oninvalid="InvalidMsg(this,'Please Enter Valid Permanent Contact No','Please Enter Permanent Contact No');" oninput="InvalidMsg(this,'Please Enter Valid Permanent Contact','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Permanent Contact No');" onKeyPress="return isNumberKey(event)" onChange="setCustomValidity('');" maxlength="20"/>
</div>
</div>
</div><!--comm-top-->
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<div id="exp-edu" class="tab-pane fade row col-sm-12">
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Experience (In Years)<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="exp" name="exp" value="" class="form-control" placeholder="Experience" title="Please Enter Experience" required="" pattern="^[0-9]+(\.[0-9]{1,2})?$" oninvalid="InvalidMsg(this,'Please Enter valid Experience','Please Enter Experience');" oninput="InvalidMsg(this,'Please valid Enter Experience','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Experience');" onchange="setCustomValidity('')" maxlength="10" onKeyPress="return isNumberKey(event)">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Salary Per Month<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="salpermonth" name="salpermnth" value="" class="form-control" placeholder="Salary Per Month" title="Please Enter Salary Per Month" required="" pattern="^[0-9]+(\.[0-9]{1,2})?$" oninvalid="InvalidMsg(this,'Please Enter Valid Salary Per Month','Please Enter Salary Per Month');" oninput="InvalidMsg(this,'Please Enter Salary Per Month','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Salary Per Month');" onChange="setCustomValidity('')" maxlength="40" onKeyPress="return isNumberKey(event)">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Education<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="edu" id="edu" title="Please Select Education" required oninvalid="this.setCustomValidity('Please Select Education')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Diploma</option>
<option value="2">BE</option>
<option value="3">Graduation</option>
<option value="4">Post Graduation</option>
</select>
</div>
</div>
</div>
</div><!--tab-content-->
</div>
<div class="card-footer en_footer">
<button type="submit" title="Submit" id="sub" class="btn btn-sm no_radius btn btn-success">Submit</button>
<button type="button" id="MyReset" title="Reset" class="btn btn-sm no_radius btn-primary">Reset</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#sub').click(function(evt){ // submit button click event
var $myForm = $('#AddDealerEmployee');
if(!$myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to`enter code here` display the native HTML5 error messages.
var flag1=1;
var flag2=1;
var flag3=1;
var inputs = $('#per-info').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
flag1=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag1=0;
}
});
//comm-add
var inputs = $('#comm-add').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag2=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag2=0;
}
});
//exp-edu
var inputs = $('#exp-edu').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag3=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag3=0;
}
});
if(flag1 == 0)
{
if(!$('#per-info').hasClass('active') && $('#comm-add').hasClass('active'))
{
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
else
if(!$('#per-info').hasClass('active') && $('#exp-edu').hasClass('active'))
{
$('.nav-tabs li:first').find('a').trigger('click');
}
else
{
}
}
else if(flag2 == 0)
{
if(!$('#comm-add').hasClass('active') && $('#per-info').hasClass('active'))
{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
else
if(!$('#comm-add').hasClass('active') && $('#exp-edu').hasClass('active'))
{
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
else
{
}
}
else if(flag3 == 0)
{
if(!$('#exp-edu').hasClass('active') && $('#comm-add').hasClass('active'))
{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
else
if(!$('#exp-edu').hasClass('active') && $('#per-info').hasClass('active'))
{
$('.nav-tabs li:last').find('a').trigger('click');
}
else
{
}
}
else { }
}
});
</script>
</body>
</html>
This code works fine when you are now creating a new page. Selecting a dropdown will show or hide as decorated by the markup. The problem is in an edit page with a default selected Id like Id 3 I want the div decorated with 3 to be hidden on page load. I am completely at sea with javascript and jquery.
<div class="form-group">
<label class="control-label col-md-2" for="ArticleCategoryId">Menu Category</label>
<div class="col-md-10">
<select class="chooseOption form-control" id="ArticleCategoryId" name="ArticleCategoryId">
<option value="1">pages</option>
<option value="2">about</option>
<option selected="selected" value="3">project</option>
<option value="4">gallery</option>
<option value="5">news</option>
<option value="6">events</option>
<option value="7">FAQS</option>
<option value="8">Jobs</option>
<option value="9">Documents</option>
<option value="10">Clients</option>
</select>
<div class="form-group ArticleCategoryId 3">
<label class="control-label col-md-2" for="ArticleOnDate">Start Date</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." id="ArticleOnDate" name="ArticleOnDate" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ArticleOnDate" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group ArticleCategoryId 1">
<label class="control-label col-md-2" for="ArtilceOnTime">On Time</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ArtilceOnTime" name="ArtilceOnTime" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ArtilceOnTime" data-valmsg-replace="true"></span>
</div>
</div>
Below is the jquery snippet
<script type="text/javascript">
jQuery(".optionName").hide();
jQuery("document").ready(function () { /// have to wait till after the document loads to run these things
jQuery("select.chooseOption").change(function () {
jQuery("." + this.id).hide();
var thisValue = jQuery(this).val();
if (thisValue != "")
jQuery("." + thisValue).show();
});
});
</script>
This being an edit page I want "<div class="form-group ArticleCategoryId 3">....</div> to be hidden on page load since item Id 3 has been selected but the other should show. Any help will be appreciated
Having components classes given such as "ArticleCategoryId 1" is a bad idea.
You could have sth like
<div class="form-group editable-category" data-category-id="1">
<label class="control-label col-md-2" for="ArtilceOnTime">On Time</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ArtilceOnTime" name="ArtilceOnTime" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ArtilceOnTime" data-valmsg-replace="true"></span>
</div>
</div>
and css
.editable-category{
display:none;
}
.editable-category.active{
display:block;
}
and js as follow
$(document).ready(function(){
$('select.chooseOption').on('change',function(){
var thisValue = $(this).find('option:selected').val();
if(thisValue){
$('.editable-category.active').removeClass('active');
$('.editable-category[data-category-id="'+thisValue+'"]').addClass('active');
}
}).trigger('change');
});
I've 3 list box like this one with a different id and name:
<div class="col-md-4 column">
<div class="form-group">
<input type="hidden" name="identityCardList[0].identityCardId">
<label for="identityCardType1" class="col-sm-3 control-label">Type</label>
<div class="col-sm-9">
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="idCardValue1" class="col-sm-3 control-label">Valeur</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur">
</div>
</div>
<div class="form-group">
<label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label>
<div class="col-sm-9">
<div class="input-group date" id="expirationDateCardPicker1">
<input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label>
</div>
</div>
</div>
</div>
<div class="col-md-4 column">
...
</div>
<div class="col-md-4 column">
...
</div>
In the list box, I've this kind of value:
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
<option value=""></option>
<option value="1" data-card-expiration="false">Certificat de naissance</option>
<option value="2" data-card-expiration="false">N.A.S</option>
<option value="3" data-card-expiration="true">N.A.M</option>
</select>
When I select a value in the list box, I'd like to read the data-card-expiration value and disable expiration input text if needed.
This is my generic attempt:
$("select[id^='identityCardType']").on('change', 'select', function (e){
debugger;
if($(e.target).data("data-card-expiration")){
//disabled the nearest component expirationDateCard after this select
}
});
Why does the change event never occur?
You don't need to pass the selector 'select' to .on() just remove it. the selector filters the descendant of element.
$("select[id^='identityCardType']").on('change', function (e){ //Removed 'select'
});
Try this easy code
$("select#identityCardType1").on('change', function (e){
if($(this).data("cardexpiration")){
//disabled the nearest component expirationDateCard after this select
}
});