Jquery toggle and reset form elements - javascript

I need to show and hide some form elements according to a checkbox selection.
This is my HTML:
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
</div>
Here I want to display #address2 DIV if address_check check box checked and other wise it should be hide.
This how I tried it.
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
});
My problem is I want to reset the form elements inside address2 div when this is toggling down. Reset mean I want to make empty these elements.
Can anybody tell me how to do it?
Thank you.

Try doing:
$('#address2').find("input").val("");
$("#address2").find('select option:first').prop('selected',true);
Working fiddle

Try this:
var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
var isChecked = $(this).is(':checked');
isChecked ? address2.fadeIn() : address2.fadeOut();
if(!isChecked)
{
address2.find('input, textarea').val('');
address2.find('select').prop('selectedIndex',0);
}
});

The easiest way to do this is using:
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
});
});
</script>
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">select Name:</label>
<div class="col-xs-12 col-sm-9">
<select name="name" class="col-xs-12 col-sm-4" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>

Try this
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$('#address2').find("input").val("");
});

Related

Toggle visibility between DropDownList and TextBox in the given scenario?

In my project, I have two RadioButtons called UserTypeRadio. With that, I have a DropDownList and a TextBox. I want to toggle the visibility of the DropDownList and the TextBox depending on which RadioButton is selected.
RadioButton
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" onclick="radioButtonEmployeeSelected()" checked class="userSelection" /> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" onclick="radioButtonOtherUserSelected()" class="userSelection" /> Other User</label>
</div>
</div>
</div>
DropDownList
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
TextBox
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" hidden />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
jQuery Code
$('.userSelection').on('change', function () {
//alert($(this).val());
//if ($(this).val() === "Employee") {
$("#textBoxOtherUser").toggle();
$("#dropDownUserNames").toggle();
//}
});
I am trying to hide TextBoxOtherUser when Employee is selected from the RadioButton, and I am trying to hide DropDownUserNames when I click Other User option from the RadioButton.
The toggle() is performing as per expectation. However, on performing Inspect Element from the Browser, when Other User is selected from the RadioButton, I see that the DropDownList is not getting disbled. In fact, I see that when the Employee is not selected, style="display: inline-block;" is present in the code. On the other hand, when the Employee is selected, style="display: none;" is shown. In other words, on selecting Employee displays the DropDownList in the required UI. But when Employee is not selected, instead of getting disabled, the DropDownList is shown in the plain old block format.
What to do?
by using data attribute you can do this .. add data-user for employee and otheruser radio inputs and add data-show to the related select/textbox and you can then use the next code
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames" data-show="employee">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" data-show="otheruser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
Note: if you include your js code before including jquery you'll need to wrap your js code inside $(document).ready(function(){ // code here })
Finally if you need to hide the whole row you can simply cut/paste the data-show attribute to the parent instead of select or textbox
$('[name="UserTypeRadio"]').on('change' , function(){
var Thisvalue = $(this).attr('data-user');
$('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6 m-t-20">
<label class="fg-labels">Type of User</label><br />
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
</div>
<div class="col-sm-3">
<label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-t-20" data-show="employee">
<div class="input-group fg-float">
<div class="fg-line form-chose">
<label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
<select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6 m-t-20" data-show="otheruser">
<div class="input-group fg-float">
<div class="fg-line">
<label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
<input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" />
<span asp-validation-for="OtherUser" class="text-danger"></span>
</div>
</div>
</div>
by adding .filter(':checked').change(); at the end this mean run the change event for the checked radio on load

Angular JS : show div based on radio button selection

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="show_other=true">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="display=false">
<span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.
Any help would be great.
Thank You.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="option='other'">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="option='none'">
<span>None</span></label>
</div>
<div class="form-group" ng-show="option ==='other'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-show="option ==='other' || option === 'company'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
Following changes are done.
1) Clicked item is saved in 'option' variable.
2) Show the form field based on data in 'option' variable.
It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label>
<label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label>
<label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-hide="show_url">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>

Button click is not responding

<form class="cityForm form-horizontal form-label-right" action="" method="POST" novalidate>
<div class="form-group">
<div class="city col-md-4 col-sm-4 col-xs-12">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span> </label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-8 col-sm-8 col-xs-12">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span> </label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address"> </div>
</div>
</div>
<div class="multiCheck">
<input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point?
<br> </div>
</div>
<div class="form-group hide" id="cityFormExtend">
<div class="city col-md-4 col-sm-4 col-xs-12">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span> </label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-8 col-sm-8 col-xs-12">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span> </label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address"> </div>
</div>
</div>
<div class="multiBtn">
<button type="button" class="addBtn">Add another pickup location</button>
<button type="button" class="removeBtn">Remove this pickup location</button>
</div>
</div>
</form>
The above is my html form and it has got two form-group classes. The first one is always displayed as the browser opens and the second one appears only when the checkbox is checked. It is working fine up to here.
Now, I want the removeBtn to remove the new form created and addBtn to add another form.
Below is my JavaScript code:
$(document).ready(function() {
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityFormExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertBefore($pick);
}
if (!this.checked) {
$clone.remove();
}
}).on('click', '.addBtn', function() {
var $pick = $(this).parents('.form-group');
$clone = $pick.clone().insertBefore($pick);
}).on('click', '.removeBtn', function() {
var $pick = $(this).parents('.form-group');
$pick.remove();
})
});
use
<script>
$(document).on('click', '.addBtn', function(){
var $pick = $(this).parents('.form-group');
$clone = $pick.clone().insertBefore($pick);
});
$(document).on('click', '.removeBtn', function() {
var $pick = $(this).parents('.form-group');
$pick.remove();
});
</script>

Form submits even when i use prevent default on submit button click

what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>
You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...
Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.

Jquery javascript html label modify value

I want to hide a field and show it and also change the value of a variable depending on a checkbox value using jquery.
$(document).ready(function(){
$('#CompanyName').hide();
$('#inlineCheckbox1').click(function() {
var $this = $(this);
// $this will contain a reference to the checkbox
if ($this.is(':checked')) {
$('#CompanyName').show();
$("label[for='AdresseName']").text('Adresse Name');
} else {
$('#CompanyName').hide();
$("label[for='AdresseName']").text('Name');
}
});
});
it shows and hides the textfield fine, but the label text change does not work for me... it's like if the label change line of code is not being executed. What's going on? My HTML is this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="isCompany" class="col-sm-2 control-label">It's a company</label>
<div class="col-sm-10">
<input type="checkbox" id="inlineCheckbox1" value="option1">
</div>
</div>
<div class="form-group" id="CompanyName">
<label for="companyName" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="companyName" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="AdresseName" class="col-sm-2 control-label" id="AdresseNameNotCompnay">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="AdresseName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
</form>

Categories