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/
Related
can someone help me please ?
i have a hidden input field with value. for example 3.
based on that value (3) i want to automatically generate 3 input fields like this.
<html>
<head>
</head>
<body>
<form action="#">
<input type="text" name="guest" value="3" hidden>
<div id="container">
<!-- input field 1 -->
<label for="title">Title</label>
<select name="title" class="form-control">
<option value="">Select</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select><br>
<label for="first name">First Name</label>
<input type="text" name="first_name" class="form-control"><br>
<label for="last name">Last Name</label>
<input type="text" name="last_name" class="form-control">
<br>
<br>
<!-- input field 2 -->
<label for="title">Title</label>
<select name="title" class="form-control">
<option value="">Select</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select><br>
<label for="first name">First Name</label>
<input type="text" name="first_name" class="form-control"><br>
<label for="last name">Last Name</label>
<input type="text" name="last_name" class="form-control">
<br>
<br>
<!-- input field 3 -->
<label for="title">Title</label>
<select name="title" class="form-control">
<option value="">Select</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select><br>
<label for="first name">First Name</label>
<input type="text" name="first_name" class="form-control"><br>
<label for="last name">Last Name</label>
<input type="text" name="last_name" class="form-control">
</div>
</form>
</body>
</html>
i have try the dynamic input with button, but in my case i don't want to use a button to add a new input fields.
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">
I have a form and it has several buttons. When clicking one of this button, this form should remove and load another form. I'm trying to do this using ng-include method. I have done a similar thing before and got it to work. But I cannot understand why this is not working.
I have given the 2nd form inside script tag and when clicking the above mentioned button it calls for this form. But it does not load.
I have removed the existing form using ng-if method in the controller.
My html code
<div class="container">
<form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app" novalidate>
<div>
<section class="content-header">
<h1>
Fill your medical information
<!--<small>Optional description</small>-->
</h1>
</section>
<!-- Main content -->
<section class="content">
<div>
<div class="box">
<?php
echo form_open('info/addInfo');
?>
<div class="box-body">
<div>
<div class="col-lg-12">
<div style="margin-top: 15px;width: 100%;">
<!--first block-->
<div style="float: left;width: 33%;height: 100%" ng-show="table_remove">
<div class="form-group">
<label class="info_ques_text">Age</label>
<div class="input-group">
<input class='input' type="number" class="form-control" name="Age" id="Age" ng-model="data.age" placeholder="Enter your age" required><br>
<span class="error_msg" ng-show="submitted && info_form.Age.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Sex</label>
<div class="input-group">
<select class='input' name="Sex" id="Sex" ng-model="data.sex" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Sex.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Blood Pressure</label>
<div class="input-group">
<input class='input' type="number" class="form-control" name="Pressure" id="Pressure" ng-model="data.blood_pressure" placeholder="Enter your blood pressure" required><br>
<span class="error_msg" ng-show="submitted && info_form.Pressure.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Blood Sugar</label>
<div class="input-group">
<select class='input' name="Sugar" id="Sugar" ng-model="data.sugar" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="PF">Low</option>
<option value="NPF">Normal</option>
<option value="C">High</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Sugar.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Maximum Heart Rate</label>
<div class="input-group">
<input class='input' type="number" name="Heart" id="Heart" class="form-control" ng-model="data.heart_rate" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--second block-->
<div class="form-group">
<label class="info_ques_text">Slope The Peak Exercise ST Segment</label>
<div class="input-group">
<input class='input' type="number" name="Slope" id="Slope" class="form-control" ng-model="data.slope" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Slope.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Number of major vessels</label>
<div class="input-group">
<select class='input' name="Vessel" id="Vessel" ng-model="data.vessels" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Vessel.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Smoking</label>
<div class="input-group">
<select class='input' name="Smoke" id="Smoke" ng-model="data.smoking" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes - Heavy Smoker</option>
<option value="2">Yes - Light Smoker</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Smoke.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Exercising</label>
<div class="input-group">
<select class='input' name="Exercise" id="Exercise" ng-model="data.exercise" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Exercise.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--third block-->
<div style="float: left;width: 34%;height: 100%" ng-show="table_remove">
<div class="form-group">
<label class="info_ques_text">Consuming Alcohol</label>
<div class="input-group">
<select class='input' name="Alcohol" id="Alcohol" ng-model="data.alcohol" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes - Heavy Consumer</option>
<option value="2">Yes - Light Consumer</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Alcohol.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
<input class="input" type="hidden" name="Email" id="Email" class="form-control" ng-model="data.email" value="<?php echo($email); ?>"><br>
<!-- <div style="margin-left: 10px;"><button1><a href="" ng-click="submitted = true;
submit(data)">Submit</a></button1></div>
-->
</div>
</div>
</div>
</div>
</div>
<div class="box-footer" ng-show="table_remove">
<button href="" type="submit" ng-click="submitted = true;
train(data);" class="btn btn-primary">Train data</button>
<button href="" type="submit" ng-click="submitted = true;
submit(data);
template = 'addeditview'" class="btn btn-primary">Submit</button>
<a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
</div>
<?php
echo form_close();
?>
</div>
</section><!-- /.content -->
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="addeditview">
<form class="form-horizontal" role="form" id="prediction_form" name="prediction_form" ng-controller="infoCtrl" ng-app="app" ng-submit="submit(data)" novalidate>
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
</form>
</script>
</div>
</div>
</body>
</div>
The src attribute has to point to a valid html file, taking into account the root folder as www (or at least where you're supposed to) As such:
<ng-include src="template.html"></ng-include>
I would suggest not to discredit a very respected and solid framework only because you don't understand the documentation :)
When you fill in the form and click the "Start Earning" button the button disappears!!! It still goes through and goes to the next page so that much works but I have no idea why the button disappears.... Any ideas???
<?php /*** Form begins here ***/ ?>
<form method="post" action="redirect.php" name="home_sub" accept-charset="utf-8" id="home_sub">
<div class="form_fields">
<p><label for="first_name" class="over">First Name:</label>
<input name="first_name" id="first_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="last_name" class="over">Last Name:</label>
<input name="last_name" id="last_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="email" class="over">E-mail:</label>
<input name="subscriber_email" id="email" class="text_input xverify_email required" type="text" value="" onClick="$('#optinsection').show()" autocomplete="off" /></p>
<p><label for="custom_Address" class="over">Address:</label>
<input name="custom_Address" type="text" id="custom_Address" value="" class="text_input" autocomplete="off" /></p>
<p><label for="custom_City" class="over">City:</label>
<input name="custom_City" type="text" id="custom_City" value="" class="text_input" autocomplete="off" /></p>
<p><label class="hidden">Select State</label>
<select name="custom_State" id="custom_State" class="select_input">
<option value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="WY">Wyoming</option>
</select></p>
<p><label for="custom_ZipCode" class="over">Zip code:</label>
<input name="custom_ZipCode" type="text" id="custom_ZipCode" class="text_input required" value="" maxlength="5" autocomplete="off" /></p>
<p><label class="hidden">Birth Month</label>
<select name="custom_DOBMonth" id="custom_DOBMonth" class="select_input select_month">
<option value="">Birth Month</option>
<option value="01">January</option>
<option value="02">Febuary</option>
</select>
<label class="hidden">Birth Day</label>
<select name="custom_DOBDay" id="custom_DOBDay" class="select_input select_day">
<option value="">Day</option>
<?php for($dy=1; $dy<32; $dy++){
$sdy = $dy < 10? '0'.$dy: $dy;
echo '<option value="'.$sdy.'">'.$dy.'</option>';
} ?>
</select>
<label class="hidden">Birth Year</label>
<select name="custom_DOB_Year" id="custom_DOB_Year" class="select_input select_year">
<option value="">Year</option>
<?php for($yr=2000; $yr>1910; $yr--){
echo '<option value="'.$yr.'">'.$yr.'</option>';
} ?>
</select></p>
<p><label class="hidden">Select Gender</label>
<select name="custom_Gender" id="custom_Gender" class="select_input">
<option value="">Select Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select></p>
<p><label for="custom_Phone" class="over">Phone: (xxx-xxx-xxxx)</label>
<input type="text" name="custom_Phone" id="custom_Phone" class="text_input" value="" /></p>
<span id="optinsection">
<br />
<input type="checkbox" name="chk_allinbox" id="chk_allinbox" class="required" value="1" />
By checking this box, you agree to our Terms of Service and Privacy Policy and agree to receive daily newsletters and promotions via email from BestHotSurveys.com.
<br /><br />
</div>
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" />
</div>
</form>
<?php /*** Form ends here ***/ ?>
From the site you provided after submit button is clicked the submit button wrapper div form_button is stylized by a background-image style.
Before Button Click :
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;">
</div>
After button click with validation pass :
<div class="form_button" style="background-image: url(http://www.besthotsurveys.com/images/form_bottom_sending.gif);">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" disabled="disabled">
</div>
So look onto your TMG_CheckForClick for removing that style or check the availability of that image.
Currently for the image access it throws
The requested URL /images/form_bottom_sending.gif was not found on
this server.
I am trying to sumbit a form in django that has a file on it. The form is the following and is placed in the body of a modal dialog
<form action="{%url 'customer-upload-xray' customer_id=customer_id%}" method="post" id="xrayform">
{%csrf_token%}
<div class="form-group date">
<label for="id_date">Date</label>
<input class="form-control input-sm datepicker input-append date" id="id_date" name="date" readonly="" type="text">
</div>
<div class="form-group">
<label for="id_type">Type</label>
<select class="form-control input-sm" id="id_type" name="type">
<option value="" selected="selected">---------</option>
<option value="Observation">Observation</option>
<option value="Initial">Initial</option>
<option value="Progress">Progress</option>
<option value="Final">Final</option>
<option value="Post Treatment">Post Treatment</option>
</select>
</div>
<div class="form-group">
<label for="id_desc">Desc</label>
<select class="form-control input-sm" id="id_desc" name="desc">
<option value="PA Ceph">PA Ceph</option>
<option value="Lateral Ceph">Lateral Ceph</option>
<option value="Panoramic">Panoramic</option>
</select>
</div>
<div class="form-group">
<label for="id_image1">Image1</label>
<input id="id_image1" name="image1" type="file">
</div>
<div class="form-group">
<label for="id_image2">Image2</label>
<input id="id_image2" name="image2" type="file">
</div>
\
</form>
I have a button with id = upload and my js code looks as the following
$("#upload").on('click', function(){
form = $("#xrayform");
form.submit();
});
But the request.FILES is an empty dict. How is it not passing the files on the dictionary when posting?
EDIT: How about putting some enctype on the form you would say right?? Damn me!!! Please the moderators delete the question if they don't want to keep it