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!
Related
Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};
I have different forms inside divs with different ids. What I am doing is that I am using radio buttons to disable their respective divs.
My code isn't working here is what I tried
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", false);
} else {
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", true);
}
});
});
<form action="/ali_store/order/place" method="POST">
<div class="collapse in" id="ali_store">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="1" checked /> Use This Address
<div id="add_1_ali_store">
<br /> asd
<br /> asd,
<br /> xcv
<br /> sdf
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="0" /> Use This Address
<div id="add_0_ali_store">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 186,145.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali2/order/place" method="POST">
<div class="collapse in" id="ali2">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="1" checked /> Use This Address
<div id="add_1_ali2">
<br /> asd
<br /> asd
<br /> asd
<br /> asd
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="0" /> Use This Address
<div id="add_0_ali2">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,331.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali3/order/place" method="POST">
<div class="collapse in" id="ali3">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="1" checked /> Use This Address
<div id="add_1_ali3">
<br /> dsa
<br /> dsa
<br /> dsa
<br /> dsa
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="0" /> Use This Address
<div id="add_0_ali3">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,500.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
I want that if I change the radio button and it has value '0' then its input fields get disabled only else enabled.
You can write code like
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input.secondary").prop("disabled", false);
} else {
$("#add_0_" + id).find("input.secondary").prop("disabled", true);
}
});
});
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>
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>
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.