how to show text area on button click? - javascript

</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#popup").click(function(){
// pop up a text area and I want to store value of textarea in a variable.
});
});
</script>
</head>
<body>
<form>
<textarea rows="2" cols="20" id="area" style="display:none"></textarea>
<input type="submit" id="popup" value="OK">
</body>
</html>
How to POPUP a text area on a button click?

var textarea = $('#area');
$("#popup").click(function(){
// To show it
textarea.show();
});
// To get the value
var value = textarea.val();

In jquery you can use $("#area").show() to display the element.

If you're using jQuery, use the show method:
$('#area').show();
You can also control the speed of the animation:
$('#area').show("slow");
$('#area').show("fast");
Or you can specify an exact time in milliseconds. Here's the official documentation:
jQuery Show

Related

How to modify text when copyng to Clipboard using ZeroClipboard?

I'm trying to use zeroclipboard 2.2.0.
This example copies div content to the Clipboard on button click.
<html>
<head>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
</head>
<body>
<input id="textholder" value="some text" />
<button id="button1" data-clipboard-target="textholder">Copy from div to Clipboard</button>
<script>
var zeroClipboard = new ZeroClipboard();
zeroClipboard.clip(document.querySelector("#button1"));
</script>
</body>
</html>
How to modify copied text in order to get, for example, "some text [copied]" instead of just "some text" on paste?
You can use setText() function on your zeroClipboard, instead of just clipping the button. So you can create a variable where you get the text stored in your textfield and then modify it. This would be something like:
<html>
<head>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
</head>
<body>
<input id="textholder" value="some text" />
<button id="button1" data-clipboard-target="textholder">Copy from div to Clipboard</button>
<script>
var zeroClipboard = new ZeroClipboard();
var text = //select your textfield and add modifications to the text
zeroClipboard.setText(text);
zeroClipboard.clip(document.querySelector("#button1"));
</script>
</body>
</html>
Hope it helps =)

How Can I Transfer Text From Input Box to Text Area?

I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!

Prevent html input type file from showing open dialog

To make a long story short, I need to be able to prevent the default action from a input type="file". In other words I do not want to display the system's open dialog box when the user clicks on the "Browse" or "Choose File". I already have the replacement dialog working, but the system's open dialog box still appears.
Below is a sample of what I am currently trying to accomplish this. (PS: I am using Chrome 21)
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
event.stopPropagation(); // Doesn't work
return false; // Neither does this
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick();" />
</body>
</html>
Any ideas?
How about
<input type="file" onclick="return false" />
or if you need the file_onclick function
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function()
{
// Show custom dialog instead...
return false;
};
//-->
</script>
</head>
<body>
<input type="file" onclick="return file_onclick();" />
</body>
</html>
Got it. I needed to disable the tag and then use the setTimeout method to re-enable it.
<html>
<head>
<script type="text/javascript">
<!--
file_onclick = function(o)
{
// Show custom dialog instead...
o.disabled = true;
setTimeout(function() { o.disabled = false; }, 1);
};
//-->
</script>
</head>
<body>
<input type="file" onclick="javascript: file_onclick(this);" />
</body>
</html>

Updating image source with jQuery

So I'm trying to automatically update an image source using javascript but for some reason it won't work. The image is being retrieved from my php text generator (generates an image with text on it) the text is grabbed from a input box. I want it to automatically grab the text inside the inputbox then change the src of image to gen.php?text=Input_box_text_goes_here
here is my code:
<html>
<head>
<title>text generator</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script language=javascript type='text/javascript'>
setInterval(function () {
var str= document.form.letters.value;
$('#logo').src("gen.php?text="+str);
}, 10);
</script>
<img id="logo" name="logo" src="gen.php?text=default" />
<form name="form" action="">
Text: <input type="text" name="letters"/>
</form>
</body>
</html>
any help will be appreciated.
Change $('#logo').src("gen.php?text="+str); to $('#logo').attr("src", "gen.php?text="+str);.
try:
<script>
$(function(){
//reference the image
var img = $('#logo');
//use onkeyup instead of polling
$('input[name="letters"]').on('keyUp',function(){
//get the value every keystroke
var inputValue = $(this).val();
//apply the values to the image source
img.each(function(){
this.src = "gen.php?text="+inputValue;
});
});
});
</script>

Adding data dynamically to a HTML page

In a htmlpage using jQuery or JavaScript how can the following be achieved?
User types in a question in a textarea and press on enter button, then the same question should be displayed dynamically in the page below the textarea and the user can enter as many questions.
And when the user is done the page is submitted through a submit button.
Can you give a small hint of how this can be done?
Try this to get started :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#textareabutton').click(function(){
var q = $('#textarea').val(),
$p = $('<p>').html( q );
$('#questions').append( $p );
});
$('#submit').click(function(){
var tab;
tab = $('#questions p').serializeArray();
// now do something with $.ajax to submit the questions
$.post("myphp.php",tab,function(resp){
// what do I do with the server's reply ???
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<textarea id='textarea'></textarea>
<button type='button' id='textareabutton'>Add question</button>
<div id='questions'></div>
<button type='button' id='submit'>Submit questions</button>
</body>
</html>
Use the innerHTML property of a div to add the questions to.

Categories