...

View Full Version : Javascript Form Input Question



theflyingminstr
08-19-2007, 01:49 AM
Hi I’m sure this is a simple JavaScript function, but I’m still rather new to them..

The following code below displays letters that are inputted into the form field when typed.

The main objective is to get the word “test” to spell out backwards “tset” (Basically any character inserted from the keypad would input itself backwards).

The form outputs “hello” when inputted properly.

Any ideas anyone?

Thanks!


<html>

<head>

<center>
<script type = "text/javascript">

function replaceChars() {
var temp = document.subform.text.value;


temp = temp.replace(/tset/gi, "hello");


document.subform.text.value = temp;
}

</script>

</head>

<body>


<form name="subform">

<textarea rows="8" name="text" cols="48" value=""></textarea>
<br><br>
<input type=button name=action value="Change" onClick="replaceChars(document.subform.text.value);">

<br><br>

<table border="1" width="284" id="table1" height="58" bgcolor="#FFFFFF">
<tr>
<td align="center" width="70"><INPUT TYPE="button" NAME="t" VALUE=" t " OnClick="subform.text.value += 't'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="e" VALUE=" e " OnClick="subform.text.value += 'e'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="s" VALUE=" s " OnClick="subform.text.value += 's'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="t" VALUE=" t " OnClick="subform.text.value += 't'"></td>
</tr>
</table>

</form>

</center>

</body>

</html>

Philip M
08-19-2007, 07:39 AM
"Basically any character inserted from the keypad would input itself backwards."
Not sure what that means - sounds rude!

If your objective is to reverse the characters in a string:-

<script type = "text/javascript">
var txt = "abcdefgh"
var splitTxt = txt.split("");
var reverseTxt = splitTxt.reverse();
var newTxt = reverseTxt.join("");
alert (newTxt);
</script>

or more simply:-

var txt = "abcdefgh"
var newTxt = txt.split("").reverse().join("");
alert (newTxt);

theflyingminstr
08-19-2007, 07:46 AM
Thanks for responding Phillip, I was looking at the snippet below as well and trying to implement it, but that's just it - I'm just not getting it for some reason. I sorta got close about 20 minutes ago..


function reverse(form) {
text = "";
str = form.revtext.value;
for (i = 0; i <= str.length; i++)
text = str.substring(i, i+1) + text;
form.revtext.value = text;
}

<form>
<input type=text name=revtext value=hello>
<input type=button value="Reverse" onClick="reverse(this.form)">
</form>

Philip M
08-19-2007, 07:59 AM
function reverse() {
var oldTxt = document.myform.revtext.value;
var newTxt = oldTxt.split("").reverse().join("");
document.myform.revtext.value = newTxt;
}
</script>

<form name = "myform">
<input type = "text" name = "revtext" value = "abcdefghijk">
<input type = "button" value = "Reverse" onClick = "reverse()">
</form>

theflyingminstr
08-19-2007, 08:12 AM
Thanks for responding again, actually I got it to that point, the problem is I need to get the buttons to insert the characters backward in real time.. is there any way to do that?


<html>

<head>

<center>
<script type = "text/javascript">

function reverse(form) {
text = "";
str = form.text.value;
for (i = 0; i <= str.length; i++)
text = str.substring(i, i+1) + text;
form.text.value = text;
}



function replaceChars() {
var temp = document.subform.text.value;



temp = temp.replace(/tset/gi, "hello");


document.subform.text.value = temp;
}

</script>

</head>

<body>


<form name="subform">
<form>

<textarea rows="8" name="text" cols="48" value=""></textarea>
<br><br>
<input type=button name=action value="Change" onClick="replaceChars(document.subform.text.value); reverse(this.form);">

<br><br>

<table border="1" width="284" id="table1" height="58" bgcolor="#FFFFFF">
<tr>
<td align="center" width="70"><INPUT TYPE="button" NAME="t" VALUE=" t " OnClick="subform.text.value += 't'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="e" VALUE=" e " OnClick="subform.text.value += 'e'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="s" VALUE=" s " OnClick="subform.text.value += 's'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="t" VALUE=" t " OnClick="subform.text.value += 't'"></td>
</tr>
</table>

</form>
</form>
</center>

</body>

</html>

Philip M
08-19-2007, 08:28 AM
I am afraid that I do not understand what you mean, not do I really see the point.

Are you trying to achieve:

User types 'h' Textbox displays h
User types 'e' Textbox displays eh
User types 'l' Textbox displays leh
User types 'l' Textbox displays lleh
User types 'o' Textbox displays olleh

This is not at all what you seem to have asked for.

theflyingminstr
08-19-2007, 08:37 AM
Yes that's precisely what I'm trying to do. I am extremely sorry if I wasn't clear from the beginning on that.

Philip M
08-19-2007, 09:30 AM
<script type = "text/javascript">

function reverse() {
var oldTxt = document.myform.revtext.value;
var len = oldTxt.length;
var lastChar = oldTxt.charAt(len-1);
var retain = oldTxt.substr(0,len-1);
newTxt = lastChar + retain;
document.myform.revtext.value = newTxt;
}

</script>

<form name = "myform">
<input type = "text" name = "revtext" value = "" onkeyup = "reverse()">
</form>

theflyingminstr
08-19-2007, 09:57 AM
That code you sent me is awesome! I implemented it with my buttons but it's still is not working for me.. Am I missing something?

To reiterate when you punch a key in on the pad, it comes up backwards.

Click: T get: T
Click: E get: ET
Click S get: SET
Click T get: TSET



<html>

<head>

<center>
<script type = "text/javascript">

function replaceChars() {
var temp = document.subform.text.value;

function reverse() {
var oldTxt = document.subform.text.value;
var len = oldTxt.length;
var lastChar = oldTxt.charAt(len-1);
var retain = oldTxt.substr(0,len-1);
newTxt = lastChar + retain;
document.subform.text.value = newTxt;
}


temp = temp.replace(/tset/gi, "hello");


document.subform.text.value = temp;
}

</script>

</head>

<body>


<form name="subform">

<textarea rows="8" name="text" cols="48" value="" onkeyup = "reverse()"></textarea>
<br><br>
<input type=button name=action value="Change" onClick="replaceChars(document.subform.text.value);">

<br><br>

<table border="1" width="284" id="table1" height="58" bgcolor="#FFFFFF">
<tr>
<td align="center" width="70"><INPUT TYPE="button" NAME="t" VALUE=" t " OnClick="subform.text.value += 't'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="e" VALUE=" e " OnClick="subform.text.value += 'e'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="s" VALUE=" s " OnClick="subform.text.value += 's'"></td>
<td align="center" width="70"><INPUT TYPE="button" NAME="t" VALUE=" t " OnClick="subform.text.value += 't'"></td>
</tr>
</table>

</form>

</center>

</body>

</html>

Philip M
08-19-2007, 10:34 AM
It works for me. I do not see what the buttons are supposed to do. Nor the other lines of redundant/meaningless code you have added.

Using the script you were given in my 12.30am post, when the user types into the textbox the order of the letters is reversed, as you requested. (That is, the most recent letter typed is placed at the start of the string).

"To reiterate when you punch a key in on the pad, it comes up backwards.

Click: T get: T
Click: E get: ET
Click: S get: SET
Click: T get: TSET "

Tht is exactly what my script does. If that is not sufficient, then I regret that I am exhausted and unable to understand what you want.

theflyingminstr
08-19-2007, 10:37 AM
I'm sorry, please don't loose any sleep on account of me. I was just saying I'm having a rough time implementing the code to make it work in real time with the keypad. Like I said I'm a Javascript newbie.

Philip M
08-19-2007, 10:58 AM
The "keypad" is the section on the right of the keyboard which contains the numeric pad plus numlock, ins, del etc.

I had worked out that you are a newcomer. With respect, the real problem is that you seem to want to run before you can walk.

theflyingminstr
08-19-2007, 04:00 PM
But there is a keypad within the Javascript, I thought you knew that's what I was refering to, sorry about that. Thanks for all your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum