Keyup function is not transferring data in the lower div - javascript

keeping it simple and short, this is my code and I want to have the text content from the text input field to be shown in another div(showcontent)..although no jQuery error is flagging in my firebug..but still it is not showing content in the lower div, let me know what I am doing wrong ?
Also let me know the correct function for this type of functionality if keyup is not appropriate for handling this?
<form>
<input type="text" name="usertext" placeholder="Enter text" id="usertext" />
</form>
<div id="showcontent"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#usertext').keyup(function(){
var mytext = jQuery('#usertext').text();
jQuery('#showcontent').html(mytext);
});
});
</script>
I tried jQuery('#usertext').on('keyup',function(){...}); but no help :(

There is proble in reading text from input box
use this
var mytext = jQuery('#usertext').val();

if u are using jquery to get the value of a textbox then u should always use val() method and if u want to get the text inside a span or a div u should use text() method..so u should write your code int the following way
$('#usertext').keyup(function(){
//B.T.W $(this) refers to the current element ie the textbox
$('#showcontent').text($(this).val());
});

Related

Live render of text in a textarea

I would like to make a textarea and a div near it similar to what you use in the "ask question" page here in stackoverflow.
You type a text in the textarea and the text is rendered live under the textarea.
I'd like to make this to convert "live" some codes like "a024" typed in the textarea to symbols in the div.
Do I need to use javascript to get this feature?
Thanks.
Yes. That was called DHTML for Dynamic HTML at the beginning of JavaScript.
You will have to use Javascript to create this behavior.
You can get the value of an element with something like:
var source = document.getElementById("sourceTextarea").value;
and set text in a destination element with something like:
document.getElementById("destinationDiv").innerText = "some text";
In your HTML you will have to use :
<textarea id="sourceTextarea"></textarea><div id="destinationDiv"></div>
You will definitely need Javascript to achieve this goal.
You can make use of the 'onkeyup' property of the textarea to bind a javascript function the keyup event.
Once you do this, you can process the texarea value to replace whatever you need to.
function updateMyDiv() {
var myTextarea = document.getElementById("myTextarea");
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myTextarea.value;
}
<html>
<body>
<textarea id="myTextarea" onkeyup="updateMyDiv()">
</textarea>
<div id="myDiv">
</div>
</body>
</html>

val() from textarea not selecting searched terms

The following var is only working in my script when the text is hard coded in the textarea (e.g. London):
script
var thought = $('textarea[name=search]').val(); //...used in object literal
html
<textarea rows="5" name="search" type="text" id="term">London</textarea>
I'd like to be able to type a search term into the textarea and search for it but it's not working?
I've tried all of the answers below with no luck!? I've therefore included the following in the object literal. It pulls the hard coded value from the textarea (like before) but it doesn't pull a value that is typed in the textarea normally? I thought this might be easier to resolve the problem (the feed not working when the search term is typed in)
search: $('textarea[name=search]').val(),
I'm following this tutorial below for a twitter feed with jquery but adding a textarea to search for terms,topics,hashtags etc is proving difficult to figure out.
Twitter Feed with Jquery linky
Do with keyup or change event of textarea
$("textarea[name='search']").keyup(function(e){
var currentText=this.value;
});
You have a couple options, either search using a click event on some button called Search, or use a change / keyup event to grab the new value each time the field is updated, and perform the search that way:
$("#term").keyup(function() {
console.log(this.value); //theres your value!
});
As stated before, if you use it like this, it will be stored in the thought var and you can call it from whatever function you're using.
Since your method calls it one time probably before you edit it.
At least that is what I'm guessing since your code is obviously not complete ;).
var thought = '';
$('textarea[name=search]').keyUp(function(){
thought = $(this).val();
});
Just add jquery and use below code.
<html>
<head>
//import jquery here
<script>
$(document)
.on("click", "#btn", function(event) {
var thought = $('textarea[name=search]').val();
alert(thought);
});
</script>
</head>
<body>
<textarea rows="5" name="search" type="text" id="term"></textarea>
<input type="button" id="btn" value="click me">
</body>

How to insert some values in all the html inputs of specific div, on page load?

I have multiple forms in a single page.
Every form is is in different <div>, I want to insert some values in html inputs, present in a specific <div>, Please tell what I am doing wrong?
function onLoadPopulateInputs(){
var digits = getDateTimeOnLoad();
console.log("DT "+digits)
$('.input').value = digits #I think here is someting wrong!!!
}
google.setOnLoadCallback(onLoadPopulateInputs);
My Input looks like this:
<input size="16" type="text" readonly>
$('#yourDiv > input').val(digits)
your selector is borked
function onLoadPopulateInputs(){
var digits = getDateTimeOnLoad();
console.log("DT "+digits);
var $yourDiv = $('#yourDiv');
$yourDiv.find('input').val(digits);
}
google.setOnLoadCallback(onLoadPopulateInputs);
I would add a class for div containing 'forms' :
<div class="formDiv">
<input />
....
</div>
<div class="formDiv">
<input />
....
</div>
JS
$('.formDiv').each(function(){
var $form = $(this);
$form.find('input').each(function(){
$(this).val(someValue);
});
});
Usage exemple http://jsfiddle.net/techunter/EzWpu/
Why this instead of just $('input') or $('#myDiv input') like proposed by other?
Well because here you can manage context and control everything. also you said you have multiple forms inside multiple div : "multiple" == make it generic and use class not id. If you need to edit a specific value maybe consider faster selection using ID or $('#myDiv input[name="myInputName"]) or equivalent
You need to use .val
$('.input').val(digits);
give your specific div an id and call an id selector..
function onLoadPopulateInputs(){
var digits = getDateTimeOnLoad();
console.log("DT "+digits)
$('#divID input').val(digits);
}
jquery method of setting a value of input is .val() and not .value

How to check input tag have only tag(<br/>) inside as value using jQuery

Check input tag which have value only as <br/> tag inside as value using jQuery
I am using an htmlEditor in my project, sometimes user just press enter key only in textarea field. It will get as <br/><br/><br/><br/> as value when saving.
I want to avoid this tags when saving.
How to validate this in jquery ?
If any other characters like <br/>Just <br/> Example <br/> is present then I want to save it with break tag itself.
using a regex like this would help.
/^(\<br\/>)+$/.test($("textarea").val());
Clean it like this:
// Get the HTML and remove <br /> variants
var htmlCleaned = $('#MyTextArea').val().replace(/<br\s?\/?>/, '');
Refer LIVE DEMO
var divTag = $("div");
var nDivTag = $(divTag[0].outerHTML);
$("br", nDivTag).remove();
alert(nDivTag.html());

Javascript document.getElementById("id").value returning null instead of empty string when the element is an empty text box

I have a text box element whose value I am trying to access using document.getElementById("id-name").value. I find that the call is returning a null instead of empty string. The data-type of the returned value is still string. Is null a string value?
<input type="text" value="" id="mytext"> is the textbox whose value I am trying to fetch using var mytextvalue = document.getElementById("mytext").value;
Posting your HTML might help a bit. Instead, you can get the element first and then check if it is null or not and then ask for its value rather than just asking for the value directly without knowing if the element is visible on the HTML or not.
element1 = document.getElementById(id);
if(element1 != null)
{
//code to set the value variable.
}
fyi, this can happen if you are using the html type="number" attribute on your input tag. Entering a non-number will clear it before your script knows what's going on.
For your code
var mytextvalue = document.getElementById("mytext");
mytextvalue will contain null if you have a document.write() statement before this code. So remove the document.write statement and you should get a proper text object in the variable mytextvalue.
This is caused by document.write changing the document.
It seems that you've omitted the value attribute in HTML markup.
Add it there as <input value="" ... >.
Please check this fiddle and let me know if you get an alert of null value. I have copied your code there and added a couple of alerts. Just like others, I also dont see a null being returned, I get an empty string. Which browser are you using?
This demo is returning correctly for me in Chrome 14, FF3 and FF5 (with Firebug):
var mytextvalue = document.getElementById("mytext").value;
console.log(mytextvalue == ''); // true
console.log(mytextvalue == null); // false
and changing the console.log to alert, I still get the desired output in IE6.
I think the textbox you are trying to access is not yet loaded onto the page at the time your javascript is being executed.
ie., For the Javascript to be able to read the textbox from the DOM of the page, the textbox must be available as an element. If the javascript is getting called before the textbox is written onto the page, the textbox will not be visible and so NULL is returned.
try this...
<script type="text/javascript">
function test(){
var av=document.getElementById("mytext").value;
alert(av);
}
</script>
<input type="text" value="" id="mytext">
<input type="button" onclick="test()" value="go" />
if you are using external js file add <script src="fileName.js"></script> at the end before closing the </html> tag. or place <script> at the end before closing html tag .

Categories