Michael said:
Hi, folks.
I am writing a Javascript program that accepts (x, y) data pairs from
a text box and then analyzes that data in various ways. This is my
first time using text area boxes; in the past, I have used individual
entry fields for each variable. I would now like to use text area
boxes to simplify the data entry (this way, data can be produced by
another program--FORTRAN, "C", etc.--but analyzed online, so long as
it is first converted to plain-text).
In any case, extracting the data from the box is tripping me up. I
would like to prompt the user to input the (x, y) data pairs one per
line:
1 2
2 4
3 9
etc.
Could somebody please direct me to code for extracting these values
from the text box and converting them into meaningful floating-point
numbers?
You should require your users to enter each pair separately;
otherwise you are making your job really hard. If you allow
multiple lines of input, you must split your lines first, then
test that each line has valid input (or reject the lot if an
error is found). There is no reasonable way of doing this.
Another issues is that of the comma: ",". It is frequently used
as both a thousands separator, a decimal point and a number
delimiter.
For example, is the text "1,200" to be interpreted as one
thousand two hundred, one point two zero zero or a coordinate
pair where x=1 and y=200?
The code below takes the input and checks that only 0-9, ',' and
'.' have been entered. It then replaces the comma with a space,
removes leading and trailing spaces and splits what remains into
an array. It then checks that the first two elements of the
array pass a test as floats. The idea is that whilst alpha
characters may be OK in numbers in some contexts (e.g. 2.0e3),
in this case they aren't.
I have included two tests: the first uses a regular expression
to check for 1 to 4 digits optionally followed by a decimal
point and one or two more digits. The second just converts the
elements to floats, then evaluates if the result matches the
pre-parsed value. The theory is that if they convert OK then
all is well.
Just keep whichever test you feel is better and delete the other
code block.
If you want to include multiple lines of input, include newline
'\n' in the initial test and split the lines using
t.split('\n'). Then use a loop to run the resulting array
elements through the testing currently done on the input, split
the elements into (x y) and do the second set of testing.
Let us know if you want more help, I can post a text area
version if you *really* want it.
--
Rob
<script type="text/javascript">
function getCoords(t) {
var xy;
var eMsg = 'Your input is invalid.'
+ '\nPlease enter coordinates as two values '
+ 'separated by a space or comma. \ne.g. '
+ '23.5 12.2 or 23.5,12.2';
// test input is only digits, spaces or commas
if (t.search(/[^\d\.,]/) == -1) {
alert(eMsg);
return false;
}
// Process input
t = t.replace(/,/g, ' '); // replace comma with space
t = t.replace(/^\s*/, ''); // replace leading spaces
t = t.replace(/\s*$/, ''); // replace trailing spaces
xy = t.split(/\s+/g); // split into x & y
// regular expression test
if ( /^\d{1,4}(\.\d\d?)?$/.test(xy[0])
&& /^\d{1,4}(\.\d\d?)?$/.test(xy[0]) ) {
} else {
alert(eMsg)
return false;
}
// parseFloat test
if (xy[0] == parseFloat(xy[0])
&& xy[1] == parseFloat(xy[1])) {
} else {
alert(eMsg)
return false;
}
return (xy);
}
</script>
<form action="">
<input type="text" name="coords" size="20">
<input type="button" value="click me" onclick="
var xy = getCoords(this.form.coords.value);
if (xy) alert('x = ' + xy[0] + '\ny = ' + xy[1]);
">
</form>