Set default text in a text field for a form - javascript

I am making a form where almost every person filling out the form will be from the same city, state and zip code. Is there anyway I can have default text in the text area that will count when it sends? I have seen forms where there is text in the text area, but when the user clicks on the field the text disappears. I would not want the text to disappear on field click.

This is just a sample form with "default" inputs in the text box
<form action="test.php" method="post">
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
The thing to add is value="something here"
In this example the input boxes has John and Doe written not there as a placeholder
As you can see here at w3school
If you are useing a text area then you can do something like this:
<textarea name='someName'>Default value</textarea>

whatever you write between the tag is the default value for the textarea
<textarea id="txtarea">This is the Default Value</textarea>
This is different for input type=text. In that case you need to use the value attribute

Related

How do I make an html text input readonly but be able to update with a script?

I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';

how to change default input tooltip text that shows in required input

There is a tooltip when my mouse is over the textbox : "please fill out this field" is there a way too change this text ?
if you hover on this field you can see the massage :
<input type="text" name="yourname" required/>
This could be easily done using the title HTML attribute.
title Attribute
The title attribute belongs to the Global Attribute. It allows to specify extra information about an element. This information is shown as a tooptip text when the mouse moves over the element.
<input type="text" name="yourname" required title="You changed it !!"/>
If its something related to the text showed after validation. For that you could use the function setCustomValidity along with an event Handler .
Here we would use the event Handler oninvalid.
Your code could be written as :
<input type="text" name="yourname" required oninvalid="this.setCustomValidity('Yo! You changed it')" oniput="this.setCustomValidity('Yo! You changed it')" title="test"/>
you can add a title on your input
<input title="test" type="text" name="yourname" required/>

Textbox like gmail login page

I want a textbox functionality like a gmail login page textbox. Right now I have code like this:
<script>
function inputFocus(i){
if(i.value===i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value===""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<body>
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
...
</body>
The problem with this code is when I select the tetbox, type "First Name" and if I reselect the textbox the text is clearing. And also gmail login page textbox functionality looks great, until I type a letter it shows the transperent text. But I don't know how to implement it.
For the "transparent text" you need to use the placeholder attribute:
<input type="text" name="firstname" ... placeholder="Email">
are you looking for a placeholder ??
If so... you can do like this..
<input type="text" name="somename" id="someid" value="" placeholder="Email">
Placeholder is used to display the text in the text box and will disappear as soon as you start typing..
If you want to delete the "transparent text" once start typing, you can use placeholder attribute of input element
This attribute is introduced in HTML5 to handle this scenario without writing any peice of javascript code
Your html code should look like this
<input type="text" name="firstname" placeholder="First Name"/>
This will also work as desired when you delete your text, as it will reset the transparent text back again.
Also, here is a working example on jsfiddle
I also, encourage you to review new elements and attributes introduced in HTML5, it will save a your time writing a lot of javascript to handle already built in functionalities

adding values entered by user in a separate text area

I need to display an HTML form where user enters a value in a field. A textarea is displayed in the same form. Once user inputs text into the text field and clicks on submit, the values submitted should be appended and displayed in the textarea box. Something like:
field 1: some text box
field 2: text box
Submit button
field 3: When i click submit, display the texts entered in field 1 and field 2 together in this textarea.
Any ideas on this will be very helpfull.
may be you want to do like this, try this one...
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="submit" id="btn1"/>
<textarea id="txt3">hello</textarea>
$(document).ready(function(){
$("#btn1").click(function(){
txt1=$("#txt1").val();
txt2=$("#txt2").val();
//alert(txt1+txt2;
$("#txt3").val(txt1+txt2);
});
});
click on this for live demo: http://jsfiddle.net/vwckksL6/1/
thank you

How to edit HTML Form text box using Javascript?

I am trying to edit HTML form text box using Javascript.
I want the HTML text box to initially display "Enter your name here", and as soon as the user clicks on the box, I want the text box to go blank, so that the user does not have to delete the "Enter your name here" text before actually entering her name.
How do I go on about doing that?
This is what I have tried, without any success.
<body>
<script type="text/javascript">
function name()
{
window.document.getElementById("name").value='';
}
</script>
Your Name:<input type="text" value="Enter Your Name Here" id="name" onclick="name();">
</body>
That is called a placeholder, and in HTML5 you have a attribute on input for that:
<input type="text" placeholder="Enter Your Name Here" />
See how it works in jsfiddle.
I'd advise you to use the 'placeholder' attribute of the textbox:
<input type="text" placeholder="Enter Your Name Here" id="name">
This will give you the desired effect (i.e. disappearing text on user click).
use
window.document.getElementById("name").innerHTML = #value
You can use the placeholder attribute of input tag.
Sample:
<input type="text" name="fname" placeholder="First name">
<script type="text/javascript">
function name()
{
window.document.getElementById("name").value='';
}
</script>
Your Name:<input type="text" value="Enter Your Name Here" id="name" onclick="javascript: name();"> </body>

Categories