I am creating a html form with textboxes. I want default values to be shown in the textboxes when the page loads.
see code below:
<form action="" onsubmit="">
Zip Code: <input id="address" type="textbox" value="">
Zip Code:<input id="address" type="textbox" value="78728"/>
Radius:<input id="radius" type="textbox" value="#session.preferences.view_Radius_Map#"/>miles
<input type="button" value="Add Radius" onclick= "drawCircle()">
<input type="button" value="Undo" onclick=" Undo()">
<input type="button" value="Reset" onclick= "clearMap()">
</form>
for some reason when I try to remove the line that has no value for the Zip Code, the value for the second Zip Code textbox (which has a value set for the zip code) does not display. What is causing this and how can I correct this so that I have to textbox fields Zip Code and Radius in which the default values are displayed when the page loads?
It works fine for me when I remove the first zip code <input>: http://jsfiddle.net/LFYnH/
Try to give the second field a different id. You have two input fields with the same id="address".
Do like this:
Zip Code: <input id="address" type="textbox" value=""/>
Zip Code: <input id="address2" type="textbox" value="78728"/>
try giving them different id. Eg. "Address" and "Address2"
An id is intended for a single use. If you require it to be on more than one element you should use a class instead.
How are you removing the line without a value in it? With Javascript, JQuery?
Both of those lines shouldn't have the same ID. Make them like address1 and address2 or something.
You can then use JQuery or something to remove the first one (or just hide it), by doing like:
$('address1').hide();
You can also check if it doesn't have a value by looking at it's value through JQuery as well:
$('address1').val();
Some of your input tags are missing the closing '/'
Zip Code: <input id="address" type="textbox" value="">
That could be causing a problem.
Change the id in the first two input tags to classes so that they can be re-used and make sure all of your input tags(and other tags) are properly closed. The first input you have isn't properly closed.
using jQuery you can do something like this:
For each input text set a default value
<input type='text' data-default='your default text' />
Then you have to add two step in javascript. First load the default text into the field when the page loads and listen for focus event
jQuery(document).ready(function(){
jQuery(input)
.each(function(index, element){
jQuery(element).val(jQuery(element).data('default'));
})
.focus(function(evt){
var taget = evt.target;
if(jQuery(target).data('default') == jQuery(target).val()) jQuery(target).val("");
});
});
When the input get the focus it checks if the current text is the default text and in this case javascript empty the field otherwise your text is safe into the text box
Remember that ID are unique you can't have two elements with the same id "address"
Hope this helps
Related
I have this code, I use formaction attribute to return in home.html
but it's not working because of required attribute.
<form action="post">
Name:
<input type="text" name="name" required>
<br>
Email:
<input type="email" name="name" required>
<button name="Send" id="send">Send</button>
<button name="Return" id="return" formaction="home.html">Return</button>
</form>
The formaction attribute working fine. I can use the Network tab in my browser's developer tools to observe that when I click Return (in the live demo in your question) the form is submitted to home.html.
The required fields are still required (so I have to fill them in before that happens), but that is to be expected.
It sounds like your goal is to provide an exception and not need the user to enter any data when submitting the form to Return.
That isn't possible without adding a bunch of JS but you're approaching the problem from the wrong angle in the first place.
It looks like you want something for the user to click on that will abort filling in the form and just go to a different URL. There's no data submission involved.
That isn't a job for a submit button.
Use a link instead.
Return
You can apply CSS if you want it to look like a button, but I wouldn't recommend it. The visual appearance of the button implies that the form data will be sent somewhere, and that isn't what you are doing.
You should refer to homepage at the form tag
<form action="home.html" method="POST">
and for the submit
<input type="button" name="Return" id="return">
i'm trying to do a simple local website to search on my db , can i with html only a Href-button using my form text value before ?
i want to write my keyword , and use this as a var in my href
<form>
<p>Enter your keyword</p>
<input id="keyword" type="text" name="motclef" /><br /><br/>
<input type="submit" href="localhost:8888/[+keyword+]"/>
</form>
can i do that or i need to use some other script ?
You cant do that with HTML, you will have to use scripts to do so.
Hint: Reload same page to get value of keyword (from input)
for example i have a disabled input that holds a time span, but i want to show it to user in a friendly format. just like select element, the option with in can hold a value that is different from what is displayed
<select><option value=1>Label is there</option></select>
can it be done with input ?
something like
<input type='text' value='<?=$time?>' label='<?=date('c',$time);?>' />
P.s: im not asking for a place holder.
currently im doing
<label for="app_time">Time</label>
<input type="hidden" value="2013-04-27 15:40:00" name="app_time">
<input type="text" value="27 Apr 13, 03:40" Disabled>
is there any other method ?
You can wrap an input in the label tag.
<label>Text for the input <input type="text" name="yourInput"></label>
Or you can reference the input from a label tag.
<label for="yourInput">Text for the input</label>
<input type="text" name="yourInput" id="yourInput">
You can add styling to the label element and it aids people using assistive technology as it links the description with the form element.
Not in the way you are asking, however you could always try it with a hidden element holding the real value...
Try;
<input type="text" value="<?=date('c',$time);?>" name="dummytime" />
<input type="hidden" value="<?=$time;?>" name="realtime" />
So to get $time it would be $_POST['realtime'] and to get the formatted date value it would be $_POST['dummytime'].
No, not in the way you're asking. The value of the text input is what is displayed within it.
As an alternative you could use a hidden input with the actual value, and then put the label in the text input
Your best bet is to handle converting the date to a timestamp on the server side. You'll need to ensure the submitted text is able to be converted to a timestamp, however, and show the user an error if not. There is not a built-in way for JavaScript to convert some given user-inputted string to a computer-readable date format.
Edit: I'm assuming you want the actual value to match whatever the user enters, not a static timestamp. If you want to submit a static value regardless of the user's input, simply use a hidden input (<input type="hidden">) and a secondary text input that you can ignore.
Let say we have the following form code
<form action="post" method="post" name="form">
Your Name : <input name="name" type="text" id="name">
<input type="submit" name="Submit" value="Submit">
</form>
what if i want it to be viewed as image
Why ! in fact i've text-area where i will put some HTML codes and i want the output of that code appears normally as web-browser view but as image , means no way to click on it or operate just appears as image
I do not know if it possible or not but i wonder it it can be and here is example for exactly how this forms i wants to appears
output of the html codes appears as image
so any method any help any function or class can do like this ?!
Thanks
You can do it two ways
Put and transparent block element over it (position: absolute and so on)
disable every input element (disabled:disabled attribute)
see:
http://www.w3schools.com/tags/att_input_disabled.asp
I have never seen this, have no idea what is going on:
<form action="/cgi-bin/Lib.exe" method=POST name="slider" ID="Form2">
<input type="text" name="user" value="" ID="Text1">
<input type="text" name="end" value="" ID="Text2">
</form>
function setval()
{
alert(s.getValue());
alert(s2.getValue());
document.slider.user.value = s.getValue();//set value of hidden text box to value of slider
document.slider.end.value = s2.getValue();//set value of hidden text box to value of slider
document.slider.submit();
}
When submitting form from setval(), when I change the name of the first input box from "user" to anything else, my cgi application won't except it and I get an error? I can change the name of the secons input box to anyting and it doesn't seem to have any problem? Confused. Thanks!
Seems more like it's a problem with the cgi than it is with the HTML/Javascript, to me. It probably makes the assumption that a value for "user" will always be sent. Not much else I can tell you without seeing the form-processing code.
Your CGI must be expecting an element called 'user'. You would need to check the source.