Split data from single text box into multiple text boxes

**twixy2k** · 04-07-2011, 12:00 PM

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

**WolfShade** · 04-07-2011, 01:01 PM

Each word submit to the same page? Or each word submit to a different page, each?

**JMRKER** · 04-07-2011, 01:56 PM

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!

**twixy2k** · 04-08-2011, 03:46 AM

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

**JMRKER** · 04-08-2011, 10:17 AM

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.

**twixy2k** · 04-08-2011, 11:48 AM

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

**JMRKER** · 04-08-2011, 02:18 PM

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: Split data from single text box into multiple text boxes

Thread Tools

Display

Split data from single text box into multiple text boxes

Need more information to proceed...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions