HTML button to pass textbox data to javapage

TechMonster
TechMonster used Ask the Experts™
on
So I have the attached code which takes first and lastname from textboxes and displays them.  I am using Javascript to display the variables.  I don't have the option of using a HTML form tag...so what I am looking for is a way to be able to pass the textboxes into a .js page and have that page run the script that is located in the attached file.

I know it's possible to do either separately, but I am looking for a way to combine both the page redirection abiltiy and the passing of variables to it.

Thanks.  
<SCRIPT language="JavaScript">
function send_alerts()
{
var fname, lname;
fname = document.getElementById("fname").value;
lname = document.getElementById("lname").value;
alert(fname + " " + lname);


}
</SCRIPT>

First name: <input type="text" name="fname" id = "fname"/><br />
Last name: <input type="text" name="lname" id="lname"/><br />

<br>
<INPUT type="button" value="Submit" onClick= "send_alerts()"

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Carlos LlanosIT Manager

Commented:
Not too familiar with .js pages, but can't you just add the variables into a URL and pull them from the URL on your .js page?
Awarded 2011
Awarded 2011

Commented:
This should go to  JavaScript zone, not java Programming Language
I agree both with NUKIT, that you can place the data in a url query string, and with for_yan, that this should be in the JavaScript zone.

Anyway since it's here, here is my two cents:

You can get the values of the textboxes and place them in a query string.

var fn = document.getElementById('fname').value;
var ln = document.getElementById('lname').value;
var qstr = "?fn=" + fn + "&amp;ln=" + ln;
window.location = "http://yoursite.com/" + qstr;

Next you can get them using a simple query string parser

function qs() {
      var query = window.location.search.substring(1);
      var parms = query.split('&');
      for (var indx=0; indx<parms.length; indx++) {
            var pos = parms[indx].indexOf('=');
            if (pos > 0) {
                  var key = parms[indx].substring(0,pos);
                  var val = parms[indx].substring(pos+1);
                  qsParm[key] = val;
            }
      }
      return qsParm;
}

Now in your code you can extract the content of the textboxes by using qs

var firstname = qs['fn'];
var lastname = qs['ln'];
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Author

Commented:
OmniUnilimited - This is a great solution but I am a little confused....being more of a application developer than a web developer.....does the function qs() go in my processing page which would be the yoursite.com or does the function go in the initial form page?  
Place the function in the main javascript file for your site, or whereever you would be using the values for the textboxes:

var firstname = qs['fn'];
var lastname = qs['ln'];
Whoa.  Just saw a mistake.  To use the query string parser we can't use url encoding:

var qstr = "?fn=" + fn + "&ln=" + ln;

instead of

var qstr = "?fn=" + fn + "&amp;ln=" + ln;

Author

Commented:
I'll try that..thanks.
No problem.  Best of luck to you and thank you for the points.

Author

Commented:
not sure if this is too late...tried the code from Omni....The variables did manage to be passed in the query string..so my string looks like my.site.com?fn=firstname1&ln=lastname1.  But the display is not working.

How do I display the data in the html?  
<SCRIPT type ="text/javascript">
function qs() {
      var query = window.location.search.substring(1);
      var parms = query.split('&');
      for (var indx=0; indx<parms.length; indx++) {
            var pos = parms[indx].indexOf('=');
            if (pos > 0) {
                  var key = parms[indx].substring(0,pos);
                  var val = parms[indx].substring(pos+1);
                  qsParm[key] = val;
            }
      }
      return qsParm;
} 

var firstname = qs['fn'];
var lastname = qs['ln'];


</script>




</head>



<body>




</body>

</html>

Open in new window

You could display this information on the page by setting up some div's (or span's, or whatever floats your boat) and setting id's to them like so:

<div id="fname"></div>
<div id="lname"></div>

Your script would then be:

var firstname = qs['fn'];
var lastname = qs['ln'];

document.getElementById('fname').innerHTML = firstname;
document.getElementById('lname').innerHTML = lastname;

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial