I'm trying to clone a form according to the numeric value from the select option. Here is the fiddle:
Html code:
<div class="travel_tour-info">
<h3>How many people are you booking for?
<select name="travellers" id="travellers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</h3>
</div>
<div class="col-md-7 well" id="passanger">
<span id="person-1"><h5>Passenger 1 Lead traveller</h5></span>
<div class="form-group">
<label for="title" class="control-label col-sm-3 required">Title</label>
<div class="col-sm-8">
<select name="title" id="title" class="form-control">
<option value="Mr.">Mr</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">First name</label>
<div class="col-sm-8">
<input type="text" name="f_name" class="form-control" id="fname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label for="address" class="control-label col-sm-3">Middle name</label>
<div class="col-sm-8">
<input type="text" name="m_name" class="form-control" id="mname-1" placeholder="Enter address">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">Last name</label>
<div class="col-sm-8">
<input type="text" name="l_name" class="form-control" id="lname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12 required"> Date of Birth:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="row">
<div class="col-xs-4">
<select id="dob_month" class="form-control" name="dob_month-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_day" class="form-control" name="dob_day-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_year" class="form-control" name="dob_year-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-3 required">
Gender
</label>
<label class="control-label col-sm-3">
<input name="gender-1" type="radio" value="M" /> Male
</label>
<label class="control-label col-sm-3 ">
<input name="gender-1" type="radio" value="F" /> Female
</label>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-3 required">Email</label>
<div class="col-sm-8">
<input type="email" name="email-1" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label for="contact" class="control-label col-sm-3 required">Contact no.
</label>
<div class="col-sm-8">
<input type="tel" class="form-control" id="contact" name="contact-1" placeholder="Contact no.">
</div>
</div>
<div class="form-group">
<label for="address1" class="control-label col-sm-3 required">Address 1</label>
<div class="col-sm-8">
<input type="text" name="address1-1" class="form-control" id="address1">
</div>
</div>
<div class="form-group">
<label for="address2" class="control-label col-sm-3">Address 2</label>
<div class="col-sm-8">
<input type="text" name="address2-1" class="form-control" id="address2">
</div>
</div>
<div class="form-group">
<label for="town" class="control-label col-sm-3 required">Suburb / Town</label>
<div class="col-sm-8">
<input type="text" name="town-1" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<label for="state" class="control-label col-sm-3 required">State / Province</label>
<div class="col-sm-8">
<input type="text" name="state-1" class="form-control" id="state">
</div>
</div>
<div class="form-group">
<label for="postcpde" class="control-label col-sm-3 required">Postcode / Zip</label>
<div class="col-sm-8">
<input type="text" name="post-1" class="form-control" id="postcpde">
</div>
</div>
</div>
javascript code:
$(document).ready(function () {
$('#travellers').change(function() {
var travellerSelected = $('#travellers option:selected').val();
var travellerDisplayed = $('[id^="person1-"]:visible').length;
var travellerRendered = $('[id^="person-"]').length;
if (travellerSelected > travellerDisplayed) {
for (var i=1;i<=travellerSelected;i++){
var r=$('#travellers-'+i);
if (r.length == 0) {
var clone=$('#travellers-1').clone(); //clone
clone.children('#person1 h5').text("Traveller "+i);
//change ids appropriately
setNewID(clone,i);
clone.children('div').each(function() {
setNewID($(this),i);
});
$(clone).insertAfter($('#travellers-'+travellerRendered));
}else {
$(r).show();
}
}
}
else {
for (var i=++travellerSelected;i<=travellerRendered;i++){
$('#travellers-'+i).hide();
}
}
});
function setNewID(elem, i) {
oldID=elem.attr('id');
newId=oldID.substring(0,oldID.indexOf('-'))+"-"+i;
elem.attr('id',newId);
}
});
But I'm getting error Uncaught TypeError: Cannot read property 'substring' of undefined in my console. I've been trying to fix this error since few days. What wrong am I doing here ?
I've edited your code, but it is hard to explain. You can see and improve your code. I hope it will help you.
In script
<script type="text/javascript">
$(function () {
$('#travellers').change(function () {
var travellerSelected = $('#travellers option:selected').val();
var travellerDisplayed = $('[id^="person-"]:visible').length;
var travellerRendered = $('[id^="person-"]').length;
if (travellerSelected > travellerDisplayed) {
for (var i = 1; i <= travellerSelected; i++) {
var r = $('#passanger-' + i);
if (r.length == 0) {
var clone = $('#passanger-1').clone(); //clone
clone.children('#person-1')[0].innerHTML = "<h5>Traveller " + i + "<h5>";
//change ids appropriately
setNewID(clone, i);
//clone.children('div').each(function () {
//setNewID($(this), i);
//});
clone.find('div').each(function () {
setNewID($(this), i);
});
clone.insertAfter($('#passanger-' + travellerRendered));
} else {
$(r).show();
}
}
} else {
for (var i = ++travellerSelected; i <= travellerRendered; i++) {
$('#passanger-' + i).hide();
}
}
});
});
function setNewID(elem, i) {
if (typeof elem.attr('id') === "undefined") {
return;
}
oldID = elem.attr('id');
newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
elem.attr('id', newId);
}
</script>
In Html
<div class="travel_tour-info">
<h3>How many people are you booking for?
<select name="travellers" id="travellers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</h3>
</div>
<div class="col-md-7 well" id="passanger">
<div id="passanger-1">
<span id="person-1"><h5>Passenger 1 Lead traveller</h5></span>
<div class="form-group">
<label for="title" class="control-label col-sm-3 required">Title</label>
<div class="col-sm-8">
<select name="title" id="title" class="form-control">
<option value="Mr.">Mr</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">First name</label>
<div class="col-sm-8">
<input type="text" name="f_name" class="form-control" id="fname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label for="address" class="control-label col-sm-3">Middle name</label>
<div class="col-sm-8">
<input type="text" name="m_name" class="form-control" id="mname-1" placeholder="Enter address">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">Last name</label>
<div class="col-sm-8">
<input type="text" name="l_name" class="form-control" id="lname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12 required"> Date of Birth:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="row">
<!-- added div.row -->
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_month" class="form-control" name="dob_month-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_day" class="form-control" name="dob_day-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_year" class="form-control" name="dob_year-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-3 required">
Gender
</label>
<label class="control-label col-sm-3">
<input name="gender-1" type="radio" value="M" /> Male
</label>
<label class="control-label col-sm-3 ">
<input name="gender-1" type="radio" value="F" /> Female
</label>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-3 required">Email</label>
<div class="col-sm-8">
<input type="email" name="email-1" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label for="contact" class="control-label col-sm-3 required">Contact no.</label>
<div class="col-sm-8">
<input type="tel" class="form-control" id="contact" name="contact-1" placeholder="Contact no.">
</div>
</div>
<div class="form-group">
<label for="address1" class="control-label col-sm-3 required">Address 1</label>
<div class="col-sm-8">
<input type="text" name="address1-1" class="form-control" id="address1">
</div>
</div>
<div class="form-group">
<label for="address2" class="control-label col-sm-3">Address 2</label>
<div class="col-sm-8">
<input type="text" name="address2-1" class="form-control" id="address2">
</div>
</div>
<div class="form-group">
<label for="town" class="control-label col-sm-3 required">Suburb / Town</label>
<div class="col-sm-8">
<input type="text" name="town-1" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<label for="state" class="control-label col-sm-3 required">State / Province</label>
<div class="col-sm-8">
<input type="text" name="state-1" class="form-control" id="state">
</div>
</div>
<div class="form-group">
<label for="postcpde" class="control-label col-sm-3 required">Postcode / Zip</label>
<div class="col-sm-8">
<input type="text" name="post-1" class="form-control" id="postcpde">
</div>
</div>
</div>
</div>
Related
I want to create multiple forms based on user input of a dropdown list. For example, if the user selects 3, then I have to create 3 same forms, one after another. I have the code below:
HTML code
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
And JS code I found that shows the result of the dropdown list
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = "You selected " + numberOfPassengers + " passengers";
}
I am still a beginner, so any tips would be appreciated! :)
You can store the contents of your outside-container class in a separate variable. And depending on the user selection, add this variable that many times to the array.
const formMarkup = `<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>`
And then
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
var result = [];
for(var i=0; i < numberOfPassengers; i++) {
result.push(formMarkup);
}
document.getElementById("outside-container").innerHTML = result.join('');
}
Also, update your original markup to
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
</div>
I am collecting an ABN (Australian Business Number) on a registration form. I have written some javascript that does validation based on the ABN validation rule here:
function validateABN (abnNumber) {
var weights = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var result = false;
if (abnNumber.length === 11) {
var sum = 0;
var weight;
for (var index = 0; index <= weights.length - 1; index++) {
weight = weights[index];
digit = abnNumber[index] - (index ? 0 : 1);
sum += weight * digit;
}
result = sum % 89 === 0;
}
return result;
}
console.log(validateABN('43154365778'));
The form field name is: CompanyABNACN
It is a bootstrap form. I'm a little familiar with bootstrap but not to the point where I can add custom form field validation on a form element. I want an error message to be displayed "Invalid ABN format" if the javascript validation fails.
I have searched google and within the stack overflow forums and have not been able to find an example similar to mine or I have found really complicated examples I'm not able to understand.
Would someone please explain to me how to incorporate this custom function into validation on my registration form please.
<div class="account-hold my-account register">
<div class="container">
<div class="row mt-30">
<div class="col-sm-12">
<h1 class="my-account-label">Create Account</h1><hr class="ghr">
</div>
<div class="col-sm-6 pull-right">
<img src="assets/images/content-images/register/image.jpg" class="img-responsive" alt="" />
</div>
<div class="col-sm-6">
<p class="my-account-label-p mb-30">Already have an account? Click here to sign in or complete the form below to create a new account</p>
<form name="registrationform" id="registration-form" action="/registration/" method="post" class="form-horizontal validate-form" role="form">
<input type="hidden" name="page" value="register" />
<input type="hidden" name="redirect" value="/content/thank-you-registration/" />
<input type="hidden" id="validated" value="f" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">First Name:</label>
<div class="col-lg-8 col-md-8">
<input name="firstname" type="text" id="firstname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Last Name :</label>
<div class="col-lg-8 col-md-8">
<input name="lastname" type="text" id="lastname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Email Address :</label>
<div class="col-lg-8 col-md-8">
<input name="email" type="email" id="registration-email" placeholder="" class="form-control required email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">ABN :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" />
<div class="form-control hidden invalid-feedback">Please provide a valid ABN.</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Company :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyName" type="text" id="CompanyName" placeholder="" class="form-control required company" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Phone Number :</label>
<div class="col-lg-8 col-md-8">
<input name="PhoneNumber" type="text" id="PhoneNumber" placeholder="" class="form-control phone-number" />
</div>
</div>
<input name="birthday" type="hidden" id="birthday" class="form-control" placeholder="" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Capricorn Member Number:</label>
<div class="col-lg-8 col-md-8">
<input name="capicorn_number" type="text" id="capicorn_number" class="form-control" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Street Address :</label>
<div class="col-lg-8 col-md-8">
<input name="streetaddress" type="text" id="street-address" placeholder="" class="form-control street-address required auto-streetaddress" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Suburb / City :</label>
<div class="col-lg-8 col-md-8">
<input name="suburb" type="text" id="suburb" placeholder="" class="form-control city required auto-suburb" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">State :</label>
<div class="col-lg-8 col-md-8">
<select name="state" class="form-control required auto-state" id="state">
<option value="">Please Select</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT ">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA ">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC">Victoria</option>
<option value="WA ">Western Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Country : </label>
<div class="col-lg-8 col-md-8">
<select name="country" id="Country" class="form-control clone required auto-country" data-native-menu="false" data-rel="country-field">
<option value="">Please Select</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Post Code : </label>
<div class="col-lg-8 col-md-8">
<input name="postcode" type="text" id="postcode" class="form-control required auto-postcode" placeholder="" />
</div>
</div>
<!---
<input type="hidden" name="password">
<input type="hidden" name="password2">
--->
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Account Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" name="password" id="password" class="form-control required" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Confirm Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" class="form-control required" id="password2" name="password2" data-rel="password" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label">Newsletter: </label>
<div class="col-lg-8 col-md-8">
<input type="checkbox" name="newsletter1" id="newsletter1" value="1" checked="true">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-4 col-lg-3 col-md-offset-4 col-md-3 text-left">
<input name="submitbutton" id="submit-button" type="submit" value="Register" class="btn partwise-btn btn-block text-uppercase" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
You didn't specify when the validation should occur, e.g. as the user is entering the ABN number or when they submit the form. Assuming the former, you can do the following:
Add an 'input' event listener to the ABN input field so that it validates every time the user enters something in that field:
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" oninput="do_validate();" />
(You can also use jQuery to add an event listener rather than doing it inline as in my example above.)
Your validation function should look something like this:
function do_validate() {
if ( validateABN( $('input#CompanyABNACN').val() ) ) {
$( '.invalid-feedback' ).hide();
$('input#CompanyABNACN').removeClass( 'is-invalid' )
} else {
$( '.invalid-feedback' ).show();
$('input#CompanyABNACN').addClass( 'is-invalid' )
}
}
You need to add "is-invalid" class to the input to invalidate for ABN via javascript.
<div class="col-md-3 mb-3">
<label for="ABNnumber">Zip</label>
<input type="text" class="form-control" id="ABNnumber" name="ABNnumber" required>
<div class="invalid-feedback">
Please provide a valid ABN.
</div>
</div>
Your javascript should be sth like this
$("form#abnFormSubmit").on("submit", function(e){
e.preventdefault;
var isAbnValid = validateABN($("#ABNnumber").val());
if(!isAbnValid){
$("#ABNnumber").addClass("is-invalid");
}
else{
$("#ABNnumber").removeClass("is-invalid");
}
})
I want to change which form to show using dropdown and jquery but doesn't seem to work. I did try a simple code using just a couple of divs and a paragraph and it worked or so I thought, because it's no longer work when I put my forms into it.
By the way, here's my code:
//this is the form
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Here is the jquery:
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'{
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
I also tried any different ways but I can't yet find out what I'm missing.
Would you be so kind to help me?
Your else if condition is not close with ) and add jquery, check it
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'){
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<h2>qnap</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<h2>asustor</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
I am trying to add a disabled attribute to the button if all input fields and all select dropdown fields are empty but I'm having no luck.
Here's the form:
<form id="ridefinancing">
<fieldset id="details">
<h3 class="fs-title">Your Details</h3>
<div id="div_id_firstname" class="form-group required">
<label for="id_firstname" class="control-label col-md-3 requiredField"> Firstname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input class="form-control gradient" id="id_firstname" maxlength="30" name="firstname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_lastname" class="form-group required">
<label for="id_lastname" class="control-label col-md-3 requiredField"> Lastname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input class="form-control gradient" id="id_lastname" maxlength="30" name="lastname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_email" class="form-group required">
<label for="id_email" class="control-label col-md-3 requiredField"> Email<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input class="form-control gradient" id="id_email" maxlength="30" name="email" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_phone" class="form-group required">
<label for="id_phone" class="control-label col-md-3 requiredField"> Phone<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input class="form-control gradient" id="id_phone" maxlength="30" name="phone" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_birthday" class="form-group required">
<label for="id_birthday" class="control-label col-md-3 requiredField"> Birthday<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<div class="row">
<div class="col-xs-4">
<select class="form-control gradient" id="id_day">
</select>
</div>
<div class="col-xs-4">
<select class="form-control gradient" id="id_month">
</select>
</div>
<div class="col-xs-4">
<select class="form-control gradient" id="id_year">
</select>
</div>
</div>
</div>
</div>
<div id="div_id_status" class="form-group required">
<label for="id_status" class="control-label col-md-3 requiredField"> Marital Status<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select class="form-control gradient" id="id_status">
<option>Please Select</option>
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
</select>
</div>
</div>
<div id="div_id_dlicense" class="form-group required">
<label for="id_dlicense" class="control-label col-md-3 requiredField"> Driving License<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select class="form-control gradient" id="id_dlicense">
<option>Please Select</option>
<option>032654897</option>
</select>
</div>
</div>
<button disabled="disabled" type="submit" class="vhb next action-button" id="btn1">Continue</button>
</fieldset>
I have tried this code for the input fields but still not working
I suspect it's because of the wrong selector, and I havent added the code yet for the select field.
<script type="text/javascript">
$(document).ready(function() {
var $fields = $('#details :input');
$fields.keyup(function() {
var $emptyFields = $fields.filter(function() {
return $.trim(this.value) === '';
});
if (!$emptyFields.length) {
$('#btn1').prop('disabled', true);
} else {
$('#bt1').prop('disabled', false);
}
});
});
First step : make it disabled by default
Second step: make a function that follows this pseudo code
on input change : function
if(input 1.val()=="" || input 2.val()=="" /* etc... */) then
set disabled to true
else
remove disabled attribute
end if
end function
BTW, in JQuery disabled mustn't a prop but must be an attr.
In JQuery you can use $(/*selector*/).removeAttr(/*attribute*/) to achieve it.
$('#a').on('keyup paste propertychange input', function() {
if (this.value === "") $('#b').prop('disabled', true);
else $('#b').removeAttr('disabled');
});
$('#b').on('keyup paste propertychange input', function() {
if (this.value === "") $('#c').prop('disabled', true);
else $('#c').removeAttr('disabled');
});
$('#c').on('keyup paste propertychange input', function() {
if (this.value === "") $('#d').prop('disabled', true);
else $('#d').removeAttr('disabled');
});
$('#d').on('keyup paste propertychange input', function() {
if (this.value === "") $('#e').prop('disabled', true);
else $('#e').removeAttr('disabled');
});
$('#e').on('keyup paste propertychange input', function() {
if (this.value === "") $('#f').prop('disabled', true);
else $('#f').removeAttr('disabled');
});
$('#f').on('keyup paste propertychange input', function() {
if (this.value === "") $('#g').prop('disabled', true);
else $('#g').removeAttr('disabled');
});
$('#g').on('keyup paste propertychange input', function() {
if (this.value === "") $('#h').prop('disabled', true);
else $('#h').removeAttr('disabled');
});
$('#h').on('keyup paste propertychange input', function() {
if (this.value === "") $('#i').prop('disabled', true);
else $('#i').removeAttr('disabled');
});
$('#i').on('keyup paste propertychange input', function() {
if (this.value === "") $('#j').prop('disabled', true);
else $('#j').removeAttr('disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="ridefinancing">
<fieldset id="details">
<h3 class="fs-title">Your Details</h3>
<div id="div_id_firstname" class="form-group required">
<label for="id_firstname" class="control-label col-md-3 requiredField"> Firstname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input id="a" class="form-control gradient" id="id_firstname" maxlength="30" name="firstname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_lastname" class="form-group required">
<label for="id_lastname" class="control-label col-md-3 requiredField"> Lastname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input id="b" disabled="disabled" class="form-control gradient" id="id_lastname" maxlength="30" name="lastname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_email" class="form-group required">
<label for="id_email" class="control-label col-md-3 requiredField"> Email<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input id="c" disabled="disabled" class="form-control gradient" id="id_email" maxlength="30" name="email" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_phone" class="form-group required">
<label for="id_phone" class="control-label col-md-3 requiredField"> Phone<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input id="d" disabled="disabled" class="form-control gradient" id="id_phone" maxlength="30" name="phone" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_birthday" class="form-group required">
<label for="id_birthday" class="control-label col-md-3 requiredField"> Birthday<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<div class="row">
<div class="col-xs-4">
<select id="e" disabled="disabled" class="form-control gradient" id="id_day">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-xs-4">
<select id="f" disabled="disabled" class="form-control gradient" id="id_month">
<option>Please Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-xs-4">
<select id="g" disabled="disabled" class="form-control gradient" id="id_year">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
</div>
<div id="div_id_status" class="form-group required">
<label for="id_status" class="control-label col-md-3 requiredField"> Marital Status<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select id="h" disabled="disabled" class="form-control gradient" id="id_status">
<option>Please Select</option>
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
</select>
</div>
</div>
<div id="div_id_dlicense" class="form-group required">
<label for="id_dlicense" class="control-label col-md-3 requiredField"> Driving License<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select id="i" disabled="disabled" class="form-control gradient" id="id_dlicense">
<option>Please Select</option>
<option>032654897</option>
</select>
</div>
</div>
<button id="j" disabled="disabled" type="submit" class="vhb next action-button" id="btn1">Continue</button>
</fieldset>
check the form and script if i have done correct way . Hope it will work for you .
I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
Add the following JS to your code.
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
$('.permanentAdd').attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group ">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control permanentAdd" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
You can try something like this
<input type="checkbox" id="check_box" onchange="set_status();">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <div id="txt_field" name="txt_field"> </div>
<script type="text/javascript">
function set_status() {
var appendData = '';
var checkbox = document.getElementById("check_box");
if (checkbox.checked == true) {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required" placeholder="Zip Code" />';
}
else {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required" placeholder="Zip Code" />';
}
window.jQuery('#txt_field').html(appendData);
}
</script>
</div>
</div>
</div>
</div>
Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.
jQuery
$( "input[type=checkbox]" ).on( "click", function(){
var n = $("input[type=checkbox]:checked").length;
if(n){
$(".permanent-address").attr("disabled", 'disabled');
}else{
$(".permanent-address").removeAttr("disabled");
}
});
HTML
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />
Pure javascript anwser
function checkAddress(checkbox) {
var inputs = document.querySelectorAll('input:not([type=checkbox])');
var selects = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = checkbox.checked;
}
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = checkbox.checked;
}
}
HTML code
<input type="checkbox" onclick="checkAddress(this)">
https://jsfiddle.net/0ba4f7jd/
Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:
$('#checkbox').change(function(){
var div = $('#everything');
if (div.attr('class')!="disabled") {
div.addClass("disabled");
$("#everything *").attr("disabled", true);
}
else {
div.removeClass("disabled");
$('#everything *').attr('disabled',false);
}
});
DEMO