Please could you advise on the following:
I have a registration form, and within that a text area
<form id="register" name="register" method="post" action="register.php">
<textarea rows="5" id="bio" name="bio" method="post">Biographical information</textarea>
</form>
Using java script i have been trying to create an event handler for the onfocus and onblur events so the default text is removed on focus and restored on blur, as follows:
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
i thought by getting the element by id would work, but it doesn't seem to be. no other duplication of names/id exist.
Any help much appreciated.
Thanks guys
Use the placeholder attribute:
<textarea rows="5" id="bio" name="bio" method="post" placeholder="Biographical information"></textarea>
It's working fine, perhaps the issue is that the placeholder default is "Biographical Information" and the script is testing for "All about you". The change that you made as I was posting this is exactly what you needed.
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
http://jsfiddle.net/YeaTQ/1/
My educated guess is that you've placed your code as is right into a <script> tag inside <head> so when the script runs the form has not loaded yet.
Move your <script> below the form or wrap everything with window.onload:
window.onload = function(){
// Code goes here
};
You have two solutions:
In order to not use the javascript code you wrote, Use the following code:
<textarea cols="30" rows="5" id="bio" name="bio" onfocus="this.value = '' " onblur="this.value = 'All about you'">Biographical information</textarea>
I think the javascript code is located before control (in the header I guess), Because of this, the onfocus and onblur properties are not initialized. You'll have to put the script at the end of the document (before the tag).
Also, you script is searching for another text ("All about you") and not the current text that's inside ("Biographical information"). Even if you insert the javascript code at the of the document, the code it will work.
Related
I am currently working on a project that I took over with the input reads from a barcode, currently iam having trouble with my output giving me a fix value which the code reads from and does not read from the actual input.
below is the html code for the scanner. it reads fine
<div class="section" id="instruction-3">
<p>Otherwise, scan your code at the bottom, or manually type it in here:</p>
<span>
<input type="text" id="IC-input" name="IC" onclick="openKeyboard()" onkeyup="autofill(this.value)" placeholder="Enter your IC Number" required maxlength="9">
<label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>
</span>
</div>
follow by the javascript (which i suspect is where the problem lies but am not sure)
<script>
var NRIC = '{"NRIC":"0"}';
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
NRIC = '{"NRIC":"123456789"}';
//var IcNum = document.getElementById("IC-input").value;
//NRIC = NRIC.replace("0", IcNum);
document.getElementById("IC-input").value = "";
doWork(NRIC)
}
</script>
function doWork(NRIC) {
// ajax the JSON to the server
$.post("receiver", NRIC, function(){
});
// stop link reloading the page
function update() {
setInterval(function(){$.post("receiver", '{"NRIC":NRIC}', function(){});}, 900);
It keeps giving me the value inside NRIC = '{"NRIC":"123456789"}'; which is 123456789, i realize this might be a simple fix but i am still learning and am unsure.
thank you in advance.
If I correctly understanded you want to have in the obj the input value, so try this:
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
var IcNum = document.getElementById("IC-input").value;
NRIC.NRIC = IcNum;
doWork(NRIC)
}
Why quotes around an object?
var NRIC = {"NRIC": 0};
function theButtonIsPressed() {
NRIC = {"NRIC": 123456789};
doWork(NRIC)
}
all but I have solved the problem, it was my fault that I did not mention I wanted to transfer the data to another webpage, and the problem with that was that the data was not transferred over to the other html.
function autofill(value){
console.log("Autofill:"+value)
//console.log(9 digits);
button = document.getElementById("theButton");
if(value.length == 9){
console.log('form is ready to submit');
theButtonIsPressed(value);
}
}
function theButtonIsPressed(value){
closeKeyboard();
console.log('button clicked');
//NRIC = '{"NRIC":"123456789"}';
console.log(value)
doWork(value)
}
by doing this it read the value as accordingly from the input and worked after, sorry again for my confusing question and thanks to everyone who tried to help.
I'm trying to simply have a button update the contents of ah HTML textbox (on the client side).
Clicking the button fires the updateBox() method fine. Stepping through the code, I can see the text1.value field update fine but the text1 does not seem to get updated by changes to the dom.
Am I mistaken to think that you can do updates on the client side only by modifying dom data?
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
var text1 = document.getElementsByName('text1');
function updateBox() {
//text1.value = "22"; <----tried this way, no good either :(
text1.innerHTML = "99";
}
</script>
Few things:
onclick="updateBox" should be onclick="updateBox()"
var text1 = document.getElementsByName('text1'); should be var text1 = document.getElementsByName('text1')[0]; (note the [0])
text1.value = "22"; is the one to use
jsFiddle example
Try use below,
var text1 = document.getElementsByName('text1')[0];
function updateBox() {
text1.value= "99";
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
Thanks for everyone's responses.
With your advice I got the button to update. I appreciate the advice on how to implement the function correctly. This was just a test so I didn't pay much attention.
1) I had to use: onclick="updateBox" rather than "updateBox() in the button HTML because "updateBox" caused the event to fire with out clicking the button.
2) Big thanks for pointing out that I was referencing a collection instead of an item in the collection. Had to use: var tb1 = document.getElementsByName('tb1')[0];
3) For some reason the box would not update when I used:tb1.innerHTML = "99";
This worked: tb1.value = "99";
text1[0].innerHTML = "99"
Use innerHTML instead of value
try passing the variable to your function instead of declaring it outside of your function.
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
function updateBox(t,v) {
var tv = document.getElementsByName(t)[0];
tv.value = v;
}
</script>
I have been trying to change the height of textarea when the user hits enter so they do not have to scroll. i could mange it on IE and Chrome however i could not make it work on Firefox. Please have a look at my code. i am really new to this. it seems like it does not recognize event and i could not figure out a way around.
Here is my code:
<form id="blog-comment-form" method="post" action="index.php">
<textarea id="comment" name="b_com" onkeyup="showmsg()" placeholder="ADD YOUR COMMENT HERE"></textarea>
<input type="submit" name="submit" value="POST COMMENT"/>
</form>
i am calling the function from an external file.
And my javascript code:
function showmsg() {
if(!event){
event= window.event;}
if (event.keyCode==13) {
var a = document.getElementById("comment");
var b = document.getElementById("comment").style.scrollHeight;
a.style.height = ((a.scrollHeight)+6) + "px";
}else {
var a = document.getElementById("comment");
var b = document.getElementById("testthis").style.height;
a.style.height = ((a.scrollHeight)+6) + "px";
}
}
Thank You
Write this:
function showmsg(event) {
in place of:
function showmsg() {
AND
write this (in HTML markup):
onkeyup="showmsg(event)"
in place of:
onkeyup="showmsg()"
You need to add rows attribute to text area. That will help you to increase the height of textarea
Instead of using the onkeyup attribute you can listen to the keyup event in a different way, that will also create the event object for you:
document.getElementById('comment').addEventListener('keyup', showmsg);
A working example:
http://jsfiddle.net/rotev/FKDVD/1/
Tested on Firefox and Chrome.
There a couple of things wrong with your code.
On some browsers your event handling may not work correctly.
So firstly, you need to get the event from callback itself, and not use a global variable called event.
To resize the textarea you can use the properties cols and rows.
To handle the event, you can attach the callback in the following way:
function init(){
var e = document.getElementById("comment");
e.onkeyup = showmsg;
}
For more about event listener, check this out.
To resize the textarea you may use rows:
function showmsg(event) {
if (event.keyCode==13) {
var a = document.getElementById("comment");
a.rows++;
}
}
To call init you may associate it to the element body:
<body onload="init()">
The final code would look like:
<html>
<head>
<script>
function init(){
var e = document.getElementById("comment");
e.onkeyup = showmsg;
}
function showmsg(event) {
if (event.keyCode==13) {
var a = document.getElementById("comment");
a.rows++;
}
}
</script>
</head>
<body onload="init()">
<form id="blog-comment-form" method="post" action="index.php">
<textarea id="comment" name="b_com" placeholder="ADD YOUR COMMENT HERE"></textarea>
<input type="submit" name="submit" value="POST COMMENT"/>
</form>
</body>
</html>
I have code on my website that isn't working, and I haven't been able to figure out why...
Here is the code:
if (self.location.href == top.location.href) {
document.fastform.submit();
document.getElementById(fastform).submit();
}
Now if I put something other than a form submit into the if statement, it works just fine. It's just when I do the form submit code it never works...
Here is the form code:
<form id="fastform" name="fastform" ACTION="/amember.php">
<INPUT TYPE="text" NAME="myurl" ID="myurl">
<input type="submit" />
</form>
Thanks for the help guys!
So far none of the suggestions work, I have tried several different variations like putting quotes around the fastform in getelementbyid. Here is my entire javascript program:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
}
window.onload = geturl;
if (self.location.href == top.location.href) {
var f=document.forms.fastform; f.submit();
}
</script>
Thanks for the suggestions!
Okay, so using some of the suggested code here I got it working. The problem was the if statement was not being executed at the right time, I moved things around so that the if statement was executed LAST and everything started working. Here is the complete (functioning) code:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
getmeoutofhere()
}
window.onload = geturl;
function getmeoutofhere() {
if (self.location.href == top.location.href) {
document.getElementById('fastform').submit();
}
}
</script>
<form id="fastform" name="fastform" ACTION="/amember.php" style="visibility:hidden;">
<INPUT TYPE="text" NAME="myurl" ID="myurl" />
<input type="submit" />
</form>
You can use this in your function:
var f=document.forms.fastform;
f.submit();
and it's working completely fine
document.getElementById('fastform').submit();
OR
var frm = document.getElementById('fastform');
frm.submit();
I'm not sure if it's the problem, but there's certainly one problem with the line:
document.getElementById(fastform).submit();
The problem, I think, is that you're trying to get an element by its id, but getElementById() requires a quoted string, unless you've already assigned the string to the variable represented by fastform. Therefore it should be either:
document.getElementById('fastform').submit();
or:
var fastform = 'fastform';
document.getElementById(fastform).submit();
Further, you seem to be trying to work with the fastform variable before it seems to have been set, in the first line contained within the if statement:
document.fastform.submit();
I'd suggest amending your script a little, to be something like:
if (self.location.href == top.location.href) {
var fastform = document.getElementById('fastform');
fastform.submit();
}
References:
document.getElementById().
Afternoon all,
In need of some technical advice from the masters... I know the function to remove the default message on click from a form, but the problem that's occuring is that after a user has initially clicked in the message area (to remove the default), if they then click in the message area again, it removes what they've written!! I guess an example would be if they noticed a spelling mistake or need to change part of their message.
There must be a way to solve this?
The code for the text area is:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="this.value=''">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
What you probably want is this, right?
When the page first loads and there's no user-supplied value, the "Please use" message is shown.
When the textarea gets focus, the "Please use" message should go away. (Perhaps you want to wait until something is typed; whatever.)
When the textarea loses focus, if the user has left behind an empty <textarea> then the "Please use" message should come back.
When the form is submitted, something has to check to see if the <textarea> is still empty (showing the "Please use" message) and if so disable it or clear the value.
What I'd do is have the "focus" and "blur" handlers maintain a state indicator to explicitly track the state of the element, instead of relying on doing a text comparison to your "Please use" message. Exactly how you do that would depend on the way you're writing event handlers in general, but it might look like this:
function setupTextareaHandlers() {
var txta = document.getElementById("yourTextArea");
var empty = !txta.value;
txta.onfocus = function() {
if (empty) txta.value = '';
};
txta.onblur = function() {
if (!txta.value) {
empty = true;
txta.value = 'Please use ... ';
}
};
}
You would probably also set up your submit handler in there too.
After the initial onclick you will need to remove the onclick attribute from the textarea using something like this:
document.getElementById('message').onclick = null;
You could change the onclick to call a function that does the this.value = '' and then removes the onclick.
Edit:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="removeDefaultText(this)">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
<script type="text/javascript">
function removeDefaultText(el){
el.value='';
el.onclick=null;
}
</script>
a simple working script
<textarea name="message" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
Put anything for default value here
</textarea>
just lernaed a few minutes ago X)
Live example: http://jsfiddle.net/SRYLg/
Here is the jsfiddle
HTML:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9">default message</textarea>
JavaScript place within the <head> tag:
<script type="text/javascript">
var defaultMsg = document.getElementById("message").value;
function init() {
var mytextarea = document.getElementById('message');
mytextarea.onblur = function() {
if (this.value == '') this.value = defaultMsg;
}
mytextarea.onfocus = function() {
if (this.value == defaultMsg) this.value = '';
}
}
window.onload = init;
</script>
try this
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="javascript:if(this.value='default.value') this.value =''">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>