Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Form Input Question

    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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    "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);
    Last edited by Philip M; 08-19-2007 at 07:51 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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>

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes that's precisely what I'm trying to do. I am extremely sorry if I wasn't clear from the beginning on that.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <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>

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Code!

    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>

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #11
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Apologies

    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.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by theflyingminstr; 08-19-2007 at 08:33 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •