Please check my code below. I want to display input characters number real time using jquery javascript. But problem is when i am doing it with "textarea" it works but when i do same with normal input type text its not work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<!-- Works -->
<!-- <textarea></textarea>
<span id="characters"><span>
<script type='text/javascript'>
$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script> -->
<!-- Not works -->
<input type="text" name="name">
<span id="characters"><span>
<script type='text/javascript'>
$('text').keyup(updateCount);
$('text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
</body>
</html>
Here is a working fiddle with combining your two events keyup and keydown into one line :-)
Your selector was wrong, text doesn't exist. So I call input[name="name"] instead to get the input by your name value:
$('input[name="name"]').on('keyup keydown', updateCount);
function updateCount() {
$('#characters').text($(this).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>
$("input").keyup(function(){
$("#characters").text($(this).val().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>
With "textarea" version you are selecting "textarea" by $('textarea').keyup(updateCount) and
$('textarea').keydown(updateCount) nicely but with text input you are doing wrong to select input text.
I have fix it by placing a id called "foo" on input text. This should be working now.
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<input type="text" id="foo" name="">
<span id="characters"><span>
<script type='text/javascript'>
$('#foo').keyup(updateCount);
$('#foo').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
If you want to get an input with the type text you must use a selector like this
$('input[type="text"]').keyup(updateCount);
$('input[type="text"]').keydown(updateCount);
Here is a list of all jQuery selectors
You are not selecting the input field here.
Try the following
$('input').keyup(updateCount);
$('input').keydown(updateCount);
Here you go with a solution https://jsfiddle.net/mLb41vpo/
$('input[type="text"]').keyup(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="">
<span id="characters"><span>
Mistake was $('text').keyup(updateCount);, you can refer input textbox using 'text'.
It should be $('input').keyup(updateCount);
Everything is correct in your code, you just need to add ":" beore your type. This will make it identify, it is input type.
Example:
<script type='text/javascript'>
$(':text').keyup(updateCount);
$(':text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
I changed your script only. Just find the change, you will get it.
Related
Anyone know how to copy the text of one div into another?
My situation is that I want to make a textbox that can have information typed into it and then show up in a div.
this is my code:
$("#title").text() = $("#t").text();
"#t" is my textbox and "#title" is the div.
The answer can be in javascript or jquery I don't mind. However I'd prefer jquery.
You can easily done it like this by handling 'onkeyup' event of the input text.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<input type="text" id="txt1"/>
</div>
<div>
<p id="typed-result"></p>
</div>
<script>
$(document).ready(function(){
$('#txt1').on('keyup',function(){
var result = $(this).val();
$('#typed-result').text(result);
});
});
</script>
</body>
</html>
You could try the following:
$("#title").text($("#t").val());
$(function(){
$("#copyBtn").on("click", function(){
$("#first").text($("#txtBox").val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">This is the div.</div>
<input type="text" placeholder="enter value" id="txtBox"/>
<input type="button" value="Copy text box value to div" id="copyBtn"/>
You can do this with
$('#getDiv').text($(this).val());
Try with this working example , just type something in textarea
$(function(){
$('#getText').on('keyup', function() {
$('#getDiv').text($(this).val());
})
});
<textarea id="getText"></textarea>
<div id="getDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You can use the keyup JavaScript event, Something like this -
HTML -
<body>
<input type='text' id='one'>
<div id='two'></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
jQuery -
$(document).ready(function() {
$('#one').on('keyup', function() {
$('#two').text($(this).val());
})
})
You can use this
$("#t").keyup(function(){
$("#title").text($("#t").value());
}
$('#txtArea').keyup(function(event) {
event.preventDefault();
$('.txt-block').text($("#txtArea").val());
// #txtArea is ur textarea box where you type text.
// .txt-block is your div where textarea Text shows.
});
I need to do the following:
On click I need to set a javascript variable
I then to set the value of an input field that is on a PREVIOUS spot on the same page to the value of this variable I set.
This is my code for the button.
<button onclick="close_modal()">close</button>
<script type="text/javascript" language="javascript">
function close_modal() {
var userID = <?php echo 1; ?>;
$('#modal-findAsset').modal('hide');
}
</script>
How can I do this?
Use this :
<button onclick="close_modal()">close</button>
<script type="text/javascript" language="javascript">
function close_modal() {
var userID = <?php echo 1; ?>;
$('#modal-findAsset').modal('hide');
$('#random').val(userID);//set input value here.
}
</script>
if the HTML is like this:
<input type="text">
<button onclick="close_modal(this)">close</button>
Then the JS should be:
function close_modal(button) {
var userID = <?php echo 1; ?>;
$('#modal-findAsset').modal('hide');
$(button).prev().val(userId);
}
I just mean the input field is above the button
If it's in the same parent element as the button, then the minimal-mod way to do it is:
<button onclick="close_modal(this)">close</button>
<script type="text/javascript" language="javascript">
function close_modal(btn) {
var variable = $(btn).prevAll("input").first().val();
var userID = <?php echo 1; ?>;
$('#modal-findAsset').modal('hide');
}
</script>
Note I'm passing this into close_modal as btn so that we have context, and then using $(btn).prevAll("input").first().val(), which does this:
Gets a jQuery wrapper for the button
Uses prevAll to find all previous sibling input elements (e.g., in the same parent)
Uses first to take the one closest to the button
Uses val to get the value
But there's probably a better way of structuring the HTML, and therefore the code, to make this less fragile.
For example: Live Copy (source)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div id="container">
<div class="row">
<label>A:
<input type="text" value="a">
</label>
<button>Click Me</button>
</div>
<div class="row">
<label>B:
<input type="text" value="b">
</label>
<button>Click Me</button>
</div class="row">
<div>
<label>C:
<input type="text" value="c">
</label>
<button>Click Me</button>
</div>
</div>
<script>
(function() {
"use strict";
$("#container").on("click", "button", function() {
// Get the input value related to this row
alert($(this).closest(".row").find("input").val());
});
})();
</script>
</body>
</html>
Obviously, the markup appropriate to what you're doing will probably not be just nested div elements (or maybe it would be), but...
<body>
<script type="text/javascript">
var a="sreedhar";
<input type="text" value="abc">
</script>
</body>
It gives the syntax error.
can't we use "html tags" directly in "javascript".
No, you can't use them directly in JavaScript.
However you may treat them as strings:
var str = '<input type="text" value="abc">';
or as DOM elements:
var input = document.createElement('input');
input.type = 'text';
input.value = 'abc';
And then append to the markup, e.g. document.body.appendChild(input);.
Usually a well formated hmtl with javascript looks like this.
<HTML>
<HEAD>
<script type="text/javascript">
var a="sreedhar";
</script>
</HEAD>
<BODY>
<input type="text" value="abc">
</BODY>
</HTML>
If you want to generate some html with javascript then assign it as a string to some variable.
For example you have a div having id='abc' and you want to generate a textbox in this div then you need to do like this
<script type="text/javascript">
var textbox = '<input type="text" value="abc">';
$('#abc').append(textbox);
</script>
Maybe you want this:
<script type="text/javascript">
var a="sreedhar";
document.write('<input type="text" value="abc">');
</script>
</BODY>
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//put javascript function here
</script>
</head>
<body>
<input type="text" value="abc">
</body>
</html>
You can use html element inside the javascript using element id.
<head>
<script type="javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
</head>
<body>
<form id="form1" action="http://google.com">
<input id="textField1" type="text" value="0" align="right" size="13"/><br>
<input id="button1" type="button" value="1" onclick="display()">
</form>
</body>
but the value of textfield is not changing.
Any Ideas what am i doing wrong ??
try
<script type="text/javascript">
instead of
<script type="javascript">
. I believe the latter is not a valid syntax.
Removing the type attribute entirely works as well:
<script>
Your line
document.getElementById("textField1").value = "abc";
is correct, try
<head>
<script>
function display() {
document.getElementById("textField1").value = "abc";
}
</script>
</head>
<body>
<form id="form1" action="http://google.com">
<input id="textField1" type="text" size="13" value="clear" /><br>
<input type="button" onclick="display()">
</form>
</body>
Remove the type from your script tag. It's incorrect and making the browser not treat the script contents as JavaScript. Here it is not working, and here it is working (with the type="javascript" removed).
It has to be
<script type="text/javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
and not
<script type="javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
In case the text field is not having id attribute and having name attribute then,
use
document.getElementsByName("name")[0].value="ert";
getElementsByName() returns an array of objects with that specific name,that's why we are using the index 0.
There is nothing wrong with your code, it works fine in this fiddle.
I only speculate, but you could try to either delete the type attribute of the script-tag, or change it to type="text/javascript" which would be the proper type to use. If you don't specify it, the browser will consider it as JavaScript by default.
It's actually correct, but if it doesn't work try like this:
document.getElementById("textfield1").innerHtml = "ABC";
<script type="text/javascript">
var p = s.getMaximum();
</script>
<form action="/cgi-bin/Lib.exe" method="POST" name="checks" ID="Form1">
<INPUT TYPE="text" NAME="inputbox" VALUE="VAR P FROM JAVA SCRIPT HERE?" ID="Text1"><P></form>
Possible to pass the javascript value 'p' as the value of input form?
Thanks.
You can use javascript to set the value of that element to p.
<script type="text/javascript">
document.getElementById("Text1").value = p;
</script>
document.getElementById('Text1').value = p;
You want to read about the Javascript DOM.
Start with the following:
http://www.w3schools.com/htmldom/dom_obj_form.asp
Specifically you're looking to manipulate document.checks.inputbox.value
Edit: Page removed. Answer can be found here now:
http://www.w3schools.com/jsref/coll_doc_forms.asp
Using Javascript:
<script type="text/javascript">
document.getElementById("Text1").value = p;
</script>
Using jQuery:
<script type="text/javascript">
$("#Text1").val(p);
</script>