I have this code for a simple search function I use. I would like to add a history log using the HTML5 local storage function.
I have tried to look at examples but I'm no good web coder so I don't really understand how to adapt the examples on my form.
All I wanna do is save the text in the textbox to a listbox so I easily can load the last searched text.
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body onLoad="document.getElementById('txtNummer').focus();">
<center>
<article>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtNummer" id="txtNummer"/>
<input type="submit" value="submit"">
</form>
</td>
</tr>
</table>
</article>
</center>
</body>
</html>
Thankful for examples.
I created a sample for you. It saves the value of the input with id test when clicking on the button.
It checks whether the HTML Storage functionality is available and uses it to save.
For your convenience, I added an alert to show you the result.
function saveText()
{
var e = document.getElementById('test');
if(typeof(Storage) !== 'undefined')
{
var currentValue = localStorage.getItem('test');
if (currentValue.length == 0)
{
currentValue = e.value;
}
else
{
currentValue = currentValue + '\n' + e.value;
}
localStorage.setItem('test', currentValue);
alert('current value:\n\n' + localStorage.getItem('test'));
}
else
{
alert('Cannot access local storage.');
}
}
Use that with this html:
<input type="text" id="test" />
<button onclick="javascript:saveText()">save</button>
And the fiddle.
So as mentioned on the title,it is possible ? i've tried few ways,but nothing work.The last code i try make the text on the button have undrline on it,so what i'm trying to do is as mentioned on the title + without make the text inside the button have underline.
And thankyou before
Edit : Since it look like not clear enough so,here's the case
i've three HTML page
let say index.html,*list.html*,and judul.html
-The HTML code of list.html
<html>
<head>
<title>List</title>
</head>
<body>
<form action="new 2.html" target="tengah">
<input type="submit" value="About Us">
</form>
</body>
</html>
-Then index.html
<html>
<head>
<title>Frame</title>
</head>
<frameset rows="20%,80%" bordercolor='blue' noresize id="judul">
<frame src="Judul.html" id="atas">
<frameset cols="15%,85%" id="kolom">
<frame src="list.html" id="daftar">
<frame src="" id="tengah">
</frameset>
</frameset>
</html>
And the last one judul.html is not included since it set the other element like how big the row or what content should displayed according to the condiditon.
so what i'm exactly trying to do is Make a button on list.html that link to other page but show it to a frame with ID tengah so it is possible ?
You can do:
<button id="btn">Button</button>
<iframe id="frame"></iframe>
With the JS:
var btn = document.getElementById("btn");
var frame = document.getElementById("frame");
btn.addEventListener("click", function()
{
frame.src = 'http://url.com/';
});
You can use the target attribute in the form element:
<form action="..." target="...">
<input type="submit" value="...">
</form>
You can do it like this with JQuery:
$('#btn').bind("click", function() {
$('#frame').attr('src',"http://someurl.com");
return false;
});
to remove underlined text use this css:
text-decoration: none;
<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
var x=document.getElementsByName("first");
alert(x.length);
}
</script>
</head>
<body>
<h1 name="first">hi</h1>
<form>
uname:<input type="text" name="first" value="sree"> <br>
password:<input type="password" name="first" value="dhar">
<p name="first">hello</p>
<input type="button" onclick="getElements()" value="How many elements named 'x'?">
</form>
</body>
</html>
I have this code.The alert is showing 4 in chrome.But in ie it is showing 2.What might be the reason.
Thanks in advance...
The name attribute is not actually a valid attribute for h1 or p elements.
It is however, valid for the two input elements, so that is probably why it is returning 2.
IE8 only recognizes the name attribute on the <input>s. Use a class instead.Fiddle of your code: http://jsfiddle.net/ChpCr/Fiddle: http://jsfiddle.net/ChpCr/1/
I am currently working on a project that is requiring me to embed a Topaz signature image into a HTML page. I know that this is possible if the image has been changed into a base64 string but the string value that the signature is returning is a "ASCII hex string". Does anyone have code that will display an embedded "ASCII hex string"? Thanks.
Below is an example string I found that will embed a red dot into a page and it works perfect.
<html>
<head>
<title>Display Image</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
</body>
</html>
Below is the string that is being returned from the signature pad. (I'm sorry but its really long.)
<html>
<head>
<title>Display Image</title>
</head>
<body>
<img src="data:image/png;base64,3331330D0A310D0A353333203137360D0A353331203137380D0A353238203138320D0A353234203
139300D0A353138203230320D0A353132203231350D0A353036203233310D0A353031203234390D0A343935203237300D0A34
3839203239340D0A343834203332300D0A343738203334390D0A343731203338310D0A343636203431350D0A3436312034353
00D0A343538203438360D0A343536203532310D0A343537203535310D0A343539203537360D0A343634203539320D0A343731
203630320D0A343739203630360D0A343838203630360D0A343938203630350D0A353130203630320D0A353232203539350D0
A353335203538340D0A353439203536370D0A353635203534360D0A353831203532300D0A353939203439310D0A3631372034
36300D0A363335203432370D0A363533203339330D0A363730203335390D0A363836203332360D0A373032203239330D0A373
136203236330D0A373239203233340D0A373339203230390D0A373438203138360D0A373534203136360D0A37353820313439
0D0A373630203133360D0A373630203132350D0A373539203131370D0A373536203131310D0A373532203130370D0A3734372
03130340D0A373432203130340D0A373336203130360D0A373239203130390D0A373232203131360D0A373133203132350D0A
373034203133370D0A363934203135320D0A363833203137310D0A363733203139320D0A363633203231360D0A36353420323
4320D0A363437203236380D0A363431203239360D0A363337203332340D0A363335203335310D0A363335203337370D0A3633
37203430320D0A363431203432340D0A363436203434330D0A363534203436300D0A363633203437330D0A363734203438330
D0A363836203439300D0A373030203439340D0A373134203439350D0A373238203439340D0A373434203439310D0A37363020
3438360D0A373736203437390D0A373933203437310D0A383130203436300D0A383237203434380D0A383435203433340D0A3
83632203431380D0A383830203430310D0A383938203338320D0A393135203336320D0A393331203334310D0A393437203332
300D0A393631203239380D0A393734203237380D0A393836203235380D0A393935203233390D0A31303033203232330D0A313
03037203230380D0A31303039203139360D0A31303039203138360D0A31303035203137380D0A393939203137330D0A393931
203137310D0A393831203137300D0A393639203137320D0A393536203137350D0A393430203138310D0A393234203138380D0
A393037203139360D0A383930203230360D0A383733203231370D0A383536203233300D0A383430203234340D0A3832352032
35390D0A383131203237360D0A373939203239340D0A373738203331320D0A373630203333310D0A373433203335310D0A373
238203337310D0A373336203339330D0A373436203431350D0A373539203433360D0A373735203435350D0A37383320343733
0D0A373933203438390D0A383035203530330D0A383230203531330D0A383337203532310D0A383537203532350D0A3837382
03532350D0A393031203532310D0A393235203531330D0A393530203530320D0A393735203438380D0A31303031203437300D
0A31303238203435300D0A31303535203432390D0A31303832203430360D0A31313039203338330D0A31313335203336300D0
A31313630203333370D0A31313833203331340D0A31323033203239330D0A31323230203237330D0A31323335203235350D0A
31323435203233380D0A31323532203232340D0A31323534203231310D0A31323533203230310D0A31323438203139320D0A3
1323430203138360D0A31323238203138330D0A31323133203138320D0A31313937203138350D0A31313739203139300D0A31
313630203139380D0A31313339203231300D0A31313138203232360D0A31303936203234340D0A31303735203236360D0A313
03534203239310D0A31303334203331380D0A31303135203334370D0A393938203337380D0A393831203431310D0A39363720
3434350D0A393535203438300D0A393434203531340D0A393337203534340D0A393331203537300D0A393237203538390D0A3
93236203630310D0A393235203630370D0A393237203630390D0A393330203630390D0A393335203631300D0A393432203630
390D0A393531203630370D0A393633203630320D0A393736203539340D0A393933203538320D0A31303131203536360D0A313
03331203534370D0A31303533203532350D0A31303736203530320D0A31313030203437370D0A31313234203435300D0A3131
3439203432320D0A31313734203339330D0A31313938203336340D0A31323230203333340D0A31323431203330340D0A31323
539203237340D0A31323734203234360D0A31323838203231380D0A31323939203139320D0A31333038203136390D0A313331
34203134380D0A31333138203133310D0A31333230203131360D0A31333230203130360D0A313331382039390D0A313331352
039350D0A313331322039350D0A313330362039380D0A31333030203130350D0A31323931203131370D0A3132383120313333
0D0A31323730203135340D0A31323539203137390D0A31323437203230370D0A31323335203233380D0A31323233203237310
D0A31323133203330350D0A31323033203334310D0A31313935203337360D0A31313838203431310D0A31313833203434330D
0A31313739203437330D0A31313738203439390D0A31313739203532310D0A31313832203533390D0A31313836203535320D0
A31313933203536300D0A31323032203536340D0A31323133203536330D0A31323237203535360D0A31323433203534350D0A
31323631203532390D0A31323830203530380D0A31333031203438340D0A31333233203435350D0A31333435203432340D0A3
1333639203339310D0A31333933203335370D0A31343135203332320D0A31343336203238380D0A31343536203235350D0A31
343734203232330D0A31343930203139340D0A31353033203136370D0A31353133203134340D0A31353230203132350D0A313
53234203131300D0A31353236203130300D0A313532362039340D0A313532342039320D0A313531392039320D0A3135313220
39350D0A31353033203130300D0A31343931203130390D0A31343737203132320D0A31343632203133390D0A3134343520313
5390D0A31343237203138330D0A31343039203230390D0A31333932203233370D0A31333734203236370D0A31333538203239
380D0A31333433203332390D0A31333331203336310D0A31333232203339310D0A31333136203431390D0A313331322034343
50D0A31333132203436370D0A31333135203438370D0A31333230203530330D0A31333239203531350D0A3133343020353233
0D0A31333535203532370D0A31333732203532370D0A31333931203532320D0A31343132203531340D0A31343335203530320
D0A31343539203438360D0A31343835203436380D0A31353130203434380D0A31353336203432360D0A31353631203430340D
0A31353834203338310D0A31363035203335390D0A31363235203333370D0A31363431203331360D0A31363536203239350D0
A31363637203237370D0A31363736203236300D0A31363832203234350D0A31363836203233330D0A31363836203232320D0A
31363834203231340D0A31363831203230380D0A31363736203230340D0A31363638203230320D0A31363630203230330D0A3
1363439203230360D0A31363335203231320D0A31363230203232310D0A31363032203233340D0A31353834203235300D0A31
353635203237300D0A31353436203239320D0A31353238203331380D0A31353130203334360D0A31343934203337360D0A313
43738203430360D0A31343635203433370D0A31343534203436380D0A31343436203439370D0A31343432203532360D0A3134
3431203535310D0A31343432203537320D0A31343435203538370D0A31343439203539350D0A31343530203539380D0A31343
530203539380D0A31343530203539370D0A300D0A000000000000000000000000000000000000000000000000000000000000
00000000" alt="Signature">
</body>
</html>
Just wanted to let everyone know that the Topaz sig string is a proprietary format and is not an image. All you need to do is store the sig string somewhere. Then when you want to display the signature later just create an ActiveX object on the page you want to display it then just set the sig string to the stored value.
This is the HTML page I wrote. Hope it helps the next person looking for the same thing. :)
Also just a reminder that this is an ActiveX so it will only work in IE.
<HTML>
<HEAD>
<TITLE>SigPlus Example</TITLE>
<table border=1 cellpadding="0" height="100" width="300">
<tr>
<td height="1" width="368"> <OBJECT classid=clsid:69A40DA3-4D42-11D0-86B0-0000C025864A height=100
id=SigPlus1 name=SigPlus1
style="HEIGHT: 100px; LEFT: 0px; TOP: 0px; WIDTH: 300px" width=300
VIEWASTEXT>
<PARAM NAME="_Version" VALUE="131095">
<PARAM NAME="_ExtentX" VALUE="4842">
<PARAM NAME="_ExtentY" VALUE="1323">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
</td>
</tr></table>
<SCRIPT LANGUAGE=javascript>
<!--
function onClear(){
SigPlus1.ClearTablet();
}
function onBringBackSig(){
SigPlus1.JustifyMode=5
SigPlus1.SigCompressionMode = 1;
SigPlus1.SetAntiAliasParameters(1, 600, 700);
SigPlus1.SigString = "0500440001026E0100FF01FF02FE02FE01FD01FD00FD01FD00FC00FC00FB00FBFEFAFDF9FBF8FAF9FAF8F8F9F6F9F5FAF3FBF2FDF100F103F205F207F309F50AF70BFA0BFC0B000B040C080B0C0B0F0B120A1308130811060F070B05070605070206FE08FB09F709F40AF009EF0AED08EE07EF05F002F301F4FFF5FDF9FCFBFCFDFC01FB02FD01FE01FF0000000013003F022B0100000001FF04FF06FE0BFB0EFA11FA14F816FA17F916FC15FE12FF0F000A0003000100FF13003402D900FFFFFFFEFEFDFEFEFFFEFFFF01FF010003020302050405060707060702030202FFFF00008B019302730100FFFF0000FEFEFEFEFDFFFDFEFDFFFCFEFDFDFCFDFCFCFCFAFDFAFEFA00F902F905F908F80AF80EF80FF910FA10FC0F000C030806050A010BFE0DFA0EF60EF30DF00DF10BF008F306F404F802FB00FD00000003FF07000AFE0FFD11FC14FA15F916F916F913F911F90EFA0BFA08FB05FB04FC00FD00FFFD00FB02F803F605F305F207F109EE0BEE0CED0DEC0DED0DEE0BF109F407F606FA04FC03FE0200010300040007FE0AFD0CFD0DFD0FFE0EFF0E000C000B02080206030503030401050006FE06FB06F805F604F404F303F103F004EF04F005F204F304F702F902FD02FF010201050007FE0AFE0BFD0DFD0DFC0FFD0FFE0FFF0C000B0008020602050304030304030401040104FF03FF01FE01FF02FE01FD02FD02FC04FB04FA04FA04F904F806F707F709F709F709F708F807FA04FA03FC02FE01FE020001FF00000000FE02FD03FB06F909F90CF70EF810F810F80FFC0EFD0C000A0307040605030501060005FD06FB07F906F707F607F405F404F203F202F301F301F601F801FC01FE00FF0000FF03FD05FD08FC0AFC0CFE0DFD0CFF0DFF0B00090008020604040503070108FF07FC08FB08F907F709F509F50AF20AF209EF0AED08EC07EA07EA07EA08EB08ED06F105F603F900FDFFFFFE00FD02FD05FB07FB0BFB0FFA12FA14FA17F919FA19FC18FF150012030E040B0308040504040403060006FF07FC07FA07F807F506F405F206F107F106F006F205F403F702FA00FCFFFFFF02FE04FE08FD0AFC0DFA0EFB0EFB0FFD0EFF0D010B02090407040505030502060107FF07FD09FB09F80AF708F508F506F307F305F306F405F405F604F902FB01FE00FFFF02FF04FF07FE09FD0AFD0CFD0BFD0CFF0AFF0A00090108030503040503050108FE08FD0AFA0BF90CF60BF60BF30AF309F308F208F408F607F706FA04FD01FE0000FF03FD04FD08FC0AFC0BFB0DFB0CFB0DFB0EFC0DFE0C000B0409060709050C020D0010FD11FA12F714F713F412F410F20BF109F206F203F400F8FEFAFCFFF802F507F30BF10EF111F212F712F910FE0E030B07080B060F03130016FD1AFA1BF71CF61AF618F414F610F60CF707FC02FE00000002000010005A031C0106FE10FD1BFC26F92DF831F733F534F734F832FA2FFA23FD0EFE0600FD0000000000000000000000000000000000000000000000000000000000000000000000";
//be sure to match SigCompressionMode, EncryptionMode, and AutoKey usage with your own captured signature
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM id=FORM1 method=post name=FORM1>
<p>
<INPUT id=SignBtn name=SignBtn type=button value="Bring Back Signature" language ="javascript" onclick=onBringBackSig()>
<INPUT id=button1 name=ClearBtn type=button value=Clear language ="javascript" onclick=onClear()>  
</p>
</FORM>
</BODY>
</HTML>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I did that but it doesn't work. What's the right thing to do?
Here is my jsFiddle example. this works fine:
<textarea name='awesome'>Default value</textarea>
You can use placeholder Attribute, which doesn't add a default value but might be what you are looking out for :
<textarea placeholder="this text will show in the textarea"></textarea>
Check it out here - http://jsfiddle.net/8DzCE/949/
Important Note ( As suggested by Jon Brave in the comments ) :
Placeholder Attribute does not set the value of a textarea. Rather "The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value" [and it disappears as soon as user clicks into the textarea]. It will never act as "the default value" for the control. If you want that, you must put the desired text inside the Here is the actual default value, as per other answers here
If you want to bring information from a database into a textarea tag for editing:
The input tag not to display data that occupy several lines: rows no work, tag input is one line.
<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->
The textarea tag has no value, but work fine with handlebars
<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>
Just in case if you are using Angular.js in your project (as I am) and have a ng-model set for your <textarea>, setting the default just inside like:
<textarea ng-model='foo'>Some default value</textarea>
...will not work!
You need to set the default value to the textarea's ng-model in the respective controller or use ng-init.
Example 1 (using ng-init):
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', [ '$scope', function($scope){
// your controller implementation here
}]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
</div>
</body>
</html>
Example 2 (without using ng-init):
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', [ '$scope', function($scope){
$scope.foo = 'Some default value';
}]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<textarea ng-model='foo'></textarea>
</div>
</body>
</html>
A few notes and clarifications:
placeholder='' inserts your text, but it is greyed out (in a tool-tip style format) and the moment the field is clicked, your text is replaced by an empty text field.
value='' is not a <textarea> attribute, and only works for <input> tags, ie, <input type='text'>, etc. I don't know why the creators of HTML5 decided not to incorporate that, but that's the way it is for now.
The best method for inserting text into <textarea> elements has been outlined correctly here as: <textarea> Desired text to be inserted into the field upon page load </textarea> When the user clicks the field, they can edit the
text and it remains in the field (unlike placeholder='').
Note: If you insert text between the <textarea> and </textarea> tags, you cannot use placeholder='' as it will be overwritten by your inserted text.
Also, this worked very well for me:
<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>
In this case, $_POST['encode'] came from this:
<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">
The PHP code was inserted between the and tags.
Placeholder cannot set the default value for text area. You can use
<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>
This is the tag if you are using it for database connection. You may use different syntax if you are using other languages than php.For php :
e.g.:
<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>
required command minimizes efforts needed to check empty fields using php.
You can use this.innerHTML.
<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>
When text area is focused, it basically makes the innerHTML of the textarea an empty string.
Please note that if you made changes to textarea, after it had rendered; You will get the updated value instead of the initialized value.
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#btnShow').click(function () {
alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
});
});
function updateAddress() {
$('#addressFieldName').val('District: Peshawar \n');
}
</script>
</head>
<body>
<?php
$address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
?>
<textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
<?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
<input type="button" id="btnShow" value='show' />
</body>
</html>
As you can see the value of textarea will be different than the text in between the opening and closing tag of concern textarea.
You can also add the "value" attribute and set that so something like so:
<textarea value="your value"> </textarea>