Limiting HTML Text bar to Only one Entry of Specific Characters - html

I currently have the code:
<td><input name="miles" type="number"
min="0" max="900" size="5" onkeyup="this.value=this.value.replace(/[^0-9.]+/g,'')"/></td>
This(onkeyup="this.value=this.value.replace(/[^0-9.]+/g,'')) limits the user to only entering digits and periods. What I want to do, however, is make it so that the user can only enter one period, and after that, every other period will be deleted. Is this possible? Thank you for taking the time to read this post, and have a wonderful day!

To accept only one period for input, you have to make it clear, that the period should repeat once only.
So this one may work in your case:
^-?[0-9]\d*(\.\d+)?$
NOTE: You can check the details of every regex here.

Related

Is there any way to easily remove hidden inputs from an html form?

We have an assessment engine in which the questions contain form inputs (input, select, etc). In order to display the answer, we replicated the question exactly and display the correct answer. By default the answer is a hidden copy of the question, and we just intended to display it and set the value to the correct answer. There is no security issue because the quiz does not contain the information as to the correct answer until the user clicks to populate, and the server will not give the information until after a release day/time.
However, just having the inputs mirrored means that it looks like the quiz has double the number of inputs. Is there any way to flag inputs in a form to be ignored (ie, NOT SENT to the server?)
Otherwise, the easy way to do this seems to be to write two pages, one with only questions, and one with questions and answers.
<form method="post" action="grade">
What is 2+2?
<input id="q1_1">
<div class="answer">
<input id="a_1_1">
</div>
</form>
The CSS for answer contains display: none so at first, the answers are not displayed, and they can be dynamically made viewable by JavaScript.
Setting the disabled attribute on the input will omit it from the form post.
…disabled controls can not receive focus and are not submitted with the form…

HTML Input Time, where min is pm (late) and max is am (early)

I have an input box, with a type of "time". I want to have a late time (23:00pm) as a min value, and an early time (6:00am) as a max value - creating a range of 23pm - 6am. (ie. 11pm, 12pm, 1am, 2am, 3am, 4am, 5am, 6am).
I've tried using Javascript, although I want to use it as a last resort. I don't want the native component to show up with values that I don't want the user to select (for example, on mobile devices).
Setting the 'min' value to 00:00:00 and the 'max' value to "06:00:00" works as intended. It's when the min value is before midnight it becomes an issue.
I'd expect the min and max values to create a range, but that doesn't work as expected.
As stated in MDN docs:
Unlike many data types, time values have a periodic domain, meaning
that the values reach the highest possible value, then wrap back
around to the beginning again. For example, specifying a min of 14:00
and a max of 2:00 means that the permitted time values start at 2:00
PM, run through midnight to the next day, ending at 2:00 AM.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max
That said, it seems like this is not working properly in Chrome 76.0,
after a simple test with a min value greater than the max, all times fail the validation and the form just don't work.
I suggest https://timepicker.co/ since it will work cross browser.
input:invalid+.validity:after {
content: '✖';
}
input:valid+.validity:after {
content: '✓';
}
<form>
<label for="time1">3:00 to 6:00: </label>
<input type="time" min="3:00" max="6:00" name="time1" required>
<span class="validity"></span>
<hr>
<label for="time2">23:00 to 6:00: </label>
<input type="time" min="23:00" max="6:00" name="time2" required>
<span class="validity"></span>
</form>
I experimented a little using the :invalid CSS pseudo-class but I couldn't come up with anything.
Note that in Firefox (unlike Chrome), the browser does not include up and down arrows on any <input type="time"> form element, so the min and max attributes have no effect.
I note that Mozilla Developer Network says the following:
By default, <input type="time"> does not apply any validation to
entered values, other than the user agent's interface generally not
allowing you to enter anything other than a time value. This is
helpful (assuming the time input is fully supported by the user
agent), but you can't entirely rely on the value to be a proper time
string, since it might be an empty string (""), which is allowed. It's
also possible for the value to look roughly like a valid time but not
be correct, such as 25:05.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Validation

Paypal HTML Buttons - Upper limit to payments?

I'm having a HTML Paypal Button doing weird things.
It's on a site for Art buyers, and so the range of prices is pretty wild. There are 500$ artpieces to 4000$ art pieces.
When I try to buy the 500$ art piece, everything goes through no problem. But when I try to buy one at 2000$, I get a generic error message.
Sorry, we can’t complete your purchase at this time
Please return to the merchant and choose another way to pay.
Now I know it's not a failure of my form. It's the same form that is loaded every time; there's just the amount_1, item_name_1 and item_number_1 fields that change.
So it makes me think it's something with the price. Is there an upper limit to transactions in Sandbox mode? or is there an upper limit for Paypal HTML Buttons? I searched, and couldn't seem to find a straight answer to that.
EDIT: As asked by mplungjan, here is a basic try of the code. Only things that vary in both forms are price and name.
https://jsfiddle.net/fredy31/mrfn8e3b/5/
<input type="hidden" name="item_name_1" value="3000$ Product">
<input type="hidden" name="item_number_1" value="3000-product">
<input type="hidden" name="amount_1" value="3000">
And I've done a bit of research. Tried to find a response to this, but couldn't find a straight answer. What I've found is this: https://www.paypal-community.com/t5/About-Payments-Archive/What-is-the-transaction-amount-limit/td-p/616278 but it says the limit is 10k, and I'm still far from that.

HTML form: how to submit a value without showing it in the form?

I have an HTML form that sends a food dish. For example,
placeorder.com/order.php?id=STEAK
I want to add another value and send
placeorder.com/order.php?category=MEAT&id=STEAK
But, I don't want the user to have to select meat anywhere, since this has been already decided.
I tried to tinker with the form target and include it from there, but it didn't work.
Is there some "hidden text box" to write the category to so that it gets posted, or is there another way to do it?
Thanks in advance!
First, I just thought I'd mention that it's funny how the questions is phrased since you pretty much answered your own question:
Is there some "hidden text box"
Anyway, yes:
You can use type='hidden'
I assume that you are already using a GET form so I will just include the input part:
<input name='category' type='hidden' value='MEAT'>

How not to pass a specific form field?

I'm writing a landing page to test a business idea.
For testing purpose, I want to write a Credit card number field, to see if the customer is actually ready to buy the product.
As it is only a test, I don't want this value to be submitted.
Actually for security purposes I don't even want this value to be sent in the request.
Is a separate form enough?
<form> Sensitive info</form>
<form>Info I want
<input type="submit">
</form>
Yes, only the elements from the one form will be sent (whichever one was submitted).
Alternatively, you could:
mark the input as disabled (either from the start, or onsubmit)
remove the name attribute of the input
put another input later in the form with the same name (it will override the value of the first)
Yes, that will work.