I would like to create a zipcode validator for a delivery service website.
(Almost like a promo code field where only the correct code will work.)
It is an HTML form on the client-side where the user can type in their zipcode and check if delivery is available in their area.
There will be 5 chosen zipcodes where delivery is available.
This is what I've tried so far with one zipcode but it hasn't been showing any error messages.
<form>
<div class="form-group">
<input class="form-control" required
data-msg="Sorry we do not deliver to you yet."
data-label="Zipcode"
type="number" name="zipcode"
placeholder="Enter your zipcode or address"
pattern="11111" required
/>
</input>
</div>
<div class="btn-wrapper mt-6">
<input type="submit" value="Submit">
</div>
</form>
-If the user enters and submits the correct zip code it should take them to the ordering page.
-If the zip code is not one of the chosen zipcodes, an error message should appear below the form "Sorry we do not deliver to you. Subscribe here to be notified when delivery will be available to you." (This error message would require javascript)
-Chosen zipcodes (any number will work for now). ex: 11111, 22222, 33333, 44444, 55555
currently input pattern not supported for number type but it available for text, search, url, tel, email, and password
<p>validate any 5 digit</p>
<form>
<input pattern="[0-9]{5}" required />
<input type="submit" value="Submit">
</form>
<p>validate only 11111, 22222, 33333, 44444, 55555</p>
<form>
<!-- or: 1{5}|2{5}|3{5}|4{5}|5{5} -->
<input pattern="11111|22222|33333|44444|55555" required />
<input type="submit" value="Submit">
</form>
Related
I have a task to add a password, username and password to the Saved Passwords in Firefox, so that the new account can log in and work on the local site, without additional password entries.
What kind of script is needed, import is inappropriate here, I can copy local.json and key.bd with the same success
You can solve this problem by creating a form tag:
<form>
</form>
You can then create password and email fields:
<form>
<input type="email">
<input type="password">
</form>
And if you add a button with the type "submit":
<form>
<input type="email">
<input type="password">
<button type="submit">
</form>
When the user submits the form (by clicking the type="submit" button) they will be asked if they want to save their email and password in the browser. If they say yes, it will be saved.
I have 2 form in my website.
If I saved the email and password and other form have input password,
It will autofill email on last one input box (type=text)
I try to add autocomplete=off autocomplete=contact_no name=contact_no
but It doesn't work.
<form>
login form
<br>
<label> email<input type="text" /> </label>
<label> password <input type="password"/> </label>
<button type="submit"> submit</button>
</form>
<form>
member update form
<br>
<label> readonly email <input type="text"readonly value="abc#google.com"/> </label>
<label> contact_no <input type="text" name="contact_no" autocomplete="off"/> </label>
<label> password <input type="password" name="password"/> </label>
<button type="submit"> submit</button>
</form>
CodePen
https://upload.cc/i1/2019/05/26/jbBSxa.gif
https://upload.cc/i1/2019/05/26/lQmksB.png
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
In most modern browsers, setting autocomplete to "off" will not prevent a password manager >from asking the user if they would like to save username and password information, or from >automatically filling in those values in a site's login form.
To help chrome understand the form input better, you can try using autocomplete="tel" instead for the contact no
I have one input field in which user can enter email as well as 10 digit phone number if any of this condition is fulfill i want to enable continue button . I am able to enable button when user type email but I fail to enable the button when user type 10 digit mobile number
here is my code
https://stackblitz.com/edit/angular-p5knn6?file=src%2Fapp%2Flogin-component%2Flogin-component.component.html
<div class="login_div">
<form #loginForm="ngForm">
<input type="text" name="email"
autocomplete="off"
placeholder="Enter the Email or Number"
[(ngModel)]="userenterValue"
required
pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$">
<input type="submit" value="Continue"
class="btn"
[class.disbled]="!loginForm.valid"
[disabled]="!loginForm.valid">
</form>
</div>
Just use the pattern like this:
pattern="^(\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+)$|^(\d{10})$"
This question already has an answer here:
How to change the textbox value from checkbox
(1 answer)
Closed 6 years ago.
I have built an order form in which the user would enter in a company name, last name, email and an address and an optional checkbox for shipping priced at $19.99. I downloaded the paypal payment form module for my dreamweaver cs5 program which converts the form into a paypal form.
The nice thing about this program is that it automatically creates a mysql database with all the input fields when a person clicks the "pay now" button It also generates the files automatically in a folder called "PPPaymentForm" which i then upload in the root of my site and gives me a backend as well so i can monitor all the payment transactions.
So back to my original issue, i need some way so that if a person decides to click the checkbox which is set at $19.99, that it will automatically add to the price which is set in an hidden input named "hdwppamount" where the value is set to $175.00. So therefor if the shipping option is clicked, the person would click the "Pay Now" button and would be redirected to the paypal payment page, with the new calculated price at $194.99.
I am not proficient with javascript or php, and tried many functions myself but nothing worked. Could someone help me with this please?
Thank You
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="firstname" required>
<input placeholder="Last Name" type="text" name="lastname" required>
<input placeholder="Email" type="email" name="email" required>
<input placeholder="Address" type="text" name="address" required>
<input type="checkbox" id="shipping" name='shipping' />$optional Shipping($19.99)
<button name="submit" type="submit">Pay Now</button>
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic 175 Plan">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="">
<input type="hidden" name="hdwemail" id="hdwemail" value="email+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
</form>
First, we detect when the shipping checkbox is changed, then we check to see if it is in a checked state. If it is in a checked state, we add the shipping cost to the hidden text box. We also need to reset the value if the user changes their mind about shipping so you need a basic IF ELSE condition on it.
Try this:
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
JSFiddle: https://jsfiddle.net/rdawkins/8qrm3mf1/14/
I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?