I would like to have a button to the right of a textbox which when clicked would populate the textbox with a message.
I am assuming I can accomplish this with Javascript but the "onclick" method doesn't seem to work for me. I am probably doing it wrong.
Using JavaScript and HTML :
I am guessing what you need is, may be as follow:
<!DOCTYPE html>
<html>
<head>
<script>
function ButtonClick_Test()
{
document.getElementById("result").value= ' your text here';
}
</script>
</head>
<body>
<form>
Click Here:<br/>
<input type="button" value="Click Here" name="no" onclick="ButtonClick_Test()">
<input type="text" id="result" size="20">
</form>
</body>
</html>
Assuming you are using jQuery(http://jquery.com/):
$('#buttonID').click(function() {
$('#textareaID').val('Your text goes here');
}
Related
I want to make a text to show and hide inside an input box I made.
I know that it's supposed to be like this:
onmouseover=this.style.display="block";
onmouseout=this.style.display="none";
I just don't know where to put it. Should I put it in the <input>?
Here is my HTML code:
<html>
<head>
<link rel="stylesheet" href="CSS.css"/>
<script src="JavaScript.js"></script>
</head>
<body onload= "load();">
<span id="imvite">Invite:</span>
<input /><br></br>
<span id="time">Time:</span>
<input /><br></br>
<span id="place">Place:</span>
<input /><br></br>
</body>
</html>
When I wrote it after the <input> the text was showing all the time, and it was not even in the textbox.
Like this:
<span id="imvite">Invite:</span>
<input /><br></br>
<span id="time">Time:</span>
<input /><br></br>
<span id="place">Place:</span>
<input onmouseover=this.style.display="block"; my text here />
How can I make a text to appear and disappear inside my textbox with those functions?
I hope I'm clear, thanks for the help.
Try this:
<input
onmouseover="this.value=this.getAttribute('data-value');"
data-value="text"
onmouseout="this.value='';"
/>
Is this what you are trying to do?
Fiddle: http://jsfiddle.net/AtheistP3ace/8nL9gr1h/
HTML:
<input onmouseover="this.value='my text here';" onmouseout="this.value='';" />
<input
onmouseover="this.value=this.getAttribute('data-value');"
data-value="text"
onmouseout="this.value='';"
/>
Works, sort of, the problem is that when you mouse out, anything you typed is blanked and when you mouse over again, it just displays text. Another answer (which may not work if you want everything to be contained in the one HTML Document is to add a Class to you inputs and give it a :hover in a CSS file and link that file in the Head of your HTML, putting any changes to the styling in your CSS.
I am trying to get a fairly simple bit of code to work. The essence of it is just to take user input, append it on to a source URL, and then use a script to display the appropriate tumblr feed.
I have spent some time on this, and I can't get my head around how javascript works enough to do something like this.
This is what I have so far:
<html>
<body>
<form>
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src= username + ".tumblr.com/js"></script>
</body>
</html>
Thanks in advance.
The way that JavaScript works, is you need an event to attach the running of your code. In your case, the form's submit event. Additionally, you cannot compute values within the HTML as you're attempting; you'll need code to manipulate the HTML (the DOM). Here's a sample of how you can do it:
<html>
<body>
<form onSubmit="handleSubmit(event)">
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script id="theScript" type="text/javascript"></script>
<script>
function handleSubmit(e) {
e.preventDefault(); // Keep the form from actually submitting
var username = document.querySelector('[name="username"]').value;
document.getElementById('theScript').src = username + '.tumblr.com/js';
}
</script>
</body>
</html>
Because the JS file that is on username.tumblr.com uses document.write, I think it'd be better to just load the actual url of the user in an iframe, as this wouldn't require you to refresh the page, while creating a mini page inside your page.
This won't work on the snippet tool here or on JSFiddle, but I've tested it on a web server:
<html>
<body>
<script>
function getUN() {
var username = document.getElementsByName("username")[0].value;
document.getElementById("tumblrframe").src = "http://" + username + ".tumblr.com";
}
</script>
Tumblr Username:
<br>
<input type="text" name="username">
<br>
<br>
<button onclick="getUN()">Submit</button>
<br/>
<br/>
<iframe id="tumblrframe" width="80%" height="600px"></iframe>
</body>
</html>
In text box because of button click event text is transfer to text box, this text hold its place after also another click event which pass new value to text box. The text box hold the value for multiple click event.
in each click function,you should get the text box's value,and then add the new value to it .Then put the "sum" to the text box.
I can't really understand what you mean, but I made two codes that are quite simple and should get you to understand how this works approx.
You can achieve what you mean with createTextNode and appendChild.
Hope this helps. Happy coding.
JS FIDDLE
<html>
<head>
<title>text</title>
<script type="text/javascript">
function trantxt(input) {
var obj=document.getElementById(input);
var txt=document.getElementById('text1').value;
var txtarea=document.createTextNode(txt);
obj.appendChild(txtarea);
}
function addtxt(input) {
var obj=document.getElementById(input);
var txt=document.createTextNode("blah blah");
obj.appendChild(txt);
}
</script>
</head>
<body>
<h1>Case 1: Transfer text from textbox to textarea.</h1>
<input type="text" id="text1" placeholder="Write here" />
<input type="button" value="Transfer" onclick="trantxt('textarea1')">
<textarea id="textarea1" placeholder="Content comes here"></textarea>
<h1>
Or... if you mean this
</h1>
<textarea id="textarea2"></textarea>
<br><input type="button" value="Write blah blah" onclick="addtxt('textarea2')">
</body>
</html>
When my JSP page gets loaded, the button (actually an image button with onfocus property) gets focused. So, on pressing enter it gets clicked. It is a small, part of a bigger problem. How can I make the button lose focus when page is loaded?
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
Both the alert box for nothing and not done has been shown.
You can use the autofocus HTML attribute (specification reference) to automatically focus a different element on page load. I'm not sure how this would get applied with JSP, however in pure HTML this would be something along the lines of:
<button>My Button</button>
<button autofocus>My Other Button</button>
Here's a JSFiddle demo.
I would modify this line :
<input type="text" src='Create.gif' >
to
<input type="text" id="textbox" src='Create.gif' >
<script>
//$('#textbox').focus() //If your using jQuery
document.getElementById('textbox').focus()
</script>
This would shift the focus to the text box rather than the image button
Give your textbox an id and use that id to set the focus to that element.
document.getElementById('textbox').focus()
Probably simple but it's confusing me at the moment.
If you look at this jsfiddle: fiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='adminForm'>
<input type="text" />
<!--<input type="password" />-->
</form>
<script>
$(document).ready( function(){
$("#adminForm").submit(function() {
alert('submit');
return false;
});
});
</script>
</body>
</html>
If i press ENTER to submit the form, it works fine and i get the alert. But if I then uncomment the other input and try it again, nothing happens. Doesn't make any difference which input is commented, it seems that in IE and Firefox it is only working when there is 1 input in the form instead of multiple ones... Whereas in Opera it works fine with multiple inputs.
Any clues?
Cheers.
well, yeah you need submit button but if you don't want to show it you can either
<input type="submit" style="visibility:hidden;" />
or
<input type="submit" style="position:absolute;left:-9999px;width:1px;height:1px;" />