Uncaught ReferenceError: CommonFunctions is not defined(…) - javascript

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>

Related

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>

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>

Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL

A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';

function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->

here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});

how to validate form in jquery [duplicate]

This question already has answers here:
A simple jQuery form validation script [closed]
(2 answers)
Closed 7 years ago.
When i submit the form alert will be show but after page is redirect.
i have call function to the submit button on click.
alert will show and after form will be submited
please give me idea to validate form
function companyFormValidation()
{
var name = document.getElementById('companyname').value;
var title = document.getElementById('companytitle').value;
var desc = document.getElementById('description').value;
var logo = document.getElementById('logo').value;
var email = document.getElementById('emailid').value;
var website = document.getElementById('siteurl').value;
var phonenumber = document.getElementById('phonenumber').value;
var faxNumber = document.getElementById('faxNumber').value;
var address = document.getElementById('address').value;
var latitude = document.getElementById('latitude').value;
var longitude = document.getElementById('longitude').value;
if(name == '')
{
alert('Name can not empty');
//$("#ename").html("Name can't be empty..");
}
}
<form id="addCompanyForm" method="post" action="#" class="form-horizontal" >
<fieldset>
<legend>Company </legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="companyname" id='companyname' />
<div id="ename"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Title</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="companytitle" id="companytitle" />
<div id="etitle"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Description</label>
<div class="col-lg-5">
<textarea class="form-control" name="description" id = "description"></textarea>
<div id="edesc"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Logo</label>
<div class="col-lg-5">
<input type="file" class="form-control" name='logo' id="logo" >
<!-- <span class="input-group-btn">
<span class="btn btn-default btn-file">
Browse… <input type="file" name="">
</span>
</span> -->
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="emailid" id="emailid"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Website</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="siteurl" placeholder="http://" id="siteurl" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phonenumber" id="phonenumber"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Fax number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="faxNumber" id="faxNumber" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Address</label>
<div class="col-lg-5">
<textarea class="form-control" name="address" id="address"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Latitude</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="latitude" id="latitude" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Longitude</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="longitude" id="longitude" />
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" onclick="companyFormValidation()" >Submit</button>
</div>
</div>
</form>

Here is the code with return false if any field is empty.
<script>
function companyFormValidation()
{
var name = document.getElementById('companyname').value;
var title = document.getElementById('companytitle').value;
var desc = document.getElementById('description').value;
var logo = document.getElementById('logo').value;
var email = document.getElementById('emailid').value;
var website = document.getElementById('siteurl').value;
var phonenumber = document.getElementById('phonenumber').value;
var faxNumber = document.getElementById('faxNumber').value;
var address = document.getElementById('address').value;
var latitude = document.getElementById('latitude').value;
var longitude = document.getElementById('longitude').value;
if(name == '')
{
alert('Name can not empty');
//$("#ename").html("Name can't be empty..");
return false;
}
}
</script>
<form id="addCompanyForm" method="post" action="#" onsubmit="return companyFormValidation()" class="form-horizontal" >
<fieldset>
<legend>Company </legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="companyname" id='companyname' />
<div id="ename"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Title</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="companytitle" id="companytitle" />
<div id="etitle"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Description</label>
<div class="col-lg-5">
<textarea class="form-control" name="description" id = "description"></textarea>
<div id="edesc"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Logo</label>
<div class="col-lg-5">
<input type="file" class="form-control" name='logo' id="logo" >
<!-- <span class="input-group-btn">
<span class="btn btn-default btn-file">
Browse… <input type="file" name="">
</span>
</span> -->
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email </label>
<div class="col-lg-5">
<input type="text" class="form-control" name="emailid" id="emailid"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Website</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="siteurl" placeholder="http://" id="siteurl" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phonenumber" id="phonenumber"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Fax number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="faxNumber" id="faxNumber" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Address</label>
<div class="col-lg-5">
<textarea class="form-control" name="address" id="address"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Latitude</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="latitude" id="latitude" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Longitude</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="longitude" id="longitude" />
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</form>
Your code is written in js and you are asking for jquery. For jquery use above answer.

You may use validate JS "jquery.validate.min.js" for jquery validation. It's a simple. You want the demo you can check it http://www.sitepoint.com/basic-jquery-form-validation-tutorial/. Hope this helps to you, Thanks!

Javascript object has data, but isn't populating textboxes it in MVC view

I have a method from my controller passing data as json, and when I step through the javascript, I am seeing that the data made it to the JavaScript object, but for some reason its not populating my textboxes. When I am debugging in Chrome, I see the data in the object and no errors are being thrown.
At first I tried doing this...
public ActionResult Preferences()
{
GetClientResult();
return View();
}
But I thought may have been the problem, so I changed things around and now it looks like this
In my controller I have..
public JsonResult GetClientResult()
{
OQOE = new OQOEDAL();
List<ClientInformation> ClientList = OQOE.GetClientInformation();
return Json(ClientList, JsonRequestBehavior.AllowGet);
}
and my javascript file looks like this..
$(document).ready(function () {
GetClientInformation();
});
function GetClientInformation() {
$.ajax({
type: "GET",
url: AddClientURLParam.AddGetClientInformationURL,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
return DataToGet(data);
}
})
}
function DataToGet(clientInfoData) {
$("#txtCompanyName").val(clientInfoData[0].customerName);
$("#txtAddress1").val(clientInfoData[0].address1);
$("#txtAddress2").val(clientInfoData[0].address2);
$("#txtCity").val(clientInfoData[0].city);
$("#txtState").val(clientInfoData[0].state);
$("#txtZip").val(clientInfoData[0].zip);
$("#txtEmail").val(clientInfoData[0].email);
$("#txtContact").val(clientInfoData[0].contactName);
$("#txtPhone").val(clientInfoData[0].phone);
$("#txtWorkPhone").val(clientInfoData[0].work);
$("#txtMobile").val(clientInfoData[0].mobile);
$("#txtFax").val(clientInfoData[0].fax);
$("#txtOther").val(clientInfoData[0].other);
}
and my View has this...
<div class="tab-pane active" id="YourInfo">
<h4>Please fill out your Information below.</h4>
<div class="form-group">
<label for="txtCompanyName" class="control-label col-md-2"><b>Company Name:</b></label>
<div class="col-md-8">
<input id="txtCompanyName" type="text" class="form-control max-size" required />
</div>
</div>
<hr />
<div class="col-md-6">
<fieldset>
<legend><h4><b>Address</b></h4></legend>
<div class="form-group">
<label for="txtAddress1" class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input id="txtAddress1" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtAddress2" class="control-label col-md-2">Address2</label>
<div class="col-md-10">
<input id="txtAddress2" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCity" class="control-label col-md-2">City</label>
<div class="col-md-10">
<input id="txtCity" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtState" class="control-label col-md-2">State</label>
<div class="col-md-4">
<input id="txtState" type="text" class="form-control" />
</div>
<label for="txtZip" class="control-label col-md-2">Zip/Postal</label>
<div class="col-md-4">
<input id="txtZip" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtEmail" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<input id="txtEmail" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend><h4><b>Contact</b></h4></legend>
<div class="form-group">
<label for="txtContact" class="control-label col-md-2">Contact</label>
<div class="col-md-10">
<input id="txtContact" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2">Phone</label>
<div class="col-md-10">
<input id="txtPhone" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtWorkPhone" class="control-label col-md-2">Work</label>
<div class="col-md-10">
<input id="txtWorkPhone" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtFax" class="control-label col-md-2">Fax</label>
<div class="col-md-10">
<input id="txtFax" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtMobile" class="control-label col-md-2">Mobile</label>
<div class="col-md-10">
<input id="txtMobile" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtOther" class="control-label col-md-2">Other</label>
<div class="col-md-10">
<input id="txtOther" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-10">
<input id="btnSaveClientInfo" type="button" value="Save" class="btn btn-primary" />
<input id="btnCancelClientInfo" type="button" value="Cancel" class="btn btn-primary" />
</div>
</div>
</div>

Well, seems that problem will be solved with removing keyword return from AJAX success handler. Function DataToGet doesn't return anything meaningful in this case. It is just populating inputs values. So. My answer is based on comments debates.

angularjs to change css style using directive

I am trying to Manipulate DOM css style using angular , suppose text box value i want to set as height . i assigned ng-model to text box and then ng-style="{height:heightdef}"
How can i acieve this using Directive??
Fiddle ::
http://jsfiddle.net/simmi_simmi987/U5KCg/
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="container">
<div class="row">
<h1>Hello, world! {{hello}}</h1>
<input type="text" />
<div ng-style="{backgroundColor:bgcolordef}">I'm a banner! + {{bgcolordef}}</div>
<div ng-style="{height:heightdef,width:widthdef,backgroundColor:bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">
<br/>
I am main Box
<a href={{link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{box1label}}</div></a>
<a href={{link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{box3label}}</div></a>
<a href={{link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{box4label}}</div></a>
<!-- <div class="smallbox pull-right col-md-1" id="box5" >box5</div>
<div class="smallbox pull-right col-md-1" id="box6" >box6</div> -->
</div>
</div><!-- row closed -->
<br/><br/><br/><br/>
<div class="row">
<div class="form col-md-5 category">
<!-- Height input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Height</label>
<div class="col-md-9">
<input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- Width input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Width</label>
<div class="col-md-9">
<input ng-model="widthdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- BAckground-color input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">BgColor</label>
<div class="col-md-9">
<input ng-model="bgcolordef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<div class="form col-md-5 col-md-offset-1 category">
<div class="form-group indiv-box">
<h3>Box 1:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link1" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box1label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 2:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link2" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box2label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 3:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link3" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box3label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 4:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link4" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box4label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
</div>
</div><!-- row closed -->
<div> <!-- Container closed -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/ng-grid-2.0.7.min.js"></script>
</div>
Javascript ::
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
$scope.hello="My dear very good morning";
$scope.heightdef=100;
$scope.widthdef=1000;
$scope.box1label="box1";
$scope.box2label="box2";
$scope.box3label="box3";
$scope.box4label="box4";
$scope.link1="box1.html";
$scope.link2="box2.html";
$scope.link3="box3.html";
$scope.link4="box4.html";
});

If I understand your question correctly, this link may be help you to get your answer. This is the link which I was looking for like you.
for short answer:
<div ng-style="{ 'height' : heightdef }"></div>

So here is the updated answer:
You should create derective according angular Directive Documentation
app.directive('myBox', function(){
function link(scope, el, attrs) {
}
return {
scope:{
options: '='
},
restrict: 'E',
link: link,
// here you can use inline template: "<div>..." or templateUrl: 'url to your partial'
};
});
so you can use it like this <my-box options='options'></my-box>
to change options by clicking button:
$scope.setMainBox = function(){
var options = {
heightdef: $scope.heightdef,
widthdef: $scope.widthdef,
bgcolordef: $scope.bgcolordef
};
$scope.options = options;
};
markup
<button ng-click="setMainBox()" class="btn btn-primary btn-default pull-right" > Set main box </button>
here is quick example

Categories