Using Jquery/Javascript to delete elements based on dropdown options - javascript

I have a form that has a dropdown menu and a few text fields. I would like the form to delete the text areas if one of the options from the dropdown menu is selected. Thus, if the Credit Card option is selected, only then will these four fields appear.
Card Number
CVV Code
Expiry Date
Name on Card
If no option or Paypal is selected, the above 4 fields should be removed. The reason why it is insufficient to hide them is that they are required fields so hiding alone them will not allow users to submit the form.
Below is the full code. As the code is messy, I have tidied it up here: https://jsfiddle.net/lindychen/ow8zq1y6/28/
Thank you.
<label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
<div class="elementor-field elementor-select-wrapper ">
<select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value=""></option>
<option value="Paypal">Paypal</option>
<option value="Credit Card">Credit Card</option>
</select>
</div>
</div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
<label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Card Number" required="required" aria-required="true"> </div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
<label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="CVV Code" required="required" aria-required="true"> </div>
<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
<label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input" required="required" aria-required="true"> </div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_9 elementor-col-100 elementor-field-required">
<label for="form-field-field_9" class="elementor-field-label">Name on card</label><input size="1" type="text" name="form_fields[field_9]" id="form-field-field_9" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="NAME ON CARD" required="required" aria-required="true"> </div>

If I understood you correctly. You just want to show/hide Credit Card details with required fields on the basis of payment option selected. (e.g Credit Card)
Your jQuery selector hierarchic is not correct and there it is not working.
As you don't want to update your HTML/CSS. I have fixed your jQuery code. Working JSFIDDLE is here.
I have also updated the below snippet.
$(document).ready(function() {
$('#form-field-field_5').change(function() {
if ($('#form-field-field_5 option:selected').val().toString() === "Credit Card") {
// Show credit card details
$('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').show();
// Add required attribute
$('#form-field-field_6, #form-field-field_7, #form-field-field_8, #form-field-field_9').attr("required", "required");
} else {
// Hide credit card details
$('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').hide();
// remove required attribute
$('#form-field-field_6, #form-field-field_7, #form-field-field_8, #form-field-field_9').removeAttr("required");
}
});
});
.elementor-field-type-number.elementor-field-group.elementor-column.elementor-field-group-field_6.elementor-col-100.elementor-field-required,
.elementor-field-type-number.elementor-field-group.elementor-column.elementor-field-group-field_7.elementor-col-100.elementor-field-required,
.elementor-field-type-date.elementor-field-group.elementor-column.elementor-field-group-field_8.elementor-col-100.elementor-field-required,
.elementor-field-type-text.elementor-field-group.elementor-column.elementor-field-group-field_9.elementor-col-100.elementor-field-required {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_5 elementor-col-100 elementor-field-required">
<label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
<div class="elementor-field elementor-select-wrapper ">
<select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
<option value=""></option>
<option value="Paypal">Paypal</option>
<option value="Credit Card">Credit Card</option>
</select>
</div>
</div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
<label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Card Number" required="required"
aria-required="true"> </div>
<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
<label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="CVV Code" required="required"
aria-required="true"> </div>
<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
<label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input"
required="required" aria-required="true"> </div>
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_9 elementor-col-100 elementor-field-required">
<label for="form-field-field_9" class="elementor-field-label">Name on card</label><input size="1" type="text" name="form_fields[field_9]" id="form-field-field_9" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="NAME ON CARD"
required="required" aria-required="true"> </div>

There are many ways to solve this :
If other than credit card is selected hide the 4 fields + remove the required attribute form the input fields. $('.elementor-field').attr('required',false); This will allow the user to submit the form. (elementor-field I have taken this class just for example. You can add one separate class to the fields you want to hide )
Instead of putting the input fields in html file you generate them dynamically based on the selection.
Make two separate form and show and hide them based on the drop down selection

Write your code like this:
When you hide inputs remove Required ($("#cvv").removeAttr("required");)
When you show inputs add Required ($("#cvv").attr("required",true);)
$(function(){
$("#selectState").on("change",function(){
if (this.value==="show"){
$("div#inputs").show();
$("#cvv").attr("required",true);
$("#cardno").attr("required",true);
}else{
$("#cvv").removeAttr("required");
$("#cardno").removeAttr("required");
$("div#inputs").hide();
}
})
$("#theForm").on("submit", function(){
console.log("Submited");
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="theForm">
<div>
<select id="selectState">
<option value="show">
Show
</option>
<option value="hide">
Hide
</option>
</select>
<div id="inputs">
<br/>
<input id="cvv" name="cvv" type="text" required/>
<br/>
<input id="cardno" name="cardno" type="text" required/>
<br/>
<input id="date" name="date" type="text" />
</div>
<br/>
<input type="submit" value="Submit"/>
</div>
</form>
</body>
</html>

Related

Angularjs enable and disable all textboxes when i empty one

I am beginner in web development and I want to learn more about how I can do controls on my inputs and select.
I have one select and four input.
I want to disable all other input and the select if I select an option or I enter a text in my input
Sorry for my English, can you help me with the AngularJS part, it's important I want to do it with AngularJS.
When the other inputs of selects are disabled I need to display a message for explain why it's impossible to use other input or select
I don't know how I can do, but I think I need to use ng-model , ng-disabled, ng-change, maybe ng-blur and ng-focus
<form>
<div class="form-group">
<label for="Select1">Choix</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>choix 1</option>
<option>choix 2</option>
<option>choix 3</option>
<option>choix 4</option>
<option>choix 5</option>
</select>
</div>
<div class="form-group">
<label for="Input1">Choix A</label>
<input type="text" class="form-control" id="Input1" placeholder="Choix A">
</div>
<div class="form-group">
<label for="Input2">Choix B</label>
<input type="text" class="form-control" id="Input2" placeholder="Choix B">
</div>
<div class="form-group">
<label for="Input3">Choix C</label>
<input type="text" class="form-control" id="Input3" placeholder="Choix C">
</div>
<div class="form-group">
<label for="Input4">Choix D</label>
<input type="text" class="form-control" id="Input4" placeholder="Choix D">
</div>
</form>
Thanks for your future help .
You can use ng-model in selectedChoix to get the value of selected option and ng-disabled if there have no selectedChoix.
Choix
choix 1
choix 2
choix 3
choix 4
choix 5
<div class="form-group">
<label for="Input1">Choix A</label>
<input type="text" class="form-control" id="Input1" placeholder="Choix A" ng-disabled="!selectedChoix">
</div>
<div class="form-group">
<label for="Input2">Choix B</label>
<input type="text" class="form-control" id="Input2" placeholder="Choix B" ng-disabled="!selectedChoix">
</div>
<div class="form-group">
<label for="Input3">Choix C</label>
<input type="text" class="form-control" id="Input3" placeholder="Choix C" ng-disabled="!selectedChoix">
</div>
<div class="form-group">
<label for="Choix D">Email address</label>
<input type="text" class="form-control" id="Input4" placeholder="Choix D" ng-disabled="!selectedChoix">
</div>
This will automatically disabled other input fields until select any option.When select a option then other input fields will enable to write.
you can write your message anywhere until select any option or can use tooltip.

I am using angular 2 and I have created a form and Marked fields as required but still my got submitted

I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"
You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">

Showing HTML when JS says it should not be

I have a select that the shows the title property on load. I have some JS so that when certain options are selected different divs show. My issue is that the divs show on load and I don't want them to show until their correct option is selected.
function typePicker() {
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if (sel.value == "aps") {
aps.style.display = 'block';
} else {
aps.style.display = 'none';
}
if (sel.value == "cables") {
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML = cables; // This line will be changed soon to the style above in process of doing this to all.
} else {
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div>
<!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div>
<!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div>
<!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands">
</div>
<!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div>
<!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div>
<!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br>
<!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div>
<!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div>
<!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>
I can not get the snippet to work at all when you select another option. The only one there is code for in the snippet is for the aps and cables ones. Code works file on my server and is good enough for this snippet I believe. The main issue of the aps div showing upon load is the problem. How can I make it not show on load?
If additional code or info is needed please ask away.
I implemented what your question is asking for in CSS.
#aps {
display: none;
}
This will hide you div with the ID of 'aps' by default, on load. You can then modify the style to display it when you need it.
function typePicker(){
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if(sel.value=="aps"){
aps.style.display = 'block';
}else{
aps.style.display = 'none';
}
if(sel.value=="cables"){
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML=cables; // This line will be changed soon to the style above in process of doing this to all.
}else{
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
#aps {
display: none;
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div> <!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div> <!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div> <!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" >
</div> <!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div> <!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div> <!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br><!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div><!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div><!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>

How can i write the validation rule(required) for the select dropdown using Jquery Validation Plugin

I have a set of html5 fields inside a registration form tags in the code below.The inbuilt jquery plugin called validation.js is working fine with all the html fields which doesnt have any other jquery function defined on the html element tag's "id" attribute. In validate.js , the jquery validation rules: and messages: are customised with respect to html element's "name" attribute.My problem is jquery validations are not working on those html element tags whose id is used for defining other functions
For eg :
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option id="S" value="user1">user1</option>
<option id="T" value="user2">user2</option>
</select>
In the above code snippet you can see the usertype . when the usertype is selected there is a jquery which works onChange event with respect to the id="usertype".But my requirement is to do the validation that,the user must mandatorily select the usertype with the jquery validation plugin as well with the other jquery function .How to solve this? How can i write the validation rule for the select dropdown (required).
<div class="form-group">
<input type="email" class="form-control input-lg" name="uname" placeholder="email address" id="uname" onBlur="checkAvailability()">
<span id="user-availability-status"></span>
<p><img src="loading-small.gif" id="loaderIcon" style="display:none" /></p>
<div id ="errors">
</div>
</div>
<div class="form-group">
<input class="form-control input-lg" name="password" id="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control input-lg" name="password2" placeholder="Re-enter password" type="password">
</div>
<!--<div class="form-group">
<input type="password" class="form-control input-lg" name="cfmPassword" placeholder="Retype above password" id="cfmPassword">
<span id="confirm-password-status"></span>
</div>-->
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
</select>
<div id ="errors">
</div>
</div>
<p> </p>
<!--Student Section Form BEGIN-->
<div id="user1">
<div class="form-group" >
<input type="text" align="center" class="form-control input-lg" name="user1_first_name" placeholder="First Name" id="firstname">
</div>
<div class="form-group">
<input type="text" align="center" class="form-control input-lg" name="user1_last_name" placeholder="Last Name" id="lastname">
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="female"/> Female
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>

How to clear user selected values with a reset button

I need help with a reset button that will clear all the values selected or entered by the user. My code example is below. I have used JS before to reset all the values from a form but in this case i only need to clear a section of the form. My code is below: So each Fieldset has either text box or drop down.
<div class="column">
<p class="label item-information-fields">New Item</p>
<div class="item-information-fields">
<fieldset class="input-section">
<label for="tItemNickname"><span class="required">*</span>Item Name</label>
<input type="text" class="input" name="tItemNickname" id="tItemNickname" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="sItemType"><span class="required">*</span>Item Type</label>
<select name="sItemType" id="sItemType">
<option value="">Select</option>
<option value="1">Cash/Certificate</option>
<option value="2">Jewelry</option>
<option value="3">Clothing/Home Products</option>
<option value="4">Arts/Crafts</option>
<option value="5">Media, Music/Video</option>
<option value="6">Electronics</option>
<option value="7">Computers</option>
<option value="8">Collectibles</option>
<option value="9">Sports Equipment</option>
<option value="10">Liquor/Wine</option>
<option value="11">Animals</option>
<option value="12">Document Reconstruction</option>
<option value="13">Firearm</option>
<option value="14">Hazardous Material</option>
<option value="16">Event Tickets</option>
<option value="15">Other</option>
</select>
</fieldset>
<fieldset class="input-section hide" id="otherItemType">
<label for="tOtherItem"><span class="required">*</span>Other Item Type</label>
<input type="text" class="input" name="tOtherItem" id="tOtherItem" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="tItemDescription"><span class="required">*</span>Item Description</label>
<textarea class="textarea counter" name="tItemDescription" id="tItemDescription" maxlength="120"></textarea>
</fieldset>
<fieldset class="input-section input-section-short">
<label for="tPurchaseDate"><span class="required">*</span>Purchase Date (mm/dd/yyyy)</label>
<input class="input hasDatePicker enable-sundays" name="tPurchaseDate" id="tPurchaseDate" type="text" />
</fieldset>
<p class="note">If there was no purchase date, use the date the item was shipped.</p>
<fieldset class="input-section borders">
<label for="tAmountRequested"><span class="required">*</span>Amount Requested</label>
<span class="dollarWrap">
<span class="input-dollar-sign">$</span>
<input class="input" name="tAmountRequested" id="tAmountRequested" type="text" />
</span>
</fieldset>
// Button to clear the form.
<input type="reset" value="Reset" />
Or something like this:
$(function(){
$("#ClearItems").click(function(){
$("#myForm")[0].reset();
});
});
Working fiddle: http://jsfiddle.net/oqcqwyy4/

Categories

Resources