Change forms displayed on change of value of drop down

Change forms displayed on change of value of drop down - javascript

I have this HTML form and jQuery script:
$(document).ready(function() {
$('#accounttype').on('change', function() {
if (this.value == '1') {
$("#corporate").show();
} else if (this.value == '0') {
$("#individual").show();
} else {
$("#corporate").hide();
$("#individual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div id='corporate' class="form-group row">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
</div>
What I need to do is to display the forms according to the value selected in the dropdown using onchange but It doesn't seem to be working. Can someone point out what's wrong? Thanks!

Your Javascript code is not correct... First remove semi colons from the if statement then use the Javascript below.
Also your HTML code should be reformatted as below.
The id individual is now tied to one parent div which covers the div's for the individual data instead of having multiple divs with the same id.
$(document).ready(function() {
$("#corporate").hide();
$("#individual").hide();
$('#accounttype').on('change', function() {
if (this.value == '1') {
$("#individual").hide();
$("#corporate").show();
} else if (this.value == '0') {
$("#corporate").hide();
$("#individual").show();
} else {
$("#corporate").hide();
$("#individual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="">Select account type...</option>
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div id='corporate' class="form-group row">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div id='individual'>
<div class="form-group row">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
</div>

<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div class="form-group row corporate">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
<script src="../resources/scripts/jquery2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".corporate").hide();
$(".individual").hide();
$("#accounttype").change(function () {
if ($(this).val() == 1) {
$(".corporate").show();
$(".individual").hide();
} else if ($(this).val() == 0) {
$(".individual").show();
$(".corporate").hide();
} else {
$(".corporate").hide();
$(".individual").hide();
}
});
});
</script>
Please try above code, hope this will help you,
Note:- there must be a unique id for each html element, for multiple you can use clsss
please don't forget to add jquery library above the js code

Related

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

Not trigger form validation on button click

I have a form which consists of two buttons. None of them have the "submit" declaration in type.
My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click.
Can this be achieved?
Below is my code.
<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
<div class="panel panel-default" ng-init="init()">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">PERSONAL INFO</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.name" name="username" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-Mail</label>
<div class="col-lg-9">
<input type="email" ng-model="customer.email" name="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile Number</label>
<div class="col-lg-9">
<input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".{9,}" required title="9 characters minimum" />
</div>
</div>
<legend class="text-semibold">ADDRESS</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Organisation Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".{0}|.{5,}" title="Either 0 OR (5 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Floor</label>
<div class="col-lg-9">
<input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".{0}|.{1,}" title="Either 0 OR (1 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 1</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 2</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Postcode</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">ITEMS</legend>
<div class="container" ng-repeat="item in items">
<div class="row">
<div class="col-md-1 col-xs-3 col-sm-2">
<a href="#" class="thumbnail">
<img ng-src="{{ item.thumbnail }}">
</a>
</div>
<div style="font-size:15px;" class="col-md-6"><span style="color:coral;">{{ item.qty }} x </span>{{ item.title }}</div>
<div style="font-size:13px;" class="col-md-6">{{ item.description }}</div>
<div class="col-md-6" style="padding-top:5px; font-size: 15px;">$ {{ item.line_total }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-semibold">CHECK OUT</legend>
</fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">Vouchercode</label>
<div class="col-lg-6">
<input type="text" ng-model="voucher" name="voucher" class="form-control" />
</div>
<div class="col-lg-3">
<button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Special Notes</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total</label>
<div class="col-lg-9">NZ {{total | currency}}</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Add type to the button:
<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>

Angular JS : show div based on radio button selection

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="show_other=true">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="display=false">
<span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.
Any help would be great.
Thank You.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="option='other'">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="option='none'">
<span>None</span></label>
</div>
<div class="form-group" ng-show="option ==='other'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-show="option ==='other' || option === 'company'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
Following changes are done.
1) Clicked item is saved in 'option' variable.
2) Show the form field based on data in 'option' variable.

It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label>
<label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label>
<label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-hide="show_url">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>

Uncaught ReferenceError: CommonFunctions is not defined(…)

I have two external javascript files, one called CommonFunctionsJS and the other called DealerCreateOrderJS.
The DealerCreateOrderJS is called in a view.
When I try to call a function from CommonFunctionsJS in the DealerCreateOrderJS, I keep getting an error
Uncaught ReferenceError: CommonFunctions is not defined(…)
when I try to do this
$('#txtDate').val(CommonFunctions.GetCurrentDate());
in the DealerCreateOrderJS script
and am not sure why I would be getting this error, and not sure how to define it properly.
This is what the CommonFunctionsJS file looks like thus far
var CommonFunctions = {
GetCurrentDate: function () {
var dt = new Date();
var currentDate = (dt.getMonth()+1) + '/' + dt.getDate() + '/' + dt.getFullYear();
return currentDate;
}
}
I have added a reference to the view that references the DealerCreateOrderJS, but to no avail
Adding HTML
#{
Layout = null;
}
<style>
/*#panelbar .k-state-selected {
background-color:blue;
border-color:blue;
}*/
/*#panelbar .k-state-focused .k-state-active {
background-color: blue;
}*/
.k-numerictextbox .k-input {
margin: 0;
height: inherit;
}
</style>
<div class="container-fluid">
<div style="height:800px; width:100%; overflow:auto;">
<div class="col-md-12">
<ul id="panelbar">
<li>
Customer Information
<div class="container">
<div class="form-horizontal">
<div class="col-md-12">
<br />
<div class="form-group">
<label for="txtFarmName" class="control-label col-md-2">Farm Name</label>
<div class="col-md-8">
<input id="txtFarmName" class="form-control" placeholder="Farm Name" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerName" class="control-label col-md-2">Customer</label>
<div class="col-md-8">
<input id="txtCustomerName" class="form-control" placeholder="Customer Name" />
</div>
</div>
<div>
<div class="form-group">
<label for="txtAddress1" class="control-label col-md-2" id="lblAddress1">Address</label>
<div class="col-md-8">
<input id="txtAddress1" type="text" class="form-control max-size" name="address" placeholder="Address 1" />
</div>
</div>
<div class="form-group">
<label for="Address2" class="control-label col-md-2" id="lblAdministrationManufacturerAddress2">Address2</label>
<div class="col-md-8">
<input id="txtAddress2" type="text" class="form-control max-size" placeholder="Address 2" />
</div>
</div>
<div class="form-group">
<label for="txtCity" class="control-label col-md-2" id="lblCity">City</label>
<div class="col-md-8">
<input id="txtCity" type="text" class="form-control max-size" name="city" placeholder="City" />
</div>
</div>
<div class="form-group">
<label for="txtState" class="control-label col-md-2" id="lblState">Province</label>
<div class="col-md-3">
<input id="txtState" type="text" class="form-control" name="state" placeholder="Province" />
</div>
<label for="txtPostal" class="control-label col-md-2" id="lblZip">Postal</label>
<div class="col-md-3">
<input id="txtPostal" type="text" class="form-control" name="postal" placeholder="Postal" />
</div>
</div>
<div class="form-group">
<label for="acCountries" class="control-label col-md-2" id="lblCountry"><b>Country</b></label>
<div class="col-md-8">
<select id="acCountries" class="form-control" name="country"></select>
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2" id="lblCity">Phone</label>
<div class="col-md-8">
<input id="txtPhone" type="text" class="form-control max-size" name="city" placeholder="Phone" />
</div>
</div>
<div class="form-group">
<label for="txtNamePlate" class="control-label col-md-2" id="lblCity">Name Plate</label>
<div class="col-md-8">
<input id="txtNamePlate" type="text" class="form-control max-size" name="city" placeholder="Name Plate" />
</div>
</div>
<div class="form-group">
<label for="txtLocation" class="control-label col-md-2" id="lblCity">Location</label>
<div class="col-md-8">
<input id="txtLocation" type="text" class="form-control max-size" name="city" placeholder="Location" />
</div>
</div>
</div>
</div><!--Keep everything in here -->
</div><!-- End of Form Horizontal -->
</div>
</li>
<li class="k-state-active">
Dealer Information
<div>
<div class="container">
<div class="form-horizontal">
<div class="col-md-12">
<br />
<div class="form-group">
<label for="txtDealership" class="control-label col-md-2">Dealership</label>
<div class="col-md-8">
<input id="txtDealership" class="form-control" disabled />
</div>
</div>
<div class="form-group">
<label for="txtLocationName" class="control-label col-md-2">Sales Person</label>
<div class="col-md-8">
<input id="txtSalesPerson" class="form-control" disabled />
</div>
</div>
<div class="form-group">
<label for="txtDate" class="control-label col-md-2" id="lblModel">Date</label>
<div class="col-md-8">
<input id="txtDate" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtSalesRep" class="control-label col-md-2">Sales Rep</label>
<div class="col-md-8">
<input id="txtSalesRep" type="text" class="form-control" placeholder="Dealer Sales Rep" />
</div>
</div>
<div class="form-group">
<label for="txtSalesAdvisor" class="control-label col-md-2" id="lblModel">Sales Advisor</label>
<div class="col-md-8">
<input id="txtSalesAdvisor" type="text" class="form-control max-size" placeholder="Sales Advisor" />
</div>
</div>
<div class="form-group">
<label for="txtPartNumber" class="control-label col-md-2">Part #</label>
<div class="col-md-8">
<input id="txtPartNumber" type="text" class="form-control max-size" disabled />
</div>
</div>
<div class="form-group">
<label for="txtContactEmail" class="control-label col-md-2">Email</label>
<div class="col-md-8">
<input id="txtContactEmail" type="text" class="form-control max-size" placeholder="Contact Email" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-md-offset-2" role="group" aria-label="...">
<button type="button" class="btn btn-primary"> Save </button>
<button type="button" class="btn btn-danger"> Cancel </button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="~/Scripts/CustomJS/DealerCreateOrderJS.js"></script>

If your html is complete, you have not including JS file. Add
<script src="~/Scripts/CustomJS/CommonFunctionsJS.js"></script>
Before <script src="~/Scripts/CustomJS/DealerCreateOrderJS.js"></script>

Tab Validation not happening for Dropdownlist only

I have written some validations for my fields to happen on tab out.The validations work for all the input fields but the dropdown fields dont get valdated.
My HTML is as shown
<head>
<title>CREATE PROVIDER</title>
</head>
<body>
<div class="container">
<h1 class="col-sm-offset-2">Enter Provider Details:</h1><br />
<form class="form-horizontal" role="form" id="ProviderDetailsForm">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">LAST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the Last Name" id="LastName" data-bind="value: LastName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_LastName">Enter the last name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Certification" data-bind="value:SelectedCertification,options: Certification, optionsCaption: 'Select a Certification'">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
<button type="reset" class="btn btn-primary col-sm-1">Reset</button>
</div>
</form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>
The JS script is
$("#FirstName").blur(function () {
if ($(this).val().trim().length == 0) {
$(this).addClass('borderclass');
$("#Err_FirstName").show();
}
else {
$("#Err_FirstName").hide();
$(this).removeClass('borderclass');
}
});
//Scripts for the Certification
$("#Certification option:selected").blur(function () {
if ($('#Certification :selected').text() == "Select a Certification")
alert("Please choose a Certification");
});
//Scripts for the Specialization
$("#Specialization option:selected").blur(function () {
if ($('#Specialization :selected').text() == "Select a Specialization")
alert("Please choose a Specialization");
});
I have also attached an image
Could you please guide me in the right direction.Thanks.
I have also included the following jquery files in my solution if that helps
jquery.2.1.3.min.js and jquery-ui-1.11.2.js

Check this : http://jsfiddle.net/4vsr04o9/
$("#Specialization").blur(function () {
//alert("hello");
if ($('#Specialization :selected').text() == "Select a Specialization")
alert("Select a Specialization");
});
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
<option>Hello World</option>
</select>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Change forms displayed on change of value of drop down - javascript

Related

User input validation Bootstrap 4 and JQuery?

Not trigger form validation on button click

Angular JS : show div based on radio button selection

Uncaught ReferenceError: CommonFunctions is not defined(…)

Tab Validation not happening for Dropdownlist only

Categories

Resources