Link to home
Start Free TrialLog in
Avatar of champ_010
champ_010

asked on

JavascriptRewrite Page to Itself or Another Page and Append Text Boxes

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>
Avatar of Alopederii
Alopederii
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!
Avatar of Alopederii
Alopederii
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).
Avatar of champ_010
champ_010

ASKER

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.
Avatar of Alopederii
Alopederii
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.
Avatar of champ_010
champ_010

ASKER

o.k. thanks.
ASKER CERTIFIED SOLUTION
Avatar of Alopederii
Alopederii
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of champ_010
champ_010

ASKER

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
Avatar of champ_010
champ_010

ASKER

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
Avatar of champ_010
champ_010

ASKER

i don't know why my comments submit twice sometimes--and look at the time difference???? sorry.
Avatar of third
third
Flag of Philippines image
don't press refresh 'coz it resubmits your last comment.

(just listens...)
Avatar of Alopederii
Alopederii
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!