Default text in an input field - javascript

I looked for this everywhere but I couldn't find anything useful.
I need a way to put a default text (preferably a php variable) in a HTML text field whenever I load the page. It's like a placeholder (I'm aware of the placeholder attribute, I don't want that) that doesn't disappear so that the user can submit that value if he wants.
I'm guessing it can be done with a simple javascript script but I suck at that.
Thank you for your help.

You're looking for the value attribute then: value="text here"
With a PHP variable, it would be something like this:
<form action="path-here">
<input type="text" name="field-name" value="<?php echo $variable; ?>"><br />
<input type="submit" value="Submit">
</form>

Here are two ways to put a default value in a text field.
The first way is the simplest. All it involves is setting the value of the text field.
<input type="text" id="myTextBox" value="Some default text">
The second was uses a JavaScript function that runs when the page loads.
<!-- This solution is a little more complicated. -->
<body onload="setDefaultText()">
...
<input type="text" id="myTextBox">
</body>
<script>
function setDefaultText() {
document.getElementById("myTextBox").value = "Some default text";
}
</script>

JSFIDDLE Example
<form>
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>
You are looking for the value="Text Here"

Related

Unable to redirect to another URL through JS

So, I made a simple page where the submit button should redirect to another URL. Here's my code.
HTML:
<form onsubmit="javascript:redirectRoll();">
<input type="text" id="key" name="Roll" placeholder="Enter the full Roll No" size="60" pattern=".{10,}" required title="Every Roll No is exactly of 10 characters" maxlength="10" autofocus required><br></span></input><br>
<input type="submit" name="submit"></input>
</form>
JS
function redirectRoll(){
window.location.href="www.example.com";
}
Whenever I click on Submit it just takes me back to the same page. Help, please!
Ok, I'm posting the link to the website I've just hosted:
jbresults.site88.net/results.html
this should make it easy for you guys to find the problem :)
As #teemu has commented, the form submission is overriding the redirect. You need to use the following code for your redirectRoll function. Make sure to change the onsubmit value to "redirectRoll(event)"
function redirectRoll(e) {
e.preventDefault();
location.href = "example.com";
}
Just try this
function redirectRoll()
{
$(location).attr('href','www.example.com');
}
This work for me :
function redirectRoll(){
window.location ="www.example.com";
}
you may change the way you are calling the function
in the html
<form>
<input type="text" id="key" name="Roll" placeholder="Enter the full Roll No" size="60" pattern=".{10,}" required title="Every Roll No is exactly of 10 characters" maxlength="10" autofocus required><br></span></input><br>
<input type="submit" name="submit" onclick="redirectRoll();"></input>
</form>

get the id of one post from one page to another page in html

I am trying to get the id of one object from one page to another page.
I have two pages
index.html
intro.html
index.html
<input type="text" name="fname" value="" id="idnew">
<input type="button" value="Post" id="butonid">
<script>
$("#butonid").click(function(){
$('#idnew').val("4")
}
</script>
Now I want to send the input value of id idnew to intro.html page.
Please help me
val("4") sets the value for that element, right before loading intro.html and is discarded along with your previous page.
To send that value, you could forget javascript altogether and use a form:
<form action="intro.html" method="get">
<input type="text" name="idnew" value="">
<input type="submit" value="Submit">
</form>
then to access that value, for instance in php use $_GET['idnew']

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>

Text disappear on click, but new text entered disappears to

Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.
So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.
How can I make it so that the newly entered text does not disappear?
My current code for the text fields:
http://pastie.org/8366114
<input type="text" value="Enter Your First Name" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your First Name';"
onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Email';"
onclick="javascript:if(this.value=='Enter Your Email')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';"
onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>
I apologize for not posting it on here, but I don't know how to do the code block thing..
to do this with javascript all you need is
<input type="text" value="Enter Your First Name"
onblur="if(this.value=='')this.value='Enter Your First Name';"
onfocus="if(this.value=='Enter Your First Name')this.value='';" />
DEMO
however you can just simply use the html5 placeholder reference
also
dont use the same id more then once, instead use class.
input is self-closing (like <br>)
</br> is wrong use <br> or <br />
here is a working version of your code, i also added submit as the value for your button
<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">
DEMO
<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />
or if you are using HTML5, you can use placeholder attribute:
<input type="text" placeholder="Enter Your First Name" id="form" />
you have to make the onfocus event the same as the onclick event, e.g:
onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"
onFocus="this.value=''"
This is causing your text fields to be reset to blank unconditionally.
You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.
Remove content from form onclick:
in haml:
= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"
in html:
<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">

want my form's values to show in another div after clicking submit

I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>
Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});​
You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});

Categories