I have two input fields as shown below
<input type="number" name="number" placeholder="Enter minimum price">
<input type="number" name="number" placeholder="Enter maximum price">
<input type="submit">
want to validate always first input value must be less than the second input value.
You can Set it manually in html by max = "" min = "" in both field
or You can validate it in your function which is better way to handle it
Related
I have already append the JQuery value to the select option but I want to append value to an input field, any solutions?
Select option:
<select name="c_email" class="form-control" ></select>
JQuery value append:
$('select[name="c_email"]').append('<option value="'+ value +'">'+ value +'</option>');
Instead of drop down select I want the value here in input field:
<input type="email" class="form-control" name="c_email" placeholder="">
$('input[name="c_email"]').val(value);
And you can target that input with any of these, or all to be more precise:
$('input[name="c_email"][type="email"].form-control')
var value="test";
$('input[name="c_email"]').val(value);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" class="form-control" name="c_email" placeholder="">
I want to record the minimum and maximum price of the shares of different companies daily. I am trying to use this tag
<input type="number" name="number" placeholder="minprice">
<input type="number" name="number" placeholder="maxprice">
But I want in a single input need to enter both min and max prices of the share on the particular date.
What need to be included or changed?
You can use min and max.
<form>
<input type="number" name="number" placeholder="minprice" min="5" />
<input type="number" name="number" placeholder="maxprice" max="40" />
<input type="submit" name="Send" />
</form>
You could use HTML min Attribute, your tags should look like this
<input type="number" name="number" placeholder="minprice" min="1" >
<input type="number" name="number" placeholder="maxprice" max="5">
read docs here min and max
You can't have 2 values in one input of type "number".
You can put both values in input of type "text" and restrict with javascript on keydown or keyup which symbols can be entered in that input.
I would suggest you keep it on the UI in 2 different inputs so there is less space for user mistakes. And then behind the scenes take both of the values and combine them however you want or need.
You can read the first value minPrice from the input field and clear the value to accept second value maxPrice. Using a counter you'll know which is what.
NOTE: This will work only for first 2 clicks. You can tweak the function as per your requirements.
var btn = document.getElementById("save-btn");
var minPrice, maxPrice;
var count = 0;
btn.onclick = function() {
var price = document.getElementById("share-price");
count += 1;
if (count == 1) {
minPrice = price.value;
price.value = '';
console.log('minPrice', minPrice)
} else if (count == 2) {
maxPrice = price.value;
price.value = '';
price.setAttribute("disabled", true);
btn.setAttribute("disabled", true);
console.log('maxPrice', maxPrice)
}
}
<input type="number" placeholder="Enter price" id="share-price" />
<button id="save-btn">Save</button>
How do I make the input field the same length as the string in the input's field name attribute?
<input class="field" type="text" name="data">
You can specify maximum length and maximum size using the following:
<input type="text" name="data" maxlength="4" size="4">
<input name="data" type="text" size=4 maxlength=4 >
I have this input field
<input type="datetime-local" required>
I would like the date part to be always required, but not the time part...
I tried with pattern, like
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}.*"
but it doesn't seem to work...
any idea...
Edit:
I explain better here
<form name="test" method="POST" action="/">
<input type="datetime-local" name="event_date_start" id="event_date_start"
min="2011-06-07T00:00"
max="2099-06-14T00:00" required><br>
<input type="submit"/>
What I want is to use datetime, but time must be optional.
With the above example, submit is not allowed until you insert 00 in the time field..
I want to leave that optional...
No need for pattern just use the attributes min, max and value:
<input type="datetime-local"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00" required>
If you want an inputfield with date only use:
<input type="date" required>
For time is optional:
<input type="date" required> <input type="time">
I am trying to increase the box to fit the required placeholder text. If I change input type from "number" to "text" it works but I want to use "number" so I can specify the range.
<form action="Program3.php" method="post">
<p>Distance (in miles):
<input style="height:200px;font-size:14pt;">
<input type="number" name="distance" required
size="100" min="300" max="600"
required placeholder="Enter a number between 300 & 600">
Set the width with CSS:
<input type="number" name="distance" required
style="width:20em" min="300" max="600"
required placeholder="Enter a number between 300 & 600">
You want to show a lengthy text as placeholder so u have to increase width of input field not tha height.
Style="width:300px"
A more elegant solution would be to use Javascript. This will automaticly set all your input fields to the width of the placeholders:
document.addEventListener('DOMContentLoaded', function() {
var input = document.querySelectorAll('input');
for(i=0; i<input.length; i++){
input[i].setAttribute('size',input[i].getAttribute('placeholder').length);
}
});
<input type="text" placeholder="A very long placeholder." /><br />
<input type="text" placeholder="A short one." />