I am creating an instant messenger using jquery and am having trouble taking the message typed into the message field after clicking the "send" button
I have the html
<body>
<div class="main-window">
<div class="chat-screen"></div>
<div class="bottom-wrapper">
<input class="text-bar"></input>
<input type="button" value="Send"class="send-btn">Send</input>
</div>
</div>
<body>
and I have tried to append it using this jquery
$('.send-btn').click(function() {
$(".text-bar").text().appendTo(".chat-screen");
});
But it doesn't seem to work. Can someone please point me in the right direction?
JSFiddle
you need .val()
change
$(".text-bar").text()
to
$(".text-bar").val()
you code becomes
Fiddle DEMO
use .append()
$('.send-btn').click(function () {
$(".chat-screen").append($(".text-bar").val());
});
Clear Textbox and new chat in new line.
$(document).ready(function () {
var chat_screen = $(".chat-screen");
var text_bar = $(".text-bar")
$('.send-btn').click(function () {
chat_screen.append(text_bar.val() + '<br/>');
text_bar.val('');
});
});
Updated Fiddle DEMO
The .text() (and correct .val()) functions return strings, not jQuery objects, and therefore don't have the appendTo() function available on them. You'll need to do this instead:
$('.chat-screen').append($('.text-bar').val());
Also make sure that, if the script is in the <head> of your HTML page, or comes before the actual HTML of the elements, you wrap it in a DOM ready handler:
$(document).ready(function() {
$('.send-btn').click(function(){
$('.chat-screen').append($('.text-bar').val());
});
});
And, of course, check that jQuery is being loaded correctly (it wasn't in your jsFiddle at all).
Since this is going to (probably) be running a lot of times, you'd want to cache the selectors for the chat screen and the text input, like so:
$(document).ready(function() {
var $chatscreen = $('.chat-screen'),
$textbar = $('.text-bar');
$('.send-btn').click(function(){
$chatscreen.append($textbar.val());
$textbar.val('');
});
});
Updated jsFiddle
Here is you fiddle updates: jsfiddle
Use val() instead text()
$('.send-btn').click(function(){
//$(".text-bar").val().appendTo(".chat-screen");
$(".chat-screen").append($(".text-bar").val())
$(".chat-screen").append('<br />')
});
please see http://jsfiddle.net/K95P3/15/
Several issues:
Add space between value and class attributes in input
Change .text() to .val() - inputs don't have text nodes, just values
Use $('.chat-screen').append($(".text-bar").val());
Make sure you have jQuery included
See updated fiddle http://jsfiddle.net/K95P3/11/
Try this.
$('.send-btn').click(function(){
$('.chat-screen').append($(".text-bar").val());
});
Actually, you really should append an html tag, not just text. I mean, you could, but shouldn't.
What i would recommend is this:
Create a base container for a message like:
<div class="message-container" style="display:none;">
<span class="message"> </span>
</div>
You then clone this container, stuff it the value of the input in the chat and append it to the chat screen.
The code could be something like:
$('.send-btn').click(function(){
var container = $('.message-container:hidden').clone(true).show();
container.find('.message').text($(".text-bar").val());
container.appendTo($('.chat-screen'));
});
Append text and dropdown value sametime
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
//var x=$("#cars option:selected").text();
//var y=$("#bus").val();
//alert(''+x+' '+y+'');
$(".chat-screen2").append($("#cars").val()+'<br/>');
$(".chat-screen").append($("#bus").val()+'<br/>');
$("#bus").val('');
});
});
</script>
</head>
<body>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input id="bus" type="text">
<button type="submit">submit</button>
<br><br>
<div class="chat-screen2" style="float:left;"></div>
<div class="chat-screen" style="float:left;margin-left:10px;"></div>
</body>
</html>
Related
I tried to select all options of multi-slect flower[ ] using javascript but nothing happened when I click on submit, please tell what wrong ?
<html>
<head>
<script language="javascript" type="text/javascript">
$("#submit").click(function() {
$('#flower option').each(function() {
$(this).attr('selected', true);
});
});
</script>
</head>
<body>
<form method="Get" action="#">
<select name="flower[ ]" id="flower" multiple>
<option value="flower">FLOWER</option>
<option value="rose">ROSE</option>
<option value="lilly">LILLY</option>
<option value="jasmine">JASMINE</option>
<option value="lotus">LOTUS</option>
<option value="tulips">TULIPS</option>
</select>
<input type="submit" id="submit" name="submit" value="submit">
</form>
</body>
</html>
You must put your javscript click function inside document ready function. Like this
$(document).ready(function(){
$("#submit").click(function(e){
$('#flower option').each(function () {
$(this).attr('selected', true);
});
});
});
Cheers.. :)
You are missing:
$(document).ready(function(){
above your script and then close it with:
});
but as mentioned above:
$('#flower option').attr('selected', true);
Should do the trick as well
$('#flower option').attr('selected', true);
You've already selected all of the options so the each loop is unnecessary.
Put your javascript on the end of body or use $(document).ready(). It must be executed when form is already rendered.
You can do it with .val(). $('#flower').val(ARRAY OF VALUES), i.e.
$('#flower').val(['lilly', 'lotus']);
For selecting all you can use
$('#flower').val($('#flower option').map(function(){
return $(this).attr('value');
}));
You do not specify in your question, but it looks like you are using jQuery. If you do, first make sure that you have placed your code inside of a $(document).ready(function(){...}) block so that you are waiting until the DOM is ready for you to begin attaching event listeners. Also, you shouldn't need the .each(function(){...}) call. Finally, to ensure cross-browser compatibility and to conform to standards, set the selected attribute to 'selected' rather than true. See code below.
$(document).ready(function() {
$('#submit').click(function() {
$('#flower option').attr('selected', 'selected');
});
});
EDIT
Actually, it's better to use jQuery's .prop() here, since using .attr() only is only to be used for setting the option's initial state. So...
$(document).ready(function() {
$('#submit').click(function() {
$('#flower option').prop('selected', true);
});
});
More info on this can be found in this question...
Jquery select all values in a multiselect dropdown
I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});
I am trying to make a similar bit of code like at the bottom of this page to leave a comment. I have the basic code but the output does not register new lines (or HTML, but that isn't important). I have the function below called on key-up on the text field. Any help would be greatly appreciated. Thanks
Here is the whole page (Now working)
<html>
<body>
<form>
<textarea id="text" onkeyup="outputText()"></textarea>
</form>
<div id="outputtext" style="width:500px;">
</div>
</body>
<script type="text/javascript">
function outputText()
{
var text = document.getElementById('text').innerHTML;
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2');
}
</script>
</html>
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2')
Have you tried getting the textarea contents as
var text = document.getElementById('text').value; instead?
I think it's good for you to take a look at how tools like jQuery can make your live easier in this kind of cases. Your particular question is a bit unclear however...can you give us more details?
You can use the <pre> (preformatted) tag so that html and carriage returns are represented without doctoring the field input
html:
<input id="text" type="text" />
<pre id="outputtext"></pre>
jQuery:
$(document).ready(function () {
$('#text').keyup(function () {
$('#outputtext').html($(this).val());
});
});
Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();
I want to change the value of an element with javascript.
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").val("very happy cow");
</script>
Use the text method instead:
$("#mixui_title").text("very happy cow");
Try html() function instead :
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").html("very happy cow");
</script>
2 Things:
1- Usualy, javascript is placed at the top of the page. If you do this in the future, you'll need to need to enclose it in the jQuery equivalent of document.ready:
$(function() {
// do stuff
});
This tells jQuery to run the function as soon as the document is ready.
2- For any value between two opening/closing tags, you need to use the jQuery method .html("enter text to change") while the .val() method is used to change the value of any control with the attribute value="" like inputs:
<input type="submit value="This will be changed with val()" />
The following should work fine. Note its wrapped in $(function() { }); and is using the .html() property and is placed at the top of the page.
<script type="text/javascript">
$(function(){
$("#mixui_title").html("very happy cow");
});
</script>
<span id="mixui_title">Angry cow sound?</span>
It's not enclosed by the
$(document).ready(function(){
//your code goes here
});