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.
Related
So I have two fields, a regular input and a dropdown. I want these two fields to be combined into a third field (which is to create tags). In the third field, the tags can be removed by pressing an X, but nothing can be entered in there otherwise.
I've seen this done somewhere, but for the life of me, I can't remember where or what this process is called so I can't find the plugin.
This is the furthest I can get. I feel like it is a jQuery plugin which can do it, but, I'm not sure.
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<select id="lname">
<option value="Bryant">Bryant</option>
<option value="oneal">O'Neal</option>
<option value="Jordan">Jordan</option>
<option value="Pippen">Pippen</option>
</select><br><br>
<input type="submit" value="Combine">
<br><br>
<label for="fullname">Full name tags:</label>
<input type="text" id="fullname" name="fullname" disabled><br><br>
</form>
Try this
function myFunction(){
var fname = $('#fname').val();
var lname = $('#lname').val();
$('#fullname').val(fname + " " + lname);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<select id="lname" >
<option value="Bryant">Bryant</option>
<option value="oneal">O'Neal</option>
<option value="Jordan">Jordan</option>
<option value="Pippen">Pippen</option>
</select><br><br>
<input type="button" value="Combine" onclick="myFunction()">
<br><br>
<label for="fullname">Full name tags:</label>
<input type="text" id="fullname" name="fullname" disabled><br><br>
</form>
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 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 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/
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.