How can I pass multiple javascript variables to a php page?

Hi,

I am not able to figure out how to pass javascript variables to a php page.

I would like to click on a button that passes the "gender" and "selectmodel" variables to http://www.go2huddle.com/member/signup.php

I know that the result should be something like
http://www.go2huddle.com/member/signup.php?gender=male&selectmodel=other  etc...

see the web page here http://www.prontopage.net/expert/

help is appreciated.

Thanks,


<html>
<head>
<title>Multi-Page Form</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style   .css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript">
var currentLayer = 'page1';
 
function showLayer(lyr){
        if(lyr!='page1')
                document.getElementById(lyr+"_gender").innerHTML = document.weboptions.gender.value;
		if(lyr!='page1' && lyr!='page2')
                document.getElementById(lyr+"_model").innerHTML = document.weboptions.selectmodel.value;
        hideLayer(currentLayer);
        document.getElementById(lyr).style.visibility = 'visible';
        currentLayer = lyr;
}
 
function hideLayer(lyr){
        document.getElementById(lyr).style.visibility = 'hidden';
}
 
 
//function showValues(form){
//        var values = '';
//        var len = form.length - 1; //Leave off Submit Button
//        for(i=0; i<len; i++){
//                if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)//Skip Continue and Back Buttons
//                        continue;
//                values += form[i].id;
//                values += ': ';
//                values += form[i].value;
//                values += '\n';
//        }
//        alert(values);
//}
 
</script>
 
<!--form dependency manager http://www.dynamicdrive.com/dynamicindex16/formdependency.htm -->
<script src="js/FormManager.js">
</script>
 
<script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>
<!--end form dependency manager -->
 
<!--Begin code to replace radio button with image select with box -->
   <script type="text/javascript">
function selectcolor(text) {
  document.getElementById("gender" + document.getElementById("gender").value).style.border = "2px solid white";
  document.getElementById("gender" + text).style.border = "5px dotted #ffcc00";
  document.getElementById("gender").value = text;
 
}
 
function selectdork(text) {
  document.getElementById("selectmodel" + document.getElementById("selectmodel").value).style.border = "2px solid white";
  document.getElementById("selectmodel" + text).style.border = "5px dotted #ffcc00";
  document.getElementById("selectmodel").value = text;
 
}
    </script>
    
    <script>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!-- //
 
document.write('<a href="http://www.go2huddle.com/signup.php?gender='+gender+'&selectmodel='+selectmodel+'">another page</a>');
// -->
</SCRIPT> 
</script>
	 
<!--End code to replace radio button with image select with box -->
 
 
<style>
body{
        font: 10pt sans-serif;
}
.page{
        position: absolute;
        top: 10;
        left: 100;
        visibility: hidden;
}
</style>
</head>
 
<body>
<!-- Begin Page 1-->
<form id="multiForm" name="weboptions" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<div id="page1" class="page" style="visibility:visible;">
   <label> <img src="images/Model_Male_index.gif" id="genderMale" style="border: 2px solid white;" onClick="selectcolor('Male')" /></label>
   <label><img src="images/Model_Female_index.gif" id="genderFemale" style="border: 2px solid white;" onClick="selectcolor('Female')" /></label>
          <input type="hidden" id="gender" name="gender" value="Male" />
   <p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<!-- End Page 1-->
 
<!-- Begin Page 2-->
<div id="page2" class="page">
  <p id="page2_gender"></p>
   <label> <img src="images/chris.gif" id="selectmodelChris" style="border: 2px solid white;" onClick="selectdork('Chris')" /></label>
   <label><img src="images/other.gif" id="selectmodelOther" style="border: 2px solid white;" onClick="selectdork('Other')" /></label>
          <input type="hidden" id="selectmodel" name="selectmodel" value="Chris" />
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
</div>
<!-- End Page 2-->
 
<!-- Begin Page 3-->
<div id="page3" class="page">  
  <p id="page3_gender"></p>
  <p id="page3_model"></p>
  <p>Question 11 <input type="text" id="T11" size="20"></p>
  <p>Question 12 <input type="text" id="T12" size="20"></p>
  <p>Question 13 <input type="text" id="T13" size="20"></p>
  <p>Question 14 <input type="text" id="T14" size="20"></p>
  <p>Question 15 <input type="text" id="T15" size="20"></p>
  <p><input type="button" id="B2" value="Go Back" onClick="showLayer('page2')"><input type="button" id="C3" value="Continue" onClick="showLayer('page4')"></p>
</div>
<!-- End Page 3-->
 
<!-- Begin Page 4-->
<div id="page4" class="page">
  <p id="page4_gender"></p>
  <p id="page4_model"></p>
  <p>Question 16 <input type="text" id="T16" size="20"></p>
  <p>Question 17 <input type="text" id="T17" size="20"></p>
  <p>Question 18 <input type="text" id="T18" size="20"></p>
  <p>Question 19 <input type="text" id="T19" size="20"></p>
  <p>Question 20 <input type="text" id="T20" size="20"></p>
  <p><input type="button" id="B3" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit" id="submit"></p>
</div>
 
<!-- End Page 4-->
 
</form>
 
</body>
 
</html>

Open in new window

chrisj1963Asked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
You cannot get the value for gender while the page is loading. You must wait for the page to finish loading. So, you cannot use document.write. You can get the values upon click.
<html>
<head>
<title>Multi-Page Form</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style   .css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript">
var currentLayer = 'page1';
 
function showLayer(lyr){
        if(lyr!='page1')
                document.getElementById(lyr+"_gender").innerHTML = document.weboptions.gender.value;
		if(lyr!='page1' && lyr!='page2')
                document.getElementById(lyr+"_model").innerHTML = document.weboptions.selectmodel.value;
        hideLayer(currentLayer);
        document.getElementById(lyr).style.visibility = 'visible';
        currentLayer = lyr;
}
 
function hideLayer(lyr){
        document.getElementById(lyr).style.visibility = 'hidden';
}
 
 
//function showValues(form){
//        var values = '';
//        var len = form.length - 1; //Leave off Submit Button
//        for(i=0; i<len; i++){
//                if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)//Skip Continue and Back Buttons
//                        continue;
//                values += form[i].id;
//                values += ': ';
//                values += form[i].value;
//                values += '\n';
//        }
//        alert(values);
//}
 
</script>
 
<!--form dependency manager http://www.dynamicdrive.com/dynamicindex16/formdependency.htm -->
<script src="js/FormManager.js"></script>
 
<script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>
<!--end form dependency manager -->
 
<!--Begin code to replace radio button with image select with box -->
   <script type="text/javascript">
function selectcolor(text) {
  document.getElementById("gender" + document.getElementById("gender").value).style.border = "2px solid white";
  document.getElementById("gender" + text).style.border = "5px dotted #ffcc00";
  document.getElementById("gender").value = text;
 
}
 
function selectdork(text) {
  document.getElementById("selectmodel" + document.getElementById("selectmodel").value).style.border = "2px solid white";
  document.getElementById("selectmodel" + text).style.border = "5px dotted #ffcc00";
  document.getElementById("selectmodel").value = text;
 
}
    </script>
 
	 
<!--End code to replace radio button with image select with box -->
 
 
<style>
body{
        font: 10pt sans-serif;
}
.page{
        position: absolute;
        top: 10;
        left: 100;
        visibility: hidden;
}
</style>
</head>
 
<body>
 
<a href="http://www.go2huddle.com/signup.php"  onclick="this.href=this.href+'?gender=' + document.getElementById('gender').value + '&selectmodel=' + document.getElementById('selectmodel').value; return true;">another page</a>
 
 
<!-- Begin Page 1-->
<form id="multiForm" name="weboptions" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<div id="page1" class="page" style="visibility:visible;">
   <label> <img src="images/Model_Male_index.gif" id="genderMale" style="border: 2px solid white;" onClick="selectcolor('Male')" /></label>
   <label><img src="images/Model_Female_index.gif" id="genderFemale" style="border: 2px solid white;" onClick="selectcolor('Female')" /></label>
          <input type="hidden" id="gender" name="gender" value="Male" />
   <p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<!-- End Page 1-->
 
<!-- Begin Page 2-->
<div id="page2" class="page">
  <p id="page2_gender"></p>
   <label> <img src="images/chris.gif" id="selectmodelChris" style="border: 2px solid white;" onClick="selectdork('Chris')" /></label>
   <label><img src="images/other.gif" id="selectmodelOther" style="border: 2px solid white;" onClick="selectdork('Other')" /></label>
          <input type="hidden" id="selectmodel" name="selectmodel" value="Chris" />
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
</div>
<!-- End Page 2-->
 
<!-- Begin Page 3-->
<div id="page3" class="page">  
  <p id="page3_gender"></p>
  <p id="page3_model"></p>
  <p>Question 11 <input type="text" id="T11" size="20"></p>
  <p>Question 12 <input type="text" id="T12" size="20"></p>
  <p>Question 13 <input type="text" id="T13" size="20"></p>
  <p>Question 14 <input type="text" id="T14" size="20"></p>
  <p>Question 15 <input type="text" id="T15" size="20"></p>
  <p><input type="button" id="B2" value="Go Back" onClick="showLayer('page2')"><input type="button" id="C3" value="Continue" onClick="showLayer('page4')"></p>
</div>
<!-- End Page 3-->
 
<!-- Begin Page 4-->
<div id="page4" class="page">
  <p id="page4_gender"></p>
  <p id="page4_model"></p>
  <p>Question 16 <input type="text" id="T16" size="20"></p>
  <p>Question 17 <input type="text" id="T17" size="20"></p>
  <p>Question 18 <input type="text" id="T18" size="20"></p>
  <p>Question 19 <input type="text" id="T19" size="20"></p>
  <p>Question 20 <input type="text" id="T20" size="20"></p>
  <p><input type="button" id="B3" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit" id="submit"></p>
</div>
 
<!-- End Page 4-->
 
</form>
 
</body>
 
</html>
 
Open in New Window 

Open in new window

0
 
Göran AnderssonConnect With a Mentor Commented:
If you use document.write to put the link on the page, and use the variables to construct the url at that time, you will be using the values that the variables have when the page is loading. If you change the values of the variables later on, that will not change the html code that was constructed using the variables.

Put the values in the url at the time of clicking the link:

<a href="http://www.go2huddle.com/signup.php" onclick="this.href+='?gender='+gender+'&selectmodel='+selectmodel;return true;">another page</a>
0
 
chrisj1963Author Commented:
While GreenGhost was correct, hielo pointed out that, in my case, document.write, would not work.  Hielo's solution worked perfectly.
Thank you very much!
0
 
Göran AnderssonCommented:
> While GreenGhost was correct, hielo pointed out that, in my case, document.write, would not work.

Ehm... So did I.
0
All Courses

From novice to tech pro — start learning today.