Script counting characters in a text box using Javascript not working? - javascript

I need to enforce character count limit in my application. I found some JavaScripts from web but they are not working, Here is my code. I would be very thankful if someone can kindly see the code & correct whats causing problem.
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{ $("#update").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 140);
var count= 140 - box.length;
if(box.length <= 140)
{
$('#count').html(count);
}
else
{
alert('Character Limit Exceeded!');
return false;
}
});});
</script>
</HEAD>
<BODY>
<textarea id="update" rows="10" cols="3"></textarea>
<div align="left" id="character-count">
<div id="count">140</div>
</div>
</BODY>
</HTML>

You have a space in between http://ajax.googleapis.com/ and ajax

Your code will not handle someone keeping a key pressed (as it will not fire keyup events until you release the key). It will also not handle pasting text with more chars than the allowed number..
Have a look at this plugin http://remysharp.com/2008/06/30/maxlength-plugin/ which handles most cases..

Script of counting characters in a text box/textarea using Javascript
<script type="text/javascript">
var count = "175";
function limiter() {
var tex = document.myform.comment.value;
var len = tex.length;
if(len > count) {
tex = tex.substring(0,count);
document.myform.comment.value =tex;
return false;
}
document.myform.limit.value = count-len;
}
</script>
<body>
<form name="myform" METHOD=POST>
<textarea name=comment wrap=physical rows=3 cols=40 onkeyup=limiter()></textarea><br>
<script type="text/javascript">
document.write("<input type=text name=limit size=4 readonly value="+count+">");
</script>
</form>
</body>

Related

java script capitalize letters in a input form

Hey guys what am I doing wrong here?? I'm sorry if this has been posted before, but I couldn't find a good example with a form input.
Thank you.
I really don't understand why output.value.toUpperCase() doesn't work, or toUpperCase(output.value) wouldn't work.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">
</head>
<body>
<h1 id="title">Capitalize a String</h1>
<form>
<input type="text" id="entry" placeholder="Enter a string to be capitalized">
</form>
<h1 id="title">Output</h1>
<form>
<input type="text" id="output" placeholder="Output">
</form>
<div id="goBtn">
<h1 id="goBtnText">
GO
</h1>
</div>
</body>
</html>
var goBtn = document.getElementById('goBtn');
var entry = document.getElementById('entry');
var output = document.getElementById('output');
goBtn.addEventListener('click', capitalizeStr);
function capitalizeStr () {
output.value = entry.value;
return output.value.toUpperCase();
}
You will need to do
function capitalizeStr () {
output.value = entry.value.toUpperCase();
}
Calling output.value.toUpperCase() does not change the output.value property, it just returns a new string (and the value returned by an event listener is ignored).

passing variable without button onclick event

I am getting null value in variable k can anyone help me plz ..... It is taking the input of alert but not setting value to k can I perform the same without button or click event
<% // some jsp code
String key="some value";
if(key!= null)
{
%>
<html>
<head>
<script type="text/javascript">
var val = prompt("Please enter R for Read or W for Write", "");
document.getElementById("hid").value=val;
</script>
</head>
<body>
<input type="hidden" id="hid" name="hid" />
</body>
</html>
<%
}
String k=request.getParameter("hid");
key=key+k;
System.out.println(key);
%>
Just add a window.onload event handler
<% // some jsp code
String key="some value";
if(key!= null)
{
%>
<html>
<head>
<script type="text/javascript">
var val = prompt("Please enter R for Read or W for Write", "");
window.onload = function() {document.getElementById("hid").value=val; }
</script>
</head>
<body>
<input type="hidden" id="hid" name="hid" />
</body>
</html>
<%
}
String k=request.getParameter("hid");
key=key+k;
System.out.println(key);
%>
The Javascript is executing before the DOM is loaded, try either putting the code before the script (put script at base of body as recommended), or as stated use window.onload or jQuery $(function(){});

Show what the user typed in the body

I have a code and I want that after the user type something in the textfield and press enter, what he typed appears on the screen. But I'm not being able to do that, I'd like some help here.
<!DOCTYPE html>
<html>
<head>
<title>Tasks for the day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
alert("When you have finished your task you only have to click on it.");
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
$(document).keypress(function(e) {
if(e.which == 13) {
}
});
function showMsg(){
var userInput = document.getElementById('userInput').value;
document.getElementById('userMsg').innerHTML = userInput;
}
</script>
</head>
<body>
<h1>Tasks to do</h1>
<p>Type what you need to do:</p>
<input type="input" id="userInput" onkeyup=showMsg() value="" />
<p id="userMsg"></p>
</body>
</html>
it only adds one value to the screen, to put more than one, do I need
to create an array
You had the main components working. Namely, you were updating the screen. To have it update only on enter, simply put the code in the keypress handler
To append the value to the screen(in the case of more than one enter), concatenate the current innerHTML with the value
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
$('#userInput').keypress(function(e) {
if (e.which == 13) {
var userInput = document.getElementById('userInput').value;
var innerHTML = document.getElementById('userMsg').innerHTML;
innerHTML = innerHTML || '';
document.getElementById('userMsg').innerHTML += innerHTML + userInput;
}
});
<title>Tasks for the day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h1>Tasks to do</h1>
<p>Type what you need to do:</p>
<input type="input" id="userInput" onkeyup=showMsg() value="" />
<p id="userMsg"></p>

jQuery / JavaScript serialization empty string (not the no name error or disable error)

I´ve read a lot of post about jQuery serialize() but I cant get it to work with my form!
I works when I print out the form using html+php but not when I use javascript to print out the form. What am I missing?
I know there is a bunch of post about this but every one I´ve found is about ppl forgetting name="" or disabled the ( Try my code here: http://jsfiddle.net/ZBxkz/1/ )
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>MerBeer</title>
<!-- //jquery -->
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<!-- //Ajaxscript: -->
<script type="text/javascript">
$(document).ready(function () {
$("#knappen")
.delegate('button[name="minKnapp"]', "click", beer_insert);
$("#theForm")
.delegate('button[name="beer_form_submit"]', "click", serial);
function serial(){
var f = $('#beer_form'); // CHANGE THIS VALUE TO CHANGE FORM!! #beer_form and #testForm
var beerContainer = f.serialize();
alert (beerContainer);
}
function beer_insert() {
//hide first button
$('#dold').hide();
//Dynamically added form
$('#theForm').html('Test :<br><form name="beer_form" id="beer_form"><table id="beers">');
for (var i = 0; i < 1; i++){
$('#theForm').append('<tr><td><input type="text" name="beerCountry" id="beerNo_'+i+'_country" /></td></tr>');
}
$('#theForm').append('</table></form><br>');
$('#theForm').append('<button name="beer_form_submit">Second button</button><br>')
}
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- Form that works-->
<form id="testForm" name="testForm">
<table>
<?php
for($i = 0; $i < 3; $i++){
echo('<tr><td><input type="text" name="test" id="inget'.$i.'"/></td></tr>');
}
?>
<tr><td><input type="text" name="test" id="ingetA"/></td></tr>
<tr><td><input type="text" name="test" id="ingetB"/></td></tr>
</table>
</form>
<div id="theForm"></div>
<div id="knappen"><button id="dold" name="minKnapp">The Button</button></div>
</body>
I hope I got your question right, but probably you want this?: http://jsfiddle.net/jyM5Z/
Don't put your html together with many appends. Instead first build a complete html string and then add it to your container. This will not only make it much faster but will also protect you from unexpected behaviour because the browser parses your HTML fragment and changes it in order to make sense (like automatically close open tags).
You're not appending into your form, but rather you're appending after it. So when you call serialize, there's literally nothing to serialize.
// this creates the form
$('#theForm').html('Test :<br><form name="beer_form" id="beer_form"><table id="beers">');
// but these don't append INTO it
for (var i = 0; i < 1; i++){
$('#theForm')
.append('<tr><td><input type="text" name="beerCountry" id="beerNo_'+i+'_country" /></td></tr>');
}
$('#theForm').append('<button name="beer_form_submit">Second button</button><br>')
This is pretty much what you want your workflow to be:
// create my form
var my_dynamic_form = $('<form></form>');
// append to it
for (;;) {
my_dynamic_form.append('<input/>');
}
// append your form to the DOM
$('#my_form').append(my_dynamic_form);

Disable the text boxes

I am beginner to html. I have two text boxes say t1 and t2 If t1 is filled with some data then then other text box t2 should be disable. Please let me know hot to do it. Thanks in advance
Based on your simple scenario description, here's an implementation that works cross-browser and without any third-party javascript library:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t1.onchange = function(){
t2.disabled = t1.value.length > 0;
}
}
</script>
</head>
<body>
<form>
t1:<input type="text" id="t1" name="t1" /><br/>
t2:<input type="text" id="t2" name="t2" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
function verify(){
var t1 = document.getElementById ('first');
var t2 = document.getElementById ('second');
if (t1.value != '') {
t2.setAttribute('disabled','disabled');
return true;
}
if (t2.value != '') {
t1.setAttribute('disabled','disabled');
return true;
}
}
</script>
</head>
<body>
...
<input type="text" id="first" onblur="verify()">
<input type="text" id="second" onblur="verify()">
...
</body>
You can't achieve this with plain HTML.
Following the guidelines of progressive enhancement, you should first implement a server side check in whatever form handler you are using to process the submitted data.
Then you can consider adding JavaScript for a client side check. Something along the lines of:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disabling form controls</title>
</head>
<body>
<form id="myForm" action="http://example.com/">
<div>
<input name="t1">
<input name="t2">
</div>
</form>
<script type="text/javascript">
(function () {
var t1 = document.forms.myForm.elements.t1;
var t2 = document.forms.myForm.elements.t2;
var handler = function handler() {
t2.disabled = (t1.value !== "");
};
t1.onchange = handler;
}());
</script>
</body>
</html>
(Although I would use a library such as YUI or jQuery to add event handlers in a fashion that is better protected from overwriting in a crossbrowser compatible way).
You might want some tutorials on JavaScript and the DOM so that this makes sense.

Categories