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>
Related
I'm trying to get the following code to work but it doesn't:
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", function () {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});
What this says is: for each input and select in my form, add an event listener that listens for the "invalid" state (fired upon submitting the form if any of the inputs or selects are invalid). The event listener will scroll the input or select into view at the center of the page in a smooth animation.
But it scrolls neither to the center of the page nor smoothly. My inputs and selects get scrolled to the top of the page instantly.
Adding a console log to the event listener tells me the event listener is responding and 'this' does refer to the right input or select:
console.log('this =', this);
So why is this not working for me?
EDIT:
Here is the HTML portion:
<section class="clearfix form-section">
<div class="container">
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-xs-12 intro">
Holland and Barnes would be very pleased to get your feedback about our services
</div>
</div>
<form class="feedback">
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="firstName">First Name *</label>
<input type="text" class="form-control" id="firstName" name="firstName" required>
<p class="help-block">Please enter your first name.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="lastName">Last Name *</label>
<input type="text" class="form-control" id="lastName" name="lastName" required>
<p class="help-block">Please enter your last name.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="email">Email *</label>
<input type="email" class="form-control" id="email" name="email" required>
<p class="help-block">Please enter your email address.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="country">Country *</label>
<select class="form-control" id="country" name="country" required></select>
<p class="help-block">Please enter your country.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">What brings you to Calgary? * <input class="hidden-radio-button" id="reasonForVisiting_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="vacation" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Vacation
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="business" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Business
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="liveHere" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Live Here
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="reasonForVisiting_other" group="reasonForVisiting" onclick="reasonForVisiting_checked(); reasonForVisiting_otherChecked()">Other
<input type="text" class="form-control" style="display: none;" id="reasonForVisiting_otherDetails" name="reasonForVisiting" placeholder="Please provide your reason for visiting Calgary.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">How did you hear about us? * <input class="hidden-radio-button" id="hearAboutUs_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="searchEngine" group="hearAboutUs" onclick="hearAboutUs_checked()">Search Engine
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="friends" group="hearAboutUs" onclick="hearAboutUs_checked()">Friends
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="magazines" group="hearAboutUs" onclick="hearAboutUs_checked()">Magazines
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="newspapers" group="hearAboutUs" onclick="hearAboutUs_checked()">Newspapers
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="billboards" group="hearAboutUs" onclick="hearAboutUs_checked()">Billboards
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="television" group="hearAboutUs" onclick="hearAboutUs_checked()">Television
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="hearAboutUs_other" group="hearAboutUs" onclick="hearAboutUs_checked(); hearAboutUs_otherChecked()">Other
</div>
<div class="col-sm-6 col-xs-12">
<input type="text" class="form-control" style="display: none;" id="hearAboutUs_otherDetails" name="hearAboutUs" placeholder="Please provide how you heard about us.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label>Please give us a rating. *</label>
<hr style="margin-top: 5px;" />
<div class="form-group col-sm-6 col-xs-12">
Rate our service. <input class="hidden-radio-button" id="service_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="service-star-1" class="star" onclick="starClicked('service', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="service-star-2" class="star" onclick="starClicked('service', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="service-star-3" class="star" onclick="starClicked('service', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="service-star-4" class="star" onclick="starClicked('service', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="service-star-5" class="star" onclick="starClicked('service', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="serviceRating" name="serviceRating" value=0>
</div>
</div>
<div class="form-group col-sm-6 col-xs-12">
Rate our site. <input class="hidden-radio-button" id="site_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="site-star-1" class="star" onclick="starClicked('site', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="site-star-2" class="star" onclick="starClicked('site', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="site-star-3" class="star" onclick="starClicked('site', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="site-star-4" class="star" onclick="starClicked('site', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="site-star-5" class="star" onclick="starClicked('site', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="siteRating" name="siteRating" value=0>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label for="comments">Your comments would be most appreciated. Thank you! *</label>
<textarea class="form-control comments" id="comments" name="comments" rows="10" required></textarea>
</div>
</div>
<input type="hidden" class="form-control" id="recipientEmail" value="#Model.Content.Email" />
<div class="form-group">
<button type="submit" class="btn btn-primary pull-left submit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing" id="submit">Submit</button>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 submissionError">
There was a problem submitting your feedback. Please try again later.
</div>
</div>
</form>
</div>
</div>
</section>
Here is a JSFiddle demonstrating the problem:
https://jsfiddle.net/gib65/j1ar87yq/
Try using an arrow function so that this is bound to your callback correctly.
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", () => {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});
Actually am making a online quiz func in my website here is my quiz code
<form method="POST">
<div id="questions">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question <label id="question_no" value='1'>1</label></label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success mb-4">Submit</button> <button id="add_more" class="btn btn-primary mb-4">Add More</button>
</form>
actually i want that when add more button is clicked then the same code in div with id questions is append next to this div and also question no will be increased automatically
i tried diff method but none of them works prefectly and help
Thank You ...
~~~~~~~UPDATE~~~~~~~~
here is what i do simply wrote this code
<!--TEMPLATE-->
<script type="text/javascript" id="questions_template">
<div id="questions_template1">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question 1</label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
</script>
<!--END OF TEMPLATE-->
and after that here is my jquery code
$("#add_more").click(function(e){
e.preventDefault();
$("#questions").append($("#questions_template").html());
})
First, add div for your template question, this is the one you will duplicate.
<form method="POST">
<div class="question">
.....
</div>
<button>submit</button>
<button>add_more</button>
</form>
Now use jquery to duplicate this 'question' and update it with correct id.
$("#add_more").click(function(e) {
e.preventDefault();
var id = $(".question").length;
id++;
var $newQuestion = $("form").find(".question:last").clone();
$newQuestion.find("label").attr("value", id);
$newQuestion.find("#question_no").text(id);
$newQuestion.insertBefore($(".btn-success"));
})
Jsfiddle : https://jsfiddle.net/xpvt214o/411294/
I have this fiddle https://jsfiddle.net/74mh06v9/ where I am stuck on how to repeat the form group?
This code I am using is as below;
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
});
});
My HTML is
<div class="col-md-12" class="repeatable">
<h4>Invoice Details </h4>
<table>
//various form groups here to repeat
</table>
<button class="repeat">Add Another</button>
First of all your html ws wrong inside table there should be td,tr etc but u placed div's i dont kno why. i hv corrected it
its working now.
HTML:
<div class="col-md-12" class="repeatable">
<div class="base-group" style="display:none;">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
<div id="main-form">
<div class="child-group">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="repeat">Add Another</button>
JS:
$(function() {
$(".repeat").on('click', function(e) {
var c = $('.base-group').clone();
c.removeClass('base-group').css('display','block').addClass("child-group");
$("#main-form").append(c);
});
});
fiddle https://jsfiddle.net/riazxrazor/74mh06v9/9/
if you want to try
Firslty, there is no need of table(no rows and columns), and replace table to div and add a class frm to it, then make a clone and append it.
$(function() {
$(".repeat").on('click', function(e) {
var frm =$('.frm:first').clone();
frm.find('input').val('');
$('.frm:last').after(frm);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 repeatable">
<div class="frm">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
<button class="repeat">Add Another</button>
Slight changes to the answer above:
<script>
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var clonedForm = $(".frm").clone();
clonedForm.appendTo("#table");
frm.find('input').val('');
});
});
</script>
<div class="col-md-12" class="repeatable">
<table id ="table">
<div class="frm">
<h4>Invoice Details </h4>
<div class="col-sm-3">
<div class="form-group">
<label>Service User</label>
<div class="input-group">
<input name="service_user" id="service_user" class="form-control" type="text"></div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Hours</label>
<div class="input-group">
<input name="total_hours" id="total_hours" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Rate</label>
<div class="input-group">
<input name="rate" id="rate" class="form-control" type="text">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Sub Total</label>
<div class="input-group">
<input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</table>
<button class="repeat">Add Another</button>
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 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>