lexington
05-22-2008, 01:32 AM
Hello, I was curious to know if anyone could provide me with a working javascript example where it has a basic input field, and if the user enters 1000 it would display 1,000 on the webpage in real time? I want to add this because users add a lot of numbers such as 250,000,000 and when typing it in a field without commas such as 250000000 it is kinda hard to make sure that you have the right amount. So if there was a real time display that used number_format or something to insert commas on the display but not in the input field that would be cool. It would also be great if a popup appears if the user enters anything other than numbers. Thanks!
xeyxey
05-23-2008, 12:43 AM
Here the attached should do it for you...
<html>
<head>
<script>
function update()
{
var value = document.getElementById("userText").value;
if (isNumeric(value))
{
document.getElementById("message").innerHTML = "";
document.getElementById("validatedText").value = addSeperator(value);
}
else
{
document.getElementById("message").innerHTML = "Not a number!";
}
}
function addSeperator(value)
{
var result = "";
value = value.split("").reverse().join("");
for (var index = 0; index < value.length; index++)
{
if ((index % 3 == 0) && (index > 0))
{
result = result + ",";
}
result = result + value.charAt(index);
}
result = result.split("").reverse().join("");
return result;
}
function isNumeric(value)
{
var alphabet = "0123456789.";
var character;
for (var index = 0; index < value.length; index++)
{
character = value.charAt(index);
if (alphabet.indexOf(character) == -1)
{
return false;
}
}
return true;
}
</script>
</head>
<body>
<input type="text" id="userText" name="userText" onKeyUp="update();" />
<input type="text" id="validatedText" name="validatedText" readonly="readonly" />
<span id="message"></span>
</body>
</html>
lexington
05-23-2008, 12:46 AM
Wow thanks a lot! :D It works on my computer I will try to intergrate it into the site but I am sure it will work. Thanks again!
lexington
05-23-2008, 01:00 AM
Question, does this work with input fields that are already in a form? Because I changed the form name and id to match the input's name and it just gives a "Not a number!" error everytime. Here is the edit I made:
<input type="text" class="post" name="donate" maxlength="10" size="20" value="0" id="donate" onKeyUp="update();"> Preview: <input type="text" id="validatedText" name="validatedText" readonly="readonly" />
<span id="message"></span>
and I changed the userText to donate in the functions.
lexington
05-23-2008, 01:16 AM
Ok thanks it works now I just need to keep the ID as UserText and it will work thanks again!
xeyxey
05-23-2008, 01:30 AM
You just need to make sure the IDs match the calls to that element in the javascript code:
So if you change the field to id="donate" then you need to update all the places in the code that "userText" is referenced:
For example
var value = document.getElementById("userText").value;
would become:
var value = document.getElementById("donate").value;
:cool:
lexington
05-23-2008, 01:51 AM
Yeah I did just that and it didn't work but no worries I updated my post and it works if I keep the ID the same so thanks! :D If I want a preview for multiple fields on one page I would have to duplicate and rename the function and the preview input for each one eh? Thanks! :)
xeyxey
05-23-2008, 02:09 AM
you could pass the names of the field to the function..this would make it nice and generic so you can reuse with any number of fields......you will need to change how it is called also.....see below:
<html>
<head>
<script>
function update(source,target,message)
{
var value = document.getElementById(source).value;
if (isNumeric(value))
{
document.getElementById(message).innerHTML = "";
document.getElementById(target).value = addSeperator(value);
}
else
{
document.getElementById(message).innerHTML = "Not a number!";
}
}
function addSeperator(value)
{
var result = "";
value = value.split("").reverse().join("");
for (var index = 0; index < value.length; index++)
{
if ((index % 3 == 0) && (index > 0))
{
result = result + ",";
}
result = result + value.charAt(index);
}
return result.split("").reverse().join("");
}
function isNumeric(value)
{
var alphabet = "0123456789.";
var character;
for (var index = 0; index < value.length; index++)
{
character = value.charAt(index);
if (alphabet.indexOf(character) == -1)
{
return false;
}
}
return true;
}
</script>
</head>
<body>
<input type="text" id="userText1" name="userText1" onKeyUp="update('userText1','validatedText1','message1');" />
<input type="text" id="validatedText1" name="validatedText1" readonly="readonly" />
<span id="message1"></span>
<br /><br />
<input type="text" id="userText2" name="userText2" onKeyUp="update('userText2','validatedText2','message2');" />
<input type="text" id="validatedText2" name="validatedText2" readonly="readonly" />
<span id="message2"></span>
<br /><br />
<input type="text" id="userText3" name="userText2" onKeyUp="update('userText3','validatedText3','message3');" />
<input type="text" id="validatedText3" name="validatedText3" readonly="readonly" />
<span id="message3"></span>
</body>
</html>
