Solved

javascript code to add select box dynamically

Posted on 2008-10-23
7
1,981 Views
Last Modified: 2012-05-05
Hi ,
I am using the following form and what i want is a javascript code which should add a select box once somebody clicks on the "choice 4".

NOTE: The select list should come exactly below the check boxes.

Thanks
<html>
<head>
<body>
<form name = test>
<table>
 
<tr>
      <td style="HEIGHT: 30px" height="30"><p class="style3" align="right">* <span id="lblReason">Select A Choice</span>:</p></td>
      <td style="HEIGHT: 21px"><label>&nbsp;&nbsp;&nbsp;&nbsp;
                <INPUT TYPE=RADIO name="ddlReason" value="Choice 1"><label class="style3">Choice 1</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Choice 2"><label class="style3">Choice 2</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Choice 3"><label class="style3">Choice 3</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Choice 4" onclick = "test();"><label class="style3">Choice 4</label>
      
 
     </td>
</tr>
</table>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:Shiva_Kumar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22791270
try this:
<html>
<head>
<body>
<script type="text/javascript"> 
function removeSelect(){
	document.getElementById("theSelect").innerHTML="";
}
function addSelect(){
	var selectList="<select name='myOptions'>\
				<option value=''>Make a selection</option>\
				<option value='a'>A</option>\
				<option value='b'>B</option>\
				<option value='c'>C</option>\
				</select>";
	document.getElementById("theSelect").innerHTML=selectList;
}
</script>
<form name="test">
<table>
 
<tr>
      <td style="HEIGHT: 30px" height="30"><p class="style3" align="right">* <span id="lblReason">Select A Choice</span>:</p></td>
      <td style="HEIGHT: 21px">
          <INPUT TYPE=RADIO name="ddlReason" value="Choice 1"><label class="style3">Choice 1</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Choice 2"><label class="style3">Choice 2</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Choice 3" onclick = "removeSelect();"><label class="style3">Choice 3</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Choice 4" onclick = "addSelect();"><label class="style3">Choice 4</label> 
     </td>
</tr>
<tr><td></td><td><div id="theSelect"></div></td></tr>
</table>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:Shiva_Kumar
ID: 22797030
Hi,

Thank you for the code.  It works fine.  However when i add the above javascript code to my actual form it doesn't work(error on page).  Could you please let me know what am I doing wrong here.

<?
//Php validation code
 
?>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Partner Escalation</title>
<style type="text/css">
<!--
.style1 {                FONT-WEIGHT: bold; FONT-SIZE: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, 
 
sans-serif
}
.style2 {                FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.style3 {                FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
 
-->
</style>
 
<script language="text/javascript">
function addSelect(){
	var selectList="<select name='myOptions'>\
				<option value=''>Make a selection</option>\
				<option value='a'>A</option>\
				<option value='b'>B</option>\
				<option value='c'>C</option>\
				</select>";
	document.getElementById("theSelect").innerHTML=selectList;
}
 
function callcaseno()
{
var location=("http://abc.com/xyx.php?siteid=<? echo $_GET['siteid']; ?>");
this.location.href = location;
 
}
 
 
function make_blanked()
{
document.escalation.txttime.value ="";
}
 
</script>
 
 
</head>
 
<body>
 
 
<form name ="escalation" id ="escalation" action="test.php?siteid=<? echo $_GET['siteid'];?>" method="POST">
<table width="700" border="0" cellpadding="0" cellspacing="0">
  <tbody>
   <tr>
      <td colspan="2"><div class="style1" align="center"><img 
    
      <div align='center'><span id='lblPartnername'></span>&nbsp;$src Support Form</div>
      </div></td>
    </tr>
    <tr>
      <td colspan="2" height="50"><span id="lblErrMsg" 
 
style="color:Red;font-weight:bold;"></span>
          <div id="ValidationSummary1" style="color:Red;display:none;"> </div></td>
    </tr>
  </tbody>
  <div id="pnlNew">
    <tr>
      <td height="25"><div class="style3" align="left">
        <div align="right">Do you have a issue number?</div>
      </div></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <select name="ddlExisting" onChange="addSelect()" language ="javascript">              
               <option selected="selected" value="No">No</option>
              <option value="Yes">Yes</option>
            </select>
      </label></td>
    </tr>
    <tr>
      <td height="25"><p class="style3" align="right">* <span id="lblFname">First 
 
name</span>:</p></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtFname" type="text" id="txtFname" value="<?=$firstname;?>" designtimedragdrop="243" title="Enter First Name here" /> 
    </tr>
    <tr>
      <td height="25"><p class="style3" align="right">* <span id="lblLname">Last 
 
name</span>:</p></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtLname" type="text" id="txtLname" value="<?=$lastname;?>" designtimedragdrop="304" title="Enter Last Name here"/>    
 
</tr>
    <tr>
      <td height="25"><p class="style3" align="right">* <span id="lblPhone">Callback 
 
Number</span>:</p></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtPhone" type="text" id="txtPhone" value="<?=$telno;?>" designtimedragdrop="306" title="Enter Customer's Callback Number here. NOTE: Please do not enter spaces/dashes in the callback number"/>
            </td>
    </tr>
 
<tr>
      <td height="25"><p class="style3" align="right">* <span id="lblcal">Callback Date and Time</span>:</p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input onclick="ds_sh(this);" name="txtcal" id="txtcal" value="<?=$calendar;?>" readonly="readonly" style="cursor: text" title="Click here to get the Calendar to select the date" value="<?=$calendar;?>"/>
	    <input name="txttime" id="txttime" size = 4 value="<?=$time;?>" onclick="make_blanked();" title="Enter the callback time here">
<?
if(($_GET['siteid']) !="anz")
{
if(($_GET['siteid']) !="xerox") 
{
 
 
 
echo "<select name='txtzone' id='txtzone' title='Select the Time Zone here'>";
 
$style = array(''=>'Time Zone','EST'=>'EST','CST'=>'CST','MST'=>'MST','PST'=>'PST');
foreach ($style as $value=>$value_text)
{
$selected = (isset($_REQUEST['proptypeList']) && $_REQUEST['proptypeList']==$value)?" selected":"";
echo "<option value=\"$value\"$selected>$value_text</option>";
}
echo "</select>";
 
}}
?>
            </td>
    </tr>
 
 
    <tr>
      <td style="HEIGHT: 21px" height="21"><p class="style3" align="right">* <span 
 
id="lblEmail">Email Address</span>:</p></td>
      <td style="HEIGHT: 21px"><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtEmail" type="text" id="txtEmail" value="<?=$emailadd;?>" title="Enter customer's Email Address here"/>
      </td>
   </tr>
 
 
 
    <tr>
      <td style="HEIGHT: 30px" height="30"><p class="style3" align="right">* <span 
 
id="lblReason">Reason for Escalation</span>:</p></td>
      <td style="HEIGHT: 21px"><label>&nbsp;&nbsp;&nbsp;&nbsp;
                <INPUT TYPE=RADIO name="ddlReason" value="Product Escalation"><label class="style3">Product Escalation</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Long Hold Time"><label class="style3">Call Hold Times</label>
		<INPUT TYPE=RADIO name="ddlReason" value="System Down"><label class="style3">System Down</label>
		<INPUT TYPE=RADIO name="ddlReason" value="Infection" onclick = "addSelect();"><label class="style3">Infections/Viruses</label>
   
 
 
</td>
   </tr>
 
 
    
    <tr>
      <td style="HEIGHT: 30px" height="25"><p class="style2" align="right">* Description of Issue:</p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <textarea name="txtDesc" rows="3" id="txtDesc" style="width:392px;" value="<?=$description;?>" title="Enter the Description of the Issue here"></textarea>
          </td>
    </tr>
<tr>
      <td style="HEIGHT: 30px" height="30"><p class="style2" align="right">* Troubleshooting Steps Performed:</p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <textarea name="txtTr" rows="3" id="txtTr" style="width:392px;" value="<?=$troubleshootin;?>" title="Eneter the Troubleshooting steps performed by you here"></textarea>
          </td>
    </tr>
 
    <tr>
      <td height="35">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><label>&nbsp;
            <input type="submit" name="submit" id="submit" value="Submit">
      </label></td>
    </tr>
</form>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 350 total points
ID: 22797973
Due to this:
>>document.getElementById("theSelect").innerHTML=selectList;

For that to work you need some element/tag with id="theSelect". In my example I used:
<div id="theSelect"></div>

I don't know where you want your select list, but just put some element with id="theSelect" wherever you want and the select list will show there - ex:

<?
//Php validation code
 
?>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Partner Escalation</title>
<style type="text/css">
<!--
.style1 {                FONT-WEIGHT: bold; FONT-SIZE: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, 
 
sans-serif
}
.style2 {                FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.style3 {                FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
 
-->
</style>
 
<script type="text/javascript">
function addSelect(){
	var selectList="<select name='myOptions'>\
				<option value=''>Make a selection</option>\
				<option value='a'>A</option>\
				<option value='b'>B</option>\
				<option value='c'>C</option>\
				</select>";
	document.getElementById("theSelect").innerHTML=selectList;
}
 
function callcaseno()
{
	var location=("http://abc.com/xyx.php?siteid=<? echo $_GET['siteid']; ?>");
	location.href = location;
}
 
function make_blanked()
{
	document.escalation.txttime.value ="";
} 
</script>
 
 
</head>
 
<body>
 
 
<form name ="escalation" id ="escalation" action="test.php?siteid=<? echo $_GET['siteid'];?>" method="POST">
<table width="700" border="2" cellpadding="0" cellspacing="0">
  <tbody>
   <tr>
      <td colspan="2"><div class="style1" align="center"><img 
    
      <div align='center'><span id='lblPartnername'></span>&nbsp;$src Support Form</div>
      </div></td>
    </tr>
    <tr>
      <td colspan="2" height="50"><span id="lblErrMsg" style="color:Red;font-weight:bold;"></span>
          <div id="ValidationSummary1" style="color:Red;display:none;"> </div></td>
    </tr>
  </tbody>
  <div id="pnlNew">
    <tr>
      <td height="25"><div class="style3" align="left">
        <div align="right">Do you have a issue number?</div>
      </div></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <select name="ddlExisting" onchange="addSelect()">              
               <option selected="selected" value="No">No</option>
              <option value="Yes">Yes</option>
            </select>
      </label></td>
    </tr>
    <tr>
      <td height="25"><p class="style3" align="right">* <span id="lblFname">First 
 
name</span>:</p></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtFname" type="text" id="txtFname" value="<?=$firstname;?>" designtimedragdrop="243" title="Enter First Name here" /> 
    </tr>
    <tr>
      <td height="25"><p class="style3" align="right">* <span id="lblLname">Last 
 
name</span>:</p></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtLname" type="text" id="txtLname" value="<?=$lastname;?>" designtimedragdrop="304" title="Enter Last Name here"/>    
 
</tr>
    <tr>
      <td height="25"><p class="style3" align="right">* <span id="lblPhone">Callback 
 
Number</span>:</p></td>
      <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtPhone" type="text" id="txtPhone" value="<?=$telno;?>" designtimedragdrop="306" title="Enter Customer's Callback Number here. NOTE: Please do not enter spaces/dashes in the callback number"/>
            </td>
    </tr>
 
<tr>
      <td height="25"><p class="style3" align="right">* <span id="lblcal">Callback Date and Time</span>:</p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input onclick="ds_sh(this);" name="txtcal" id="txtcal" value="<?=$calendar;?>" readonly="readonly" style="cursor: text" title="Click here to get the Calendar to select the date" value="<?=$calendar;?>"/>
	    <input name="txttime" id="txttime" size = 4 value="<?=$time;?>" onclick="make_blanked();" title="Enter the callback time here">
<?
if(($_GET['siteid']) !="anz")
{
	if(($_GET['siteid']) !="xerox") 
	{
		echo "<select name='txtzone' id='txtzone' title='Select the Time Zone here'>";
		$style = array(''=>'Time Zone','EST'=>'EST','CST'=>'CST','MST'=>'MST','PST'=>'PST');
		foreach ($style as $value=>$value_text)
		{
			$selected = (isset($_REQUEST['proptypeList']) && $_REQUEST['proptypeList']==$value)?" selected":"";
			echo "<option value=\"$value\"$selected>$value_text</option>";
		}
		echo "</select>";
	}
}
?>
            </td>
    </tr>
 
 
    <tr>
      <td style="HEIGHT: 21px" height="21"><p class="style3" align="right">* <span id="lblEmail">Email Address</span>:</p></td>
      <td style="HEIGHT: 21px"><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="txtEmail" type="text" id="txtEmail" value="<?=$emailadd;?>" title="Enter customer's Email Address here"/>
      </td>
   </tr>
 
 
 
    <tr>
      <td style="HEIGHT: 30px" height="30"><p class="style3" align="right">* <span id="lblReason">Reason for Escalation</span>:</p></td>
      <td style="HEIGHT: 21px">&nbsp;&nbsp;&nbsp;&nbsp;
          <INPUT TYPE='RADIO' name="ddlReason" value="Product Escalation"><label class="style3">Product Escalation</label>
		<INPUT TYPE='RADIO' name="ddlReason" value="Long Hold Time"><label class="style3">Call Hold Times</label>
		<INPUT TYPE='RADIO' name="ddlReason" value="System Down"><label class="style3">System Down</label>
		<INPUT TYPE='RADIO' name="ddlReason" value="Infection" onclick="addSelect();"><label class="style3">Infections/Viruses</label>
   
 <div id="theSelect" style="padding-left:25px;"></div>
 
</td>
   </tr>
 
 
    
    <tr>
      <td style="HEIGHT: 30px" height="25"><p class="style2" align="right">* Description of Issue:</p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <textarea name="txtDesc" rows="3" id="txtDesc" style="width:392px;" value="<?=$description;?>" title="Enter the Description of the Issue here"></textarea>
          </td>
    </tr>
<tr>
      <td style="HEIGHT: 30px" height="30"><p class="style2" align="right">* Troubleshooting Steps Performed:</p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <textarea name="txtTr" rows="3" id="txtTr" style="width:392px;" value="<?=$troubleshootin;?>" title="Eneter the Troubleshooting steps performed by you here"></textarea>
          </td>
    </tr>
 
    <tr>
      <td height="35">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><label>&nbsp;
            <input type="submit" name="Submit" id="Submit" value="Submit">
      </label></td>
    </tr>
</form>
</body>
</html>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Shiva_Kumar
ID: 22799384
Everything works fine after adding the <div> however, one small request.  

How do I change the font style of "make a selection" to match with the other labels present in the form.

Thanks
0
 
LVL 82

Expert Comment

by:hielo
ID: 22800458
you can give the select an id OR a class and define the font style in the css at the top of your page - ex:

<style type="text/css">
.formObject{
font-family:Verdana
font-size:10px;
}
</style>
 
and add the class to the select:
var selectList="<select name='myOptions' class='formObject'>\
...
 
 
If you continue to have problems, please open another problem. The original problem has been solved.

Open in new window

0
 

Author Closing Comment

by:Shiva_Kumar
ID: 31509442
Thanks a bunch for all your help.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22833387
Why the lousy grade? Your problem was solved as requested!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem with PHP upload script 7 109
Kendo Dropdown list 3 156
Problem with small jquery script 6 54
windows script host to find process id from window title 3 197
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
This article was initially published on Monitis Blog, you can read it here . When it comes to deciding which approach to website performance monitoring is best for your business, unfortunately, like so many options in life . . . it depends. In t…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question