JavaScript - Show/hide A Div When A Radio Is/isnt Selected

Hi,

I have 4 radio buttons with separate div(s)

I need to click on each radio button to show particular div(s) but I am not getting correct result Lease help

HTML Code
----------

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="1" onClick=\"get_radio_value(1);\" >

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="2" onClick=\"get_radio_value(2);\" >

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="3" onClick=\"get_radio_value(3);\" >

<input type="radio" name="list_prefer_c" id="list_prefer_c" value="4" onClick=\"get_radio_value(4);\" >

<div id="div1" style="display:none">
Facilities Management
</div>

<div id="div2" style="display:none">
<div style="font-weight:bold">Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc…
</div>

<div id="div3" style="background-color:#00B0F0;display:none">
Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc…
</div>

<div id="div4" style="background-color:#00B0F0;display:none">
Facilities Management,Contracting, MEP, Hydraulic Valves, Plumping, LV Switching, Fire alarm & Fire Fighting Trading etc…
</div>

JSCode
--------
function toggleLayer(val)
{
if(val == 1)
{
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
}

else if(val == 2)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
}

else if(val == 3)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'block';
document.getElementById('div4').style.display = 'none';
}

else if(val == 4)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'block';
}
}

I'm trying to make a comment script with show/hide divs and are so far OK, but...

I want to hide one div when another is activated...

Here is what I have so far:
Code:

<?
for ($q = 1; $q <= 5; $q++) {
	
	echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
	echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
	echo '</div>';
	
	echo '<div id="jdiv'.$q.'" style="display:none;">';
	echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
	echo '</div>';
?>
	
	<script language="javascript" type="text/javascript">
	function jchange<? echo $q; ?>(divname) {
		
		var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
		var objDivQ = document.getElementById(divname);
		
		if (currentShowingDivQ && currentShowingDivQ != objDivQ) { 
			currentShowingDivQ.style.display = 'none';
		}
		
		if(objDivQ.style.display == 'none'){       
			objDivQ.style.display = 'block';
		} else {       
			objDivQ.style.display = 'none';   
		}
	
	}
	</script>

<?
}
?>

So if I activate the first textbox, then when I activates the second I want to be able to hide the first again...

Any help i appreciated :-)

Greetings Programmers. I'm a graphics artist by trade but I also dabble in web design. I registered to this forum because I need your help.

I've been handed a web project at work - to build an intranet site. My coding skills in HTML are sufficient to get the job done and I can plug in some JS and trobleshoot where needed but I've hit a wall with regard to one seemingly simple piece of code - I can't find a script anywhere that will generate a radio button that will, once selected, stay that way pretty much forever...or until I delete the listing on the page where these buttons will sit.

I realize this isn't the concept behind these buttons but I need it to function this way because I'd like it to serve as a quick visual notification that a given employee review has been completed. These reviews will remain online for up to several months because there will be three reviews per employee over the course of that time. The selected buttons will indicate the reviews that are complete while the unselected ones will indicate which ones are still pending. I'd like the various levels of management viewing this information to know instantly, via the buttons, where we are with these reviews.

So, that's my question, can a radio button be scripted to stay selected indefinitely once it's been clicked on?

Thank you in advance for any help. It's greatly appreciated.

- Sgt. Spanky

Hey everyone, I cant seem to get this submitForm Validator to work. It needs to see if one of the two radio buttons are selected. I just cant seem to get it to work, anyone know whats wrong? Thanks.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Concert</title>
<meta http-equiv="content-type" content="text/html;
	charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
function setFormFocus() {
	document.forms[0].visitor_name.focus();
}

function validateIt() {
				if(document.forms[0].visitor_name.value == ""
				|| document.forms[0].phone.value ==""
				|| document.forms[0].email.value ==""
				|| document.forms[0].area.value ==""
				|| document.forms[0].feet.value ==""
				|| document.forms[0].bedrooms.value ==""
				|| document.forms[0].price.value ==""){
				
					window.alert("You must enter enter information in all text boxes");
					return false;	
				}
function submitForm(){
var radioSelected = false;
for (var i=0; i<5; ++i) {
if (document.forms[0].contactHow[i].checked == true) {
radioSelected = true;
	break;
}
if (radioSelected == false){
window.alert("you");
return false;
}
else
return true;
}
}
}
/* ]]> */
</script>


</head>
<body onload="setFormFocus();">
<h1>Real Estate Inquiry</h1>
<form action="FormProcessor.html" method="get" onsubmit="return validateIt(); onsubmit="return submitForm();"
enctype="application/x-www-form-urlencoded">
<p>Name<br />
<input type="text" name="visitor_name" size="50" value="Enter your name" onclick="if (this.value == 'Enter your name') this.value = '';" /></p>
<p>E-mail address<br />
<input type="text" name="email" size="50" value="Enter your e-mail address" onclick="if (this.value == 'Enter your e-mail address') this.value = '';" /></p>
<p>Phone<br />
<input type="text" name="phone" size="50" value="Enter your phone number" onclick="if (this.value == 'Enter your phone number') this.value = '';" /></p>
<p>Area of town<br />
<input type="text" name="area" size="50" value="What are of town are you interested in?" onclick="if (this.value == 'What are of town are you interested in?') this.value = '';" /></p>

<p>Property <select name="property_type">
	<option value="unselected">Select a Property Type</option>
	<option value="condo">Condos</option>
	<option value="single">Single Family Homes</option>
	<option value="multi">Multifamily Homes</option>
	<option value="mobile">Mobile Homes</option>
	<option value="land">Land</option>
</select>
Sq. feet <input type="text" name="feet" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>Bedrooms <input type="text" name="bedrooms" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
Maximum price <input type="text" name="price" size="12" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>How should we contact you? <input type="radio" name="contactHow"value="call_me" /> Call me
<input type="radio" name="contactHow" value="e-mail_me" />
E-mail me</p>
<p><input type="submit" /></p>
</form>




</body>
</html>

Hi Experts .. not sure if this is the right forum. However here is my question:

I have a date field with 25 values (prepopulated Radio Buttons) where we are asking the members to select one day to volunteer. Once a member selects a day we would like to disable that Radio button value (Greyed out) for other members. So basically out of 25 available days we would like to disable values as soon as a member selects one.

The field is on a classic ASP form with SQL Server backend.

How can I accomplish the above? Please advice.

Regards
Vinny

Hey javascript newbie,

Im trying to figure out how to add different radio if its selected or not

example:

Radio_Button1 value="5": Selected
Radio_Button2 value="15": Not Selected
Radio_Button3 value="25": Selected
Radio_Button4 value="35": Selected

var addingitup = ??? and im lost????

When a particular radio option is selected and the user presses the submit button, based on what is selected I want a particular lightbox to popup [like an alert].

The JavaScript below is what I used to turn images I created into radio buttons so I could have my own custom styles instead of using the default DOM version.

Any help is appreciated.



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<LINK REL=StyleSheet HREF="global.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">

// Leave next 2 lines as is. Customization is a few lines down.
var RadioCheckedImage = new Image();
var RadioUncheckedImage = new Image();

// Customization section:
// Specify the relative or absolute URL of each image. Examples:

RadioCheckedImage.src = "images/radio_on.png";
RadioUncheckedImage.src = "images/radio_off.png";

// No other customizations needed.
function RadioClicked(radioid,radiosetname,formid) {
// - first, uncheck all radio buttons of the set
var form = document.getElementById(formid);
for( var i = 0; i < form.length; i++ ) {
   if(form[i].name == radiosetname) {
      document.getElementById(form[i].id).checked = false;
      document.getElementById("Image"+form[i].id).src = RadioUncheckedImage.src;
      }
   }
// - then, check the clicked button
document.getElementById(radioid).checked = true;
document.getElementById("Image"+radioid).src = RadioCheckedImage.src;
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[@name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
		
      alert('One of the radio buttons is checked!');
    }
  });
});
</script>
</head>

<body>
	<div id="container">
	<img class="main_pic" src="images/cain.jpg" alt="..." />
        <img class="herman_slice" src="images/herman.png" alt="..." />
        <img class="cain_slice" src="images/cain.png" alt"..." />
        <img class="is_slice" src="images/is.png" alt="..."  />
        <img class="what_slice" src="images/what.png" alt="..."  />
        
		<!-- Form -->
		<span style="display:none;">
        <form id="MyFormID">
	    <input type="radio" name="thisradio" value="yes" id="RadioFieldID1">
            <input type="radio" name="thisradio" value="yes" id="RadioFieldID2">
            <input type="radio" name="thisradio" value="yes" id="RadioFieldID3">
            <input type="radio" name="thisradio" value="yes" id="RadioFieldID4">
        </form>
		</span>
        <!-- Start of Form -->
        <div class="radio_section">
        <img id="ImageRadioFieldID1" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID1','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="smart_slice" src="images/smart_slice.jpg" alt="..."  />
		<img id="ImageRadioFieldID2" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID2','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="smart_slice" src="images/dumb_slice.jpg" alt="..."  />
        <img id="ImageRadioFieldID3" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID3','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="average_slice" src="images/average_slice.jpg" alt="..."  />
        <img id="ImageRadioFieldID4" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID4','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="idk_slice" src="images/idk_slice.jpg" alt="..."  />
        </div>
		<!-- End of Form -->
        <img class="submit_btn" src="images/submit_btn.jpg" alt="..."  />
        
		
        
    </div>
</body>
</html>

I'm making a javascript game for a digital media class and I'm having a hard time figuring out how to code this. The idea is that there's three similar images, one that's different and the user must select the image that's different by selecting the radio button below it and pressing the Submit button.

So in the if/else statement, I want it to be programmed so that if the correct answer is selected and then submitted, it will take you to another webpage. If an incorrect answer is selected, I want an alert to pop up and say Sorry, that's Incorrect. Here's the coding I have so far, none of which is working.

Code:

<script type="text/javascript">
function processAnswer()
{

  for (i = 0; i <= 3; i++)
  {
	if (document.myForm.radSize[i].checked == true)
	{
	  size = document.myForm.radSize[i].value;
	} // end if
  } // end for loop
  alert("You Selected a Button")
} // end 


</script>

And in the body...

<div id="imagediv"><br /><br /><center>
<form name = "myForm" action="">
<table width="500" border="0">
  <tr>
    <td><center><img src="images/image2.png" /><br />
    <Input type = radio Name = r1 Value = "1" >
</center>
    </td>
    <td><center><img src="images/image1.png" /><br />
    <Input type = radio Name = r1 Value = "2" >
</center>
    </td>
    <td><center><img src="images/image2.png" /><br />
    <Input type = radio Name = r1 Value = "3" >
</center></td>
  </tr>
</table><br /><br />
<center><input type = "button"
           value = "Submit"
           onClick = "processAnswer()"/>
</center>

Any help would be greatly appreciated, I've never worked with javascript before so I'm having a really hard time!

here is the html code that i have

PHP Code:
<td valign="middle" valign="middle">
                                                <input type="radio" name="gender" id="genderM" value="Male" />&nbsp;Male&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input  type="radio" name="gender" id="genderFM" value="Female" />&nbsp;Female
                                            </td> 


and here is the js funtion

PHP Code:
    var $j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;
            
            firstName = $j('#firstName').val();
            lastName = $j('#lastName').val();
            email = $j('#email').val();
            mobile = $j('#mobile').val();
            comment = $j('#comment').val();
            if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
        
            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Mobile Number';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
                if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Email Address';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            
            if(comment.length < 5){
                error = 'Please Enter A Comment';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    } 


Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format

the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com

Thanks for your help if you give it

My goal is that when I click on the submit button, I just want to display an alert box with the values selected, and also look at this in the console.log.
Can anyone help me? Thanks.

Code:

<html>
<head>

</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(init);

function init() {
$ ("#t").submit(function() {
    var g = showCheckedValues();
    console.log(g);
    alert(g);

});


function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
}}
</script>
<body>

        <form id="t">
            <input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
            <input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
            <input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
            <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
	    <input type="submit" name="save-changes"></input>
        </form>

</body>
</html>

plzz help!!!!


i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table..

Requirement:

-design a page to keep the track of payments
-select box which holds two types (payments /adjustments)
-data when submitted to be saved in the table
-by default "all" radio box to be checked
if payment radion button is checked the fields of nly payments to be displayed
if adjustments radion button is checked the fields of nly adjustments to be displayed
-



this the code i developed soo far


[CODE]

<html>
<head>
<title> Payments/Adjustments
</title>
<script>



var num1=0;
function Output(srcHolder)
{
alert("haiiii");
//var srcTable = document.createElement("resultTable");

srcTable = document.getElementById("resultTable");
srcTable.deleteRow(srcTable.rows.length-1);
tmpRow = srcTable.insertRow();

tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.date.value;

tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.type.value+"-"+f.name.value;


tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.amount.value;
num1=f.amount.value;
var total=add();



tmpRow = srcTable.insertRow();
tmpCell = tmpRow.insertCell();
tmpCell.innerText = "amount";
tmpCell = tmpRow.insertCell();
tmpCell.innerText = total;

srcHolder.appendChild(srcTable);

if(flag==1)
{
tmpRow = srcTable.insertRow();
tmpCell = tmpRow.insertCell();
tmpCell.innerText = f.date.value;
}

}
var sum=0;
function add()
{
num1=parseInt(num1);
sum=sum+num1;
return sum;
}

</script>




</head>


<body>
<form name="f">
<table align="center">
<tr>
<td>
DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/>
</td>
<td>
For:<input type="name" id="name" title="Entername" size="40" />
</td>
<td>
Amount:<input type="name" id="amount" title="amount" size="10" />
</td>
</tr>
<tr>
<td colspan="3">
Type:<select name="type">
<option value="">--Select--</option>
<option value="adjust" >adjustments</option>
<option value="payments">payments</option>
</select>
<td>
</tr>
</table>
<br><center>
<input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/>
<input type="reset" name="Cancel" value="Cancel"/>
</center>
<hr>

<center>
<label for="type">Type</label>
<input type="radio" name="type1" value="pa"/>payments

<input type="radio" name="type1" value="ad"/>adjustments

<input type="radio" name="type1" value="all" />all

<table border="3" id="resultTable">
<thead>

<th>Date
</th>

<th>For
</th>
<th>Amount
</th>

</thead>




<tbody>

<tr>
</tr>

<tr>
</tr>
<th>
</tr>


</tbody>


</table>
<div id="srcHolder" >

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

[CODE]

Hi all,

I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked:

I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously hiding/showing the appropriate fields.

Thanks for the help!

Code:

            function checkjob(jobvalue){

                    if(jobvalue!="yes") {
                 
document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";
                        document.getElementById("empresa").style.display = "none";
                        document.getElementById("contacto").style.display = "none";

                    }else{
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("empresa").style.display = "block";
                        document.getElementById("contacto").style.display = "block";

                    }

                }

HTML

<div class="form_element">

      		<label >></label>

            <div class="radio_element">

					<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >

                    <span >yes</span>

             </div>

            <div class="radio_element">

					<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">

                    <span >no</span>

            </div>

	</div>

Hi,
I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like...

PHP Code:
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="select">Membership:</label>
    <br />
    <select name="select" id="select">
      <option value="Premium" selected="selected">premium</option>
      <option value="Bronze">bronze</option>
    </select>
  </p>
  <p>Membership No:<br />
    <input type="text" name="textfield" id="textfield" />
  </p>
  OR<br />
  Sponsor:
<br />
  <select name="select2" id="select2">
    <option value="329">329</option>
    <option value="234">234</option>
  </select>
</form> 


appreciate the help

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.

Code:

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show.
I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful.


Code:

<select id="Program" name="Program" size="1" onchange="
      $other = document.getElementById('other_program').style;
      $invoice = document.getElementById('invoice');
      if (selectedIndex==6) {
        $other.visibility='visible';
        if ($invoice.value == 'General Fund') $invoice.value='';
      } else {
        $other.visibility='hidden';
        if (selectedIndex==1) {
          $invoice.value='Renegade Fund';
        } else {
          $invoice.value='Please Specify';
        }
      }
      ">
      <option selected="selected" value="Not Selected"> - - Select One - - </option>
      <option value="Athletics">Athletics</option>
      <option value="Drum Line">Drum Line</option>
      <option value="Renegade Fund">Renegade Fund</option>
      <option value="General Scholarships">General Scholarships</option>
      <option value="President's Circle">President's Circle</option>
      <option value="Other">Other</option>
    </select>

    <span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>

    <!-- the following is the new select group ive set up
    <span id="alumni">
        <select id="select-alumni" name="select-alumni" size="1">
            <option selected="selected" value="Not Selected">Yes or No</option>
            <option value="Yes-alumni">Yes</option>
            <option value="Not-alumni">No</option>
        </select>
    </span>
    -->