JavascriptRewrite Page to Itself or Another Page and Append Text Boxes

champ_010
champ_010 used Ask the Experts™
on
still working on this form...

i have radio buttons and 2 dropdown lists.  onClick an option in the second dropdown list--I would like the page to rewrite and append additional textboxes to itself as determined by the selections.

OR

to redirect to a new page and pass/rewrite/recreate  the  radio buttons, dropdown lists etc.(with selections still chosen), and append the new textboxes there.

I dont' know if this is possible.  I think I've seen it done before.  I am not a Javascript expert, can you please cut and paste to the code below.

Here is the page with the radio buttons and dropdown menus.  Have also included a form that is like what I would like "appended" in the second page.  Thanks.



<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<FORM name="ConFrm">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="left">
  <td nowrap height="11"> &nbsp;
   
<input name="radFirst" type="radio" value=1 onclick="nextGroup(this.value)">Customer1
<input name="radFirst" type="radio" value=2 onclick="nextGroup(this.value)">Customer2
<input name="radFirst" type="radio" value=3 onclick="nextGroup(this.value)">Customer3
<p>
<select name="prodType" size="1" onChange="nextGroup1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select From First Menu--------------</option>
<option value=" " selected>---Select From First Menu--------------</option>
</select>
</p>
<p>
<select name="inqType" size="1" >
<option value=" " selected> </option>
<option value=" " selected>---Select From First Menu----------------</option>
<option value=" " selected>---Select From First Menu----------------</option>
</select>
</p>

<script>
<!--

var groups = document.all("radFirst").length + 1 //+ 1 if for the drop down item select...

var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select From the Menu Above---"," ");

group[1][0]=new Option("---Select From This 2nd Menu---"," ");
group[1][1]=new Option("mbType1","47");
group[1][2]=new Option("mbType2","46");
group[1][3]=new Option("mbType3","45");

group[2][0]=new Option("--Select From This 2nd Menu---"," ");
group[2][1]=new Option("nonType1","115");
group[2][2]=new Option("nonType2","116");
group[2][3]=new Option("nonType3","45");

group[3][0]=new Option("--Select From This 2nd Menu---"," ");
group[3][1]=new Option("baType1","115");
group[3][2]=new Option("baType2","116");
group[3][3]=new Option("baType3","45");

var temp=document.ConFrm.prodType

function nextGroup(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
nextGroup1(0)
}

var questionss=document.ConFrm.prodType.options.length
var questions=new Array(groups)
for (i=0; i<groups; i++)  {
questions[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)  {
questions[i][j]=new Array()  }}

questions[0][0][0]=new Option("---Select---"," ");
questions[1][0][0]=new Option("---Select From the 2nd Menu---"," ");
questions[1][1][0]=new Option("Select From This 3rd Menu"," ");
questions[1][1][1]=new Option("mDtInq1");
questions[1][1][2]=new Option("mDtInq2");
questions[1][1][3]=new Option("mDtInq3");

questions[1][2][0]=new Option("Select From This 3rd Menu");
questions[1][2][1]=new Option("mEhInq1");
questions[1][2][2]=new Option("mEhInq2");
questions[1][2][3]=new Option("mEhInq3");

questions[1][3][0]=new Option("Select From This 3rd Menu");
questions[1][3][1]=new Option("mHsInq1");
questions[1][3][2]=new Option("mHsInq2");
questions[1][3][3]=new Option("mHsInq3");

questions[2][0][0]=new Option("---Select From the 2nd Menu---");
questions[2][1][0]=new Option("Select From This 3rd Menu");
questions[2][1][1]=new Option("nonIPInq1");
questions[2][1][2]=new Option("nonIPInq2");
questions[2][1][3]=new Option("nonIPInq3");

questions[2][2][0]=new Option("Select From This 3rd Menu"," ");
questions[2][2][1]=new Option("nonGrInq1");
questions[2][2][2]=new Option("nonGrInq2");
questions[2][2][3]=new Option("nonGrInq3");

questions[2][3][0]=new Option("Select From This 3rd Menu"," ");
questions[2][3][1]=new Option("nonTrvInq1");
questions[2][3][2]=new Option("nonTrvInq2");
questions[2][3][3]=new Option("nonTrvInq3");

questions[3][0][0]=new Option("---Select From the 2nd Menu---");
questions[3][1][0]=new Option("Select From This 3rd Menu"," ");
questions[3][1][1]=new Option("baDtInq1");
questions[3][1][2]=new Option("baDtInq2");
questions[3][1][3]=new Option("baDtInq3");

questions[3][2][0]=new Option("Select From This 3rd Menu");
questions[3][2][1]=new Option("baEhInq1");
questions[3][2][2]=new Option("baEhInq2");
questions[3][2][3]=new Option("baEhInq3");

questions[3][3][0]=new Option("Select From This 3rd Menu");
questions[3][3][1]=new Option("baHsInq1");
questions[3][3][2]=new Option("baHsInq2");
questions[3][3][3]=new Option("baHsInq3");

var temp1=document.ConFrm.inqType
function nextGroup1(y){
var selRadio;
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<questions[document.all("radFirst").length][y].length;i++)
{
     for(k=0;k<document.all("radFirst").length;k++)
     {
          if (document.ConFrm.radFirst[k].checked == true)
               selRadio = k;          
     }
temp1.options[i]=new Option(questions[document.ConFrm.radFirst[selRadio].value][y][i].text,questions[document.ConFrm.radFirst[selRadio].value][y][i].value)
}
temp1.options[0].selected=true
}

function nextGroup2(z){
window.location=temp1[z].value
}

var appearFields = "";
   function displayTextField()
   {
     var elem = window.document.getElementById(window.document.activeElement.value);
     if (elem) {
        elem.style.display = "";
        elem = window.document.getElementById(appearFields);
        if (elem) elem.style.display = "none";
        appearFields = window.document.activeElement.value;
     }
   }      
//-->
</script>

         </td>
</tr>

</table>
</body>
</html>


********Form to be Appended***************************

<html>
<body>
      First Name: <input type="text" name="first_name">&nbsp;&nbsp;&nbsp;
      Last Name: <input type="text" name="last_name"><br>
      E-mail: <input type="text" name="e_mail"><br>
      Phone Number: <input name="area_code" type="text" size="3" maxlength="3">
              <input name="phone_number" type="text" size="10" maxlength="8">
  <p> Customer No:
    <input type="text" name="group_number">
    <br>
    ID No:
    <input type="text" name="group_id">
    <br>
    Date of Birth:
    <select name="birth_date">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    <select name="birth_month">
      <option>Jan</option>
      <option>Feb</option>
      <option>Mar</option>
      <option>Apr</option>
      <option>May</option>
      <option>Jun</option>
      <option>Jul</option>
      <option>Aug</option>
      <option>Sep</option>
      <option>Oct</option>
      <option>Nov</option>
      <option>Dec</option>
    </select>
    <input name="birth_year" type="text" size="6" maxlength="4">
  <p>DepNo.:
    <select name="select">
      <option>00</option>
      <option>01</option>
      <option>02</option>
    </select>
  <p>Company No.
    <input name="textfield" type="text" size="6" maxlength="6">
    PIN:
    <input name="textfield3" type="text" size="8" maxlength="8">
 
  <p>
 <input type="button" VALUE="Send Request"       onClick="document.forms[contactForm].submit();document.forms[showForm2].submit()">
    &nbsp; &nbsp;
    <input name="reset" type="submit" id="reset" value="Reset">
 </p>
 
</form>

</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I think it would be best if you used ASP or other server-side languages to determine what elements were selected rather than dynamically creating/removing elements.

However, it would be possible, and not too difficult, to create new elements.  It would be an IE5+ solution, though.  You could use innerHTML to write inside of divs.

With this you would need to use the ASP page to check what elements were existing -- it might throw an error if you try to refer to an element that isn't there  

Try this for an example:
--------------------
<FORM>
<INPUT TYPE=radio onClick='changeit(1)'>
<INPUT TYPE=radio onClick='changeit(2)'>
<P><SPAN ID="container"></SPAN>
</FORM>

<SCRIPT>
function changeit(x){
if(x==1){container.innerHTML='<INPUT TYPE=text NAME=whatever><BR><INPUT TYPE=checkbox>'}
if(x==2){container.innerHTML='<INPUT TYPE=checkbox><INPUT TYPE=checkbox><INPUT TYPE=checkbox>'}
}
</SCRIPT>
--------------------

I hope this helps!
By the way, if this looks good for you, I can cut and paste it into your existing code (but it may be in a few hours).

Author

Commented:
I think the example you gave, might be what I am looking for.  If you go to this contact page:

http://www.bchydro.com/contact/

and click on the radio buttons for "business" and "other"--the page refreshes and produces additonal fields beneath--while maintaining the checked button.  is this javascript and like what you propose?

yes please paste into my code so i can see what it is!--unless you think otherwise.
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

If the page refreshes then it is done on the server side.  As you can see in my example, it is added/removed dynamically.

I'll work on adding it to your code.  I'll post it later this evening.

Author

Commented:
o.k. thanks.
Try this, it uses the innerHTML.

<script>
<!--

var temp, temp1;
var group, groups;
var inquiries, questions;

function buildArrays(){

groups = document.all("custType").length + 1 //+ 1 if for the drop down item select...

group=new Array(groups)

for (i=0; i<groups; i++) group[i]=new Array();

group[0][0]=new Option("---Please Select A Customer Type Above---"," ");

group[1][0]=new Option("---Please Select A Product Type----"," ");
group[1][1]=new Option("Bakery","47");
group[1][2]=new Option("Deli ","46");
group[1][3]=new Option("Meat","45");

group[2][0]=new Option("--Please Select A Product Type---"," ");
group[2][1]=new Option("Vegtables ","115");
group[2][2]=new Option("Frozen Dinners ","116");
group[2][3]=new Option("Dairy Products ","45");

group[3][0]=new Option("--Please Select A Product Type---"," ");
group[3][1]=new Option("Cosmetics","115");
group[3][2]=new Option("Dental","116");
group[3][3]=new Option("Bandages","45");


temp=document.contactForm.productCat;

questions=temp.options.length
inquiries=new Array(groups)
for (i=0; i<groups; i++)  {
  inquiries[i]=new Array(group[i].length);
  for (j=0; j<group[i].length; j++)  {
       inquiries[i][j]=new Array()  
  }
}

inquiries[0][0][0]=new Option("---Select---"," ");
inquiries[1][0][0]=new Option("---Please Select From the Menu Above---");
inquiries[1][1][0]=new Option("Please Select An Inquiry Type");
inquiries[1][1][1]=new Option("bakeryInq1","1") ; // *
inquiries[1][1][2]=new Option("bakeryInq2","nonshowForm1");
inquiries[1][1][3]=new Option("bakery","3");

inquiries[1][2][0]=new Option("Please Select An Inquiry Type");
inquiries[1][2][1]=new Option("deliInq1","1");
inquiries[1][2][2]=new Option("deliInq2","2");
inquiries[1][2][3]=new Option("deliInq3","3");

inquiries[1][3][0]=new Option("Please Select An Inquiry Type");
inquiries[1][3][1]=new Option("meatInq1","1");
inquiries[1][3][2]=new Option("meatInq2","2");
inquiries[1][3][3]=new Option("meatInq3","3");
inquiries[1][3][4]=new Option("meatInq4","2");
inquiries[1][3][5]=new Option("meatInq5","3");

inquiries[2][0][0]=new Option("---Please From the Menu Above---");
inquiries[2][1][0]=new Option("Please Select An Inquiry Type");
inquiries[2][1][1]=new Option("veggiesInq1","1");
inquiries[2][1][2]=new Option("veggiesInq2","2");
inquiries[2][1][3]=new Option("veggiesInq3","3");

inquiries[2][2][0]=new Option("Please Select An Inquiry Type");
inquiries[2][2][1]=new Option("frozen1","1"); //*
inquiries[2][2][2]=new Option("frozen2","2");
inquiries[2][2][3]=new Option("frozen3","3");

inquiries[2][3][0]=new Option("Please Select An Inquiry Type"," ");
inquiries[2][3][1]=new Option("dairyInq1","1");
inquiries[2][3][2]=new Option("dairyInq2","2");
inquiries[2][3][3]=new Option("dairyInq3","3");

inquiries[3][0][0]=new Option("---Please Select From the Menu Above---");
inquiries[3][1][0]=new Option("Please Select An Inquiry Type");
inquiries[3][1][1]=new Option("cosmeticsInq","1");
inquiries[3][1][2]=new Option("cosmeticsInq2","2");
inquiries[3][1][3]=new Option("cosmeticsInq3","3");
inquiries[3][1][4]=new Option("cosmetictsInq4","3");
inquiries[3][1][5]=new Option("cosmetictsInq5","1");

inquiries[3][2][0]=new Option("Please Select An Inquiry Type");
inquiries[3][2][1]=new Option("dentalInq1","1");
inquiries[3][2][2]=new Option("dentalInq2","2");
inquiries[3][2][3]=new Option("dentalInq3","3");
inquiries[3][2][4]=new Option("dentalInq4","1");
inquiries[3][2][5]=new Option("dentalInq5","3");

inquiries[3][3][0]=new Option("Please Select An Inquiry Type","showForm1");
inquiries[3][3][1]=new Option("firstAid1","1");
inquiries[3][3][2]=new Option("firstAid2","2");
inquiries[3][3][3]=new Option("firstAid3","3");
inquiries[3][3][4]=new Option("firtsAid4","1");
inquiries[3][3][5]=new Option("firstAid5","3");

temp1=document.contactForm.inquiryType;

}

function nextGroup(x){

for (m=temp.options.length-1;m>0;m--) temp.options[m]=null;
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}

temp.options[0].selected=true;
nextGroup1(0);

}
function nextGroup1(y){

var selRadio;

for (m=temp1.options.length-1;m>0;m--) temp1.options[m]=null;
for (i=0;i<inquiries[document.all("custType").length][y].length;i++)
{
  for(k=0;k<document.all("custType").length;k++) {
       if (document.contactForm.custType[k].checked == true) selRadio = k;          
  }
  temp1.options[i]=new Option(inquiries[document.contactForm.custType[selRadio].value][y][i].text,inquiries[document.contactForm.custType[selRadio].value][y][i].value);
}
temp1.options[0].selected=true

}

function nextGroup2(z){

displayForm(z.options[z.selectedIndex].value);

}

function displayForm(what){
thehtml=""

if(what=="1"){
thehtml='\n'
thehtml+='    First Name: <input type="text" name="firstName">&nbsp;&nbsp;&nbsp; \n'
thehtml+='    Last Name: <input type="text" name="lastName"><br>\n'
thehtml+='    E-mail: <input type="text" name="email"><br>\n'
thehtml+='    Phone Number: <input name="areaCode" type="text" size="3" maxlength="3">\n'
thehtml+='                     <input name="phoneNumber" type="text" size="10" maxlength="8"><br>\n'
thehtml+='Questions or Comments: <br>\n'
thehtml+='<textarea name="textarea"></textarea>\n'
thehtml+='<p>\n'
thehtml+='<input type="submit" name="Submit" value="Submit">\n'
thehtml+='<input name="reset" type="submit" id="reset" value="Reset">\n'
thehtml+='</p>\n'
}

else if(what=="2"){
thehtml='First Name: <input type="text" name="firstName">&nbsp;&nbsp;&nbsp; \n'
thehtml+='Last Name: <input type="text" name="lastName"><br>\n'
thehtml+='E-mail: <input type="text" name="email"><br>\n'
thehtml+='Phone Number: <input name="areaCode" type="text" size="3" maxlength="3">\n'
thehtml+='            <input name="phoneNumber" type="text" size="10" maxlength="8">\n'
thehtml+='<p> Group No: <input type="text" name="groupNumber">\n'
thehtml+='  <br>\n'
thehtml+='  ID: <input type="text" name="idNumber">\n'
thehtml+='  <br>\n'
thehtml+='  Date of Birth: \n'
thehtml+='  <select name="birthDate">\n'
thehtml+='    <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option>\n'
thehtml+='    <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option>\n'
thehtml+='    <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option>\n'
thehtml+='    <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option>\n'
thehtml+='    <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option>\n'
thehtml+='    <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option>\n'
thehtml+='    <option>31</option>\n'
thehtml+='  </select>\n'
thehtml+='    \n'
thehtml+='  <select name="birthMonth">\n'
thehtml+='    <option>Jan</option> <option>Feb</option> <option>Mar</option> <option>Apr</option>\n'
thehtml+='      <option>May</option> <option>Jun</option> <option>Jul</option> <option>Aug</option>\n'
thehtml+='    <option>Sep</option> <option>Oct</option> <option>Nov</option> <option>Dec</option>\n'
thehtml+='  </select>\n'
thehtml+='    \n'
thehtml+='  <input name="birthYear" type="text" size="6" maxlength="4">\n'
thehtml+='<p>\n'
thehtml+='<input type="submit" name="Submit" value="Submit">\n'
thehtml+='<input name="reset" type="submit" id="reset" value="Reset">\n'
thehtml+='</p>\n'
}

else if(what=="3"){
thehtml='Email: <input type="text" name="textfield2">\n'
thehtml+='\n'
thehtml+='<br> Username: <input name="userName" type="text" size="12">\n'
thehtml+='  Password: <input name="password" type="text" size="12">\n'
thehtml+='<br>\n'
thehtml+='Group No: \n'
thehtml+='<input name="groupNumber" type="text" size="12">\n'
thehtml+='ID: \n'
thehtml+='<input name="idNumber" type="text" size="12">\n'
thehtml+='&nbsp;<br>\n'
thehtml+='Birthdate: \n'
thehtml+='<select name="birthDate">\n'
thehtml+='  <option>1</option><option>2</option> <option>3</option> <option>4</option> <option>5</option>\n'
thehtml+='  <option>6</option><option>7</option> <option>8</option> <option>9</option> <option>10</option>\n'
thehtml+='  <option>11</option><option>12</option> <option>13</option> <option>14</option> <option>15</option>\n'
thehtml+='  <option>16</option> <option>17</option> <option>18</option> <option>19</option><option>20</option>\n'
thehtml+='  <option>21</option><option>22</option> <option>23</option> <option>24</option><option>25</option>\n'
thehtml+='  <option>26</option> <option>2</option> <option>728</option> <option>29</option> <option>30</option>\n'
thehtml+='  <option>31</option>\n'
thehtml+='</select>\n'
thehtml+='\n'
thehtml+='<select name="birthMonth">\n'
thehtml+='  <option>Jan</option> <option>Feb</option> <option>Mar</option> <option>Apr</option><option>May</option>\n'
thehtml+='  <option>Jun</option> <option>Jul</option> <option>Aug</option> <option>Sep</option> <option>Oct</option>\n'
thehtml+='  <option>Nov</option><option>Dec</option>\n'
thehtml+='</select>\n'
thehtml+='\n'
thehtml+='<input name="birthYear" type="text" size="6" maxlength="4">\n'
thehtml+='<p>\n'
thehtml+='<input type="submit" name="Submit" value="Submit">\n'
thehtml+='<input name="reset" type="submit" id="reset" value="Reset">\n'
thehtml+='</p>\n'
}
createform.innerHTML=thehtml
}

//-->
</script>

<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onload="buildArrays();">

<form name="contactForm">

<table border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td nowrap height="11"> &nbsp;
<p>
<input name="custType" type="radio" value=1 onclick="nextGroup(this.value)">Delivery Truck1 <br>
<input name="custType" type="radio" value=2 onclick="nextGroup(this.value)">Delivery Truck 2<br>
<input name="custType" type="radio" value=3 onclick="nextGroup(this.value)">Delivery Truck 3<br>

</p>
<p>
<select name="productCat" size="1" onChange="nextGroup1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Please Select A Customer Type Above--------------</option>
<option value=" " selected>---Please Select A Customer Type Above--------------</option>
</select>
</p>
<p>
<select name="inquiryType" size="1" onChange="nextGroup2(this)">
<option value=" " selected> </option>
<option value=" " selected>---Please Select A Customer Type Above----------------</option>
<option value=" " selected>---Please Select A Customer Type Above----------------</option>
</select>
</p>
</td>
</tr>

</table>

<SPAN ID="createform"></SPAN>

</form>
</body>
</html>

Author

Commented:
wow, when i first looked at this i thought this is beyond me because it looked so different, but then i took a closer look it's so cool how you wrote those forms out.

revisiting an old question briefly--does your earlier suggestion of using:

<INPUT TYPE=button VALUE="Submit" onClick="document.forms['theformname'].submit();document.forms['form2'].submit()">

work to send the specific form "1","2" or "3" to the ASP page for validation and retrieving form input?  or will all of them go and then i have to identify which one to validate by the "1" "2" and "3"?

thanks

Author

Commented:
wow, when i first looked at this i thought this is beyond me because it looked so different, but then i took a closer look it's so cool how you wrote those forms out.

revisiting an old question briefly--does your earlier suggestion of using:

<INPUT TYPE=button VALUE="Submit" onClick="document.forms['theformname'].submit();document.forms['form2'].submit()">

work to send the specific form "1","2" or "3" to the ASP page for validation and retrieving form input?  or will all of them go and then i have to identify which one to validate by the "1" "2" and "3"?

thanks

Author

Commented:
i don't know why my comments submit twice sometimes--and look at the time difference???? sorry.

Commented:
don't press refresh 'coz it resubmits your last comment.

(just listens...)
To answer your question about the <INPUT>:

<INPUT TYPE=button VALUE="Submit" onClick="document.forms['theformname'].submit();document.forms['form2'].submit()">

This would submit, exclusively, the two forms specified, at the same time.  This might cause an error with the ASP page, though.

I really think that the best way to do this would be to have it all in one form, changing the various elements display:inline or none, and have the ASP determine what form was submitted (by seing what radio button and select boxes were selected).

Thanks for the points, and good luck!

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