Solved

javascript code to add select box dynamically

Posted on 2008-10-23
7
1,968 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery Tree Grid 7 218
Popup message with Buttons in Java Script in C# programming 8 120
Javascript -- "RIGHT" function ? 3 130
CRM 2011 Setting Lookup Defaults 6 138
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
An article on effective troubleshooting
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…

815 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now