<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="show_other=true">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="display=false">
<span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.
Any help would be great.
Thank You.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="option='other'">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="option='none'">
<span>None</span></label>
</div>
<div class="form-group" ng-show="option ==='other'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-show="option ==='other' || option === 'company'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
Following changes are done.
1) Clicked item is saved in 'option' variable.
2) Show the form field based on data in 'option' variable.
It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label>
<label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label>
<label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-hide="show_url">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
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'
});
});
});
The requirement is the label should be on top of the input element whereas the group of each label and input element should be inline with one another.
I am able to achieve the same with the below piece of code when label text is a bit long. When the text of the label is short, the input element is appearing inline with the label.
Probably what I am doing is wrong. Please let me know a better way to handle it through bootstrap.
Thanks in advance.
Code -
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>
Try usingd-flex and flex-column classes. Tried on some Bootstrap 4 playgrounds, worked as you need it to work.
You can read more about it here.
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A1</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A2</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A3</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
</div>
</form>
In bootstrap 4 you can use d-inline-block class
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>
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 don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.
I have this HTML form and jQuery script:
$(document).ready(function() {
$('#accounttype').on('change', function() {
if (this.value == '1') {
$("#corporate").show();
} else if (this.value == '0') {
$("#individual").show();
} else {
$("#corporate").hide();
$("#individual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div id='corporate' class="form-group row">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
</div>
What I need to do is to display the forms according to the value selected in the dropdown using onchange but It doesn't seem to be working. Can someone point out what's wrong? Thanks!
Your Javascript code is not correct... First remove semi colons from the if statement then use the Javascript below.
Also your HTML code should be reformatted as below.
The id individual is now tied to one parent div which covers the div's for the individual data instead of having multiple divs with the same id.
$(document).ready(function() {
$("#corporate").hide();
$("#individual").hide();
$('#accounttype').on('change', function() {
if (this.value == '1') {
$("#individual").hide();
$("#corporate").show();
} else if (this.value == '0') {
$("#corporate").hide();
$("#individual").show();
} else {
$("#corporate").hide();
$("#individual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="">Select account type...</option>
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div id='corporate' class="form-group row">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div id='individual'>
<div class="form-group row">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div class="form-group row corporate">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
<script src="../resources/scripts/jquery2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".corporate").hide();
$(".individual").hide();
$("#accounttype").change(function () {
if ($(this).val() == 1) {
$(".corporate").show();
$(".individual").hide();
} else if ($(this).val() == 0) {
$(".individual").show();
$(".corporate").hide();
} else {
$(".corporate").hide();
$(".individual").hide();
}
});
});
</script>
Please try above code, hope this will help you,
Note:- there must be a unique id for each html element, for multiple you can use clsss
please don't forget to add jquery library above the js code