i am making a form that has a date field using textfield, i want my date field to have a label format inside the textfield, here's the picture:
after clicking on the textfield the format will be erased and the hyphen will remain like this picture:
i already made the code for the label format,
here's my code:
<input type="text" name="date" value="DD_MM_YYYY" id="date" style="width:180px" onclick="if(this.value=='DD_MM_YYYY'){this.value=''}" />
</p>
My problem now is the hypen that will remain after clicking the textfield.
Anyone knows how to do that?
Thanks in advance.
I would recommend Masked Input Plugin.
http://digitalbush.com/projects/masked-input-plugin/
You can define your own type of mask by using the code:
jQuery(function($){
$("#myinput").mask("99-99-9999",{placeholder:" "});
});
Then you can define a placeholder to the input:
<input id='myinput' placeholder='dd-mm-yyyy'>
You can use the placeholder attribute.
<input placeholder=" - - " value="DD-MM-YYYY" />
You can continue to set the value to nothing when the element is focused. On blur set the value back to DD-MM-YYYY.
Note that this attribute isn't supported by all browsers.
Related
I'm trying to put a euro sign inside an input but despite everything, I can't get it to work.
It's a plugin that display a slider for a form, I tried to add a div to contain this input inside the plugin file, but it doesn't work either.
Here's what I tried, but I'm not sure if it can work this way with javascript
var input = $( "#input_1_30" );
input.val( input() + "€" );
<div class="ginput_container"><input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
Thanks
As I said in my comment, I used HTML text input field with currency symbol
<label>€
<input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
</label>
This isn't a job for JS. Place the € next to the form input in html and style it accordingly using CSS.
Edit
The benefit of using a label here is that clicking the contents of the label brings the input into focus, which other methods wouldn't do by default.
I am not entirely sure what you want to do but what you can do is add the euro sign as a placeholder in the input field but it will disappear after a user adds their earnings.
If you still want add it in the placeholder attribute, you can do this in the input tag
<input placeholder="€"/>
I hope this helped and if you want to know more about placeholders and input tags you can check INPUT Placeholder Attribute (MDN).
I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />
Within an <input type="text" /> tag how do you I mask the input field so that the user is resricted to the following format [].[] and in between the brackets can be any number of characters.
As an example:
"[Analysis].[Analysis]"
or a another example:
[Analysis-Result].[Analysis Result]"
Use this plugin http://digitalbush.com/projects/masked-input-plugin/#demo
I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?
I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />
I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.
you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />
Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;
I just creating a booking system and I want that the users will choose a date from the calender and it'll show in input text - that I did!
Now I want to block the writing in the input text (just bring to calender writes there when the user choose a date).
How do I do it? I guess JavaScript, but how? I dont know JS very wall..
Thank you very much!
Give your element the readonly attribute, this will disallow users to type anything into it. However, you will still be able to write to add through javascript for example when a date is chosen. Here is an example:
<input type="text" id="txt" readonly="readonly">
JavaScript:
var el = document.getElementById('txt');
el.value = "Testing......";
Working Demo
<input type="text" id="someId" disabled="disabled" />
The disabled property will prevent any user input, but you can still write to it via your javascript calendar method.
For those who wants to prevent typing but not having the disabled style, can try:
<input type="text" onkeypress="return false;"/>