www.webdeveloper.com
Results 1 to 7 of 7

Thread: Split data from single text box into multiple text boxes

  1. #1
    Join Date
    Feb 2003
    Posts
    25

    Split data from single text box into multiple text boxes

    Hi,
    I am trying to make a simple form that splits two words that a user enters has entered into a text box into separate querystrings.
    Please see the attached images for a better explanation.

    The user enters two words into a textbox and clicks submit.
    I then want use javascript to:
    Check the user has only entered two words,
    trim any leading and trailing spaces,
    split the two words into separate boxes and submit the data to a different page.

    Hope that makes sense.

    Any advice is welcomed.
    Thanks,
    Al
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Each word submit to the same page? Or each word submit to a different page, each?
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    One of many alternative solutions ...
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=244715
    
    String.prototype.trim = function() {
        return(this.replace(/^\s+/,'').replace(/\s+$/,''));
    }
    var queryStringInfo = [];
    function validate() {
      var temp = document.getElementById('info').value.trim();
      var queryStringInfo = temp.split(' ');
      var wcnt = 0;
      var str = '';
      for (var i=0; i<queryStringInfo.length; i++) {
        wcnt++; str += 'Word #'+wcnt+' '+queryStringInfo[i].trim()+'\n'; }
      alert(str);
      if (wcnt != 2) { alert('Invalid input: 2 words only!'); return false; }
      return false;     // return true after testing is completed
    }
    </script>
    </head>
    <body>
    <form id="myForm" onsubmit="return validate()">
    <input id="info" type="text" value="Red Green">
    <input type="submit">
    </body>
    </html>
    Depending on how you use the entered words, "queryStringInfo" contains them.
    Alter the last "validate()" function return depending upon needs.

    Good Luck!

  4. #4
    Join Date
    Feb 2003
    Posts
    25
    Thanks JMRKER. Your code has given me something to play with.


    WolfShade, I would require each word to be submitted to the same page. What would your solution be?

    Thanks, Al

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Question Need more information to proceed...

    You have not give enough information to finish the response...

    You need a URL to send the information toward and you would use the information in queryStringInfo to pass.

    For example:
    Code:
    var str = "http://www.somewhere.com?fName="+queryStringInfo[0]+"&lName="+queryStringInfo[1];
    document.location.href = str;
    You will need a button or link to the code for it to become an event for action to happen,
    but that is also information you have not provided in your request.

  6. #6
    Join Date
    Feb 2003
    Posts
    25
    Apologies if my posts were not clear enough.

    The url that I want to send the information to will be called something like www.mynewsite.com/step2.html
    My old site is hosted on a different domain to just make things more confusing.
    On the old site I want one text box and a button. The user enters two words into the text box and then clicks the button. They are then transferred to http://www.mynewsite.com/step2.html?...serssecondword

    Thanks for all your help

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Code:
    <html>
    <head>
    <title> URL attachments </title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=244715
    
    String.prototype.trim = function() {
        return(this.replace(/^\s+/,'').replace(/\s+$/,''));
    }
    var queryStringInfo = [];
    function validate() {
      var temp = document.getElementById('info').value.trim();
      var queryStringInfo = temp.split(' ');
      var wcnt = 0;
      var str = '';
      for (var i=0; i<queryStringInfo.length; i++) {
        wcnt++; str += 'Word #'+wcnt+' '+queryStringInfo[i].trim()+'\n'; }
      alert(str);
      if (wcnt != 2) { alert('Invalid input: 2 words only!'); return false; }
      document.location.href = "www.mynewsite.com/step2.html?fName="+queryStringInfo[0]+"&lName="+queryStringInfo[1];
      return false;     // return true after testing is completed
    }
    </script>
    </head>
    <body>
    <form id="myForm" onsubmit="return validate()">
    <input id="info" type="text" value="Red Green">
    <input type="submit">
    </body>
    </html>
    You will need to change the 'lName' and 'fName' assignments
    as well as decode them when the new site is reached.

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles