Still a beginner so treat me gently.
I'm building an html "app" that takes days you are off-home as input and calculates multiple outputs such as: Pack: 5 shirts, 5 underwears, 3 pairs of socks..
<form oninput="x.value=(d.value).toFixed(0)">
<p>I'm going to be off-home for <input type="number" id="d" value=""> days. </p>
<p>I'll pack:</p><output id="result" name="x" for="d">X</output> <p>shirts.</p>
<output id="result" name="x" for="d">X</output> <p>underwears.</p>
</form>
At the moment I manage to get one output working, but if I add the second output, it won't work. I have read the form/input/output documentary - it didn't open for me.
Question:
How can I print multiple outputs from one input?
and
how can I calculate different values for the output?
(For example input values is 5, and I want the number of socks to be (5/2).toFixed(0)
I would prefer a HTML-only solution, but if javascript is needed, help me to get going.
I hate to break it to you, but you're already using JavaScript :)
oninput="x.value=(d.value).toFixed(0)"
You also might want to reconsider using the "output" tag since it's not supported in IE:
Output tag
HTML is used to define the structure of the document, so you'll have to use JavaScript (or equivalent) to get the functionality you want.
Related
I'm aware that parsing numbers with pure CSS is impossible. But as in my case I know for certain that the input will always be in a specific way, is it possible to change the display of an input field based on the count of characters in it?
e.G. I want '123450' to be displayed as '1,234.50' - or if it were 'abcdef' it should become 'a,bcd.ef'.
So, I would like a rule that says: from right to left: after the second char display a dot, after the fifth and eight char display a comma.
Is that possible?
Example:
<input type="text" class="unformatted" value="123456" />
Should display like
<input type="text" class="formatted" vaulue="1,234.56" />
while still retaining its original value 123456.
What you're asking is not possible with pure CSS. The smallest you can go with CSS is the single HTML tag, you cannot go deeper than that.
Individual lines of text cannot be selected or altered, as they are seen as a whole by CSS engine.
With a little help from JavaScript, however, this can be easily done.
I can't seem to get the pattern attribute to work for the HTML form validation. I have seen a lot of tutorials and it all says the same and it works for them. Though I am using the same technique as the tutorials, I can't get it to work. For an example, please see the below code.
<label for= "firstname" id="firstname">First Name*</label>
<input type="text" name="firstname" pattern="[A-Za-z]" title="Only Alphabets" required/>
I want only alphabets to be inserted into this text box. When I insert numerals, it does ask to match the requested format which is only alphabets. But even when I enter alphabets it shows the message though it is supposed to let me submit the form. I tried all I can but can't seem to find a solution for this due my lack of knowledge. I would really appreciate if you could let me know how to enter only numbers into a field, only alphabets into a field, numbers and alphabets into a field using the pattern attribute for validation. Moreover, I was wondering whether the pattern attribute would be able to help me with this as well. For the National ID text box, I want the user to insert data in a specific format. Like this "A000000". An A in the first followed by 6 digits and if this format is not followed, then to display the message asking to match the requested format. Thank you so much in advance. (Please keep note that I am not using jquery).
Edit
May I please know how to add ' (apostrophe) along with the alphabets? Moreover pattern="[A-Za-z]+" wont let me insert spaces between words. How do I fix that?
The pattern field uses regular expressions. Try:
pattern="[A-Za-z]+"
For the national ID you could use:
pattern="A[0-9]{6}"
So I have some forms with html input validations like so:
<input type="number" min="1" max="50" ...
Now I need to add some custom ranges such as 1-40, 45, & 50.
Previously I've just wrote javascript to handle this but would rather just use the html input validation. Is there any way to achieve this other than checking with javascript / jquery ?
I think i can use <input pattern="regularExp" ...
This could also be an option but I have no experience in it...
Thanks
In addition to min and max, HTML5 gives you the step attribute. For example, <input type="number" min="1" max="50" step="10"> gives you acceptable values of 1, 11, 21, 31, and 41. Beyond those three attributes, there is JavaScript.
If you really do not want to use JavaScript, then you can try to use a regular expression with the pattern attribute of the input element. Note that the pattern attribute requires that your input type be set to text instead of to number and include a title that is used to describe the pattern. Also note that regular expressions are meant for parsing text character by character, which makes it difficult to deal with numbers beyond a single digit.
Here's an example that allows 1-40, 45, and 50 (but not if the number is preceded by a zero):
<input type="text" name="example-number"
pattern="(^40$)|(^45$)|(^50$)|(^1[0-9]$)|(^2[0-9]$)|(^3[0-9]$)|(^[1-9]$)"
title="A number in the range of 1-40, 45, or 50">
Plenty of people recommend using code (e.g., JavaScript) instead of a regular expression for validating numeric ranges, which may be why an entire site dedicated to input patterns does not have any listed for numeric ranges.
To get additional ID information (like the page name) about the page when it's submitted.
Thanks
No, it shouldn't matter, as long as it is within the form.
It must be within the form. It doesn't matter where, unless you do something like this:
<form>
<input type="text" name="data[]" value="value1" />
<input type="hidden" name="data[]" value="value2" />
<input type="text" name="data[]" value="value3" />
</form>
In this case the data array isn't associative, so the position of the elements does matter.
Similarily, if you'd traverse your POST / GET data with a foreach loop without paying attention to the array keys, you could get problems (but if you have an associative array, you should use the associations, especially in user input).
I mention these things just to make the answer more complete. In most cases the simple answer applies - position of hidden fields does not matter.
No. Values from an HTML form are mostly treated as being an associative array. To that end, the order in which the elements appear are of hardly any concern.
It matters in the sense that the order of data fields in submitted form data normally corresponds to the order of fields in HTML markup. You can see this easily if you use the default method (GET), so that the fields will appear in the URL.
There is no requirement on this; it is just how browsers tend to behave. Any robust form data processing does not count on any particular order.
I have sometimes observed browser rendering oddities that seemed to depend on the placement of hidden fields. It sounds weird, because hidden fields should not affect rendering.
Hello
I am trying save a value from an input tag in some HTML source code.
The tag looks like so:
<input name="user_status" value="3" />
I have the page source in a variable (pageSourceCode), and need to work out some regex to get the value (3 in this example).
I have this so far:
Dim sCapture As String = System.Text.RegularExpressions.Regex.Match(pageSourceCode, "\<input\sname\=\""user_status\""\svalue\=\""(.*)?\""\>").Groups(1).Value
Which works fine most of the time, however this code is used to process source code from multiple sites (that use the same platform), and sometimes there are other attributes included in the input tag, or they are in a different order, eg:
<input class="someclass" type="hidden" value="3" name="user_status" />
I just dont understand regex enough to cope with these situations.
Any help very much appreciated.
PS Although i am looking for a specific answer to this question if at all possible, a pointer to a good regex tutorial would be great as well
Thanks
You can search for <input[^>]*\bvalue="([^"]+)" if your input tags never contain angle brackets.
[^>]* matches any number of characters except > which keeps the regex from accidentally matching across tags.
\b ensures that we only match value and not something like x_value.
EDIT:
If you only want to look at input tags where name="user_status", then you can do this with an additional lookahead assertion:
<input(?=[^>]*name="user_status")[^>]*\bvalue="([^"]+)"
In VB.NET:
ResultString = Regex.Match(SubjectString, "<input(?=[^>]*user_status=""name"")[^>]*\bvalue=""([^""]+)").Groups(1).Value
A good tutorial can be found at http://www.regular-expressions.info
Assuming this is an ASP.Net page and not some external HTML you can't control the better solution would be simply to access the control.
Add an ID field to your input control and a runat="server" like this.
<input id="user_status" runat="server" class="someclass" type="hidden" value="3" name="user_status" />
You can probably get rid of the Name field. It's typically the same as the ID field and ID is a better choice. You can actually have both an ID and Name field if you want and they can both be the same value.
In your code behind you can then access the value by the ID with no need for a regex.
Me.user_status.value