There are about 6-7 <select> items in a <table> column. In order to press Submit button, the condition is all <select> items should be selected. So how this can be done using Javascript..?
The sample code seems to be like this:
<table>
<tr>
<td><select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td><select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td><select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<table id="mytable">
<tr>
<td>
<select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<form action="" method="post" onsubmit="if(!check()) return false;">
<input type="submit" />
</form>
<script type="text/javascript">
function check() {
elements=document.getElementById("mytable").getElementsByTagName("select");
for(i=0;i<elements.length;i++){
if(elements[i].value == "--") { return false; }
}
return true;
}
</script>
var arr=new Array();
status=true;
function fnc()
{
elements=document.getElementById("atable").getElementsByTagName("option");
for(i=0;i<elements.length;i++)
{
arr=elements[i].value;
if(Number(arr)=='NaN')
{
status=false;
break;
}
console.log(Number(arr));
}
if(status==true)
document.getElementById("formname").submit();
}
you also give your table an id
<table id="atable">
One option is to use the jQuery validation plugin, then add "required" to all your select fields.
<form id="my_form">
<select name="select1" class="required"> ... </select>
<select name="select2" class="required"> ... </select>
<select name="select3" class="required"> ... </select>
....
</form>
Then the javascript is as simple as -
$('#my_form').validate();
All you need to do to use the plugin is include the jQuery and jQuery validation scripts in the page head
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
....
</head>
UPDATE
Obviously your requirement is a pretty simple one, and adding a full js library to your site for this use case is definitely over-kill. If this is the only validation you're going to do I'd recommend a pure js solution (such as polin's answer). However if you're likely to have further validation requirements on your site, then the jQuery validation plugin is quite powerful.
Related
I am currently working on a web form that is supposed to take in user input. The marital form asks the user if they are currently married and if they answer "yes" then another drop down type of question is suppose to appear underneath asking "how many times how you been married?" and so on and so forth. I created the decisions statements, but when I tested the marital form and put in "yes" nothing additional popped up.
The expected outcome is that when the user answers "yes" another question it is supposed to appear underneath.
Marital.php
<!doctype html>
<html lang="en">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.active {
background-color: #4CAF50;
color: white;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
<head>
</head>
<body style="text-align:center;">
<div style="margin:0 auto; text-align:center;">
<img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
</div>
<h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
<br>
<div class="navbar">
<a>Education History</a>
<a class="active" href="Marital.php">Marital History</a>
<a>Employment History</a>
<a>Military History</a>
<a>Substances History</a>
<a>Social/Personal History</a>
<a>Physical Health History</a>
<a>Mental Health History</a>
</div>
<form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">
<br></br>
<table style="margin:0 auto;">
<tr>
<td class="Question">
Are you currently married?
</td>
<td style="width:100px;">
<select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="evermarried_row">
<td>
Have you ever been married?
</td>
<td>
<select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanymarriages_row">
<td>
How many times have you been married?
</td>
<td>
<select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5 or more'>5 or more</option>
</select>
</td>
</tr>
<tr style="display:none" id="divorced_row">
<td>
Have you ever been divorced?
</td>
<td>
<select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="widowed_row">
<td>
Are you widowed?
</td>
<td>
<select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="children_row" required>
<td>
Do you have any children?
</td>
<td>
<select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanychildren_row">
<td>
How many children do you have?
</td>
<td>
<select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7 or more'>7 or more</option>
</select>
</td>
</tr>
</table>
<table style="margin:0 auto;">
<tr>
<td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
<td><input type="button" value="Back!" onclick="history.back()"></td>
<td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
</tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="Marital.js">
function Marital_Validation() {
$('#marital_save').css('border-color', '#163c6a');
$('#marital_save').css('background', 'none');
$('#marital_save').css('background-color', 'green');
$('#marital_save').css('color', 'white');
$('#marital_save').text('Saved');
$('#marital_indicator').css('background-color', 'green');
}
</script>
</body>
</html>
Marital.js
/*
Marital variables:
married
evermarried
howmanymarriages
divorced
widowed
children
howmanychildren
*/
$(function(){
$("#married").change(function(){
var option=$("#married").val();
if (option==='No'){
$("#evermarried_row").show();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#evermarried").change(function(){
var option=$("#evermarried").val();
if (option==='No'){
$("#children_row").show();
$("#howmanymarriages_row").hide();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#howmanymarriages").change(function(){
var option=$("#howmanymarriages").val();
var married=$("#married").val();
if (option==='1'){
if (married==='Yes'){
$("#children_row").show();
$('#divorced_row').hide();
$("#widowed_row").hide();
}
if (married==='No'){
$('#divorced_row').show();
}
}
if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
$('#divorced_row').show();
}
});
$("#divorced").change(function(){
var option=$("#divorced").val();
var married=$("#married").val();
var timesmarried=$("#howmanymarriages").val();
if (option==='No'){
$("#widowed_row").show();
}
if (option==='Yes'){
if (timesmarried==='1'){
$("#widowed_row").hide();
$("#children_row").show();
}
if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
$("#widowed_row").show();
}
}
});
$("#widowed").change(function(){
$("#children_row").show();
});
$("#children").change(function(){
var option=$("#children").val();
if (option==='No'){
$("#howmanychildren_row").hide();
}
if (option==='Yes'){
$("#howmanychildren_row").show();
}
});
$(".needs_saved_marital").change(function(){
var married=$("#married").val();
var evermarried=$("#evermarried").val();
var howmanymarriages=$("#howmanymarriages").val();
var divorced=$("#divorced").val();
var widowed=$("#widowed").val();
var children=$("#children").val();
var howmanychildren=$("#howmanychildren").val();
if (married==='Yes'){
$("#evermarried").attr('required',false);
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#howmanymarriages").attr('required',true);
}
if (married==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#evermarried").attr('required',true);
}
if (evermarried==='Yes'){
$("#howmanymarriages").attr('required',true);
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (evermarried==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#children").attr('required',true);
}
if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (children==='Yes'){
$("#howmanychildren").attr('required',true);
}
if (children==='No'){
$("#howmanychildren").attr('required',false);
}
});
});
It is working as expected. Checkout this fiddle: https://jsfiddle.net/ax6kfjvz/
I'm guessing you're including jQuery after your script. Or you're not including jQuery at all. Try this template:
<!doctype html>
<html lang="en">
<head>
<title>Couples Issues</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="js/your-awesome-script.js"></script>
</body>
</html>
When using a library, you must include them before your script otherwise the browser has no idea where let's say this function $() is coming from.
Here is a good article.
You should trim the strings to avoid unmatched error and better use css visibility hidden!
// like this
var option=$("#married").val().trim();
// like this
<tr style="visibility: hidden;" ></tr>
I have created a html css javascript, a tree when you select an option, another options will be visible (according the first option selected) in this example there is only 2 options.
the problem is that at the end, there is a button that should add a new form (row) with same options, to start all over, when i click that button it add new row but the script doesn't work, I have no idea how to fix it!
Here is a JSFiddle
$("#addMore").click(function() {
$(".row-fluid:last").clone().appendTo(".wrapper");
});
$("#produse").change(function() {
var $this = $(this),
value = $this.val(); // save value
$('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
$("#ModeleCanapele").show();
break;
case 'Coltare':
$("#ModeleColtare").show();
break;
case 'Mobila':
$("#ModeleMobila").show();
break;
case 'Fotolii':
$("#ModeleFotolii").show();
break;
case 'Seturi':
$("#ModeleSeturi").show();
break;
// ...etc
}
});
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
The problem is that you were generating a new row, but still referencing the first row (and you were doing so via your naive use of Ids). Instead, your code needs to operate only upon a specific row at a time -- so, I've edited your code to pass in a reference to the row, then we can use your same JQuery Selectors, but starting from the referenced row.
NOTE: Several others have been blaming the use of duplicate Ids, but clearly that is not the problem. The fact is you CAN use duplicate Ids, and it is common to do so in situations like this.
To be clear, current HTML specification does state that:
If the id value is not the empty string, it must be unique in a document. ref
But, as a separate stack exchange discussion notes, this is not the case in practice (and probably never will be). In practice, Id is only expected to be unique within a scope, such as within a reusable component (i.e., your cloneable <tr>).
$("#addMore").click(function() {
var newRow = $(".row-fluid:last").clone();
newRow.appendTo(".wrapper");
newRow.find('.sub_select_class').hide();
newRow.find( "#produse" ).change(function(){
produseChange(this, newRow);
});
});
$("#produse").change(function() {
produseChange(this, $('tr'));
});
function produseChange(self, row) {
var $this = $(self),
value = $this.val(); // save value
row.find('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
row.find("#ModeleCanapele").show();
break;
case 'Coltare':
row.find("#ModeleColtare").show();
break;
case 'Mobila':
row.find("#ModeleMobila").show();
break;
case 'Fotolii':
row.find("#ModeleFotolii").show();
break;
case 'Seturi':
row.find("#ModeleSeturi").show();
break;
// ...etc
}
}
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
IDs need to be unique. Use a class
You need to delegate the event handlers when you insert dynamic content
DRY, don't repeat yourself
function resetFunction() { // not sure what you want here?
$(this).closest(".row-fluid").remove();
}
$(function() {
$("#addMore").click(function() {
var $clone = $(".row-fluid:last").clone(true)
$('.sub_select_class',$clone).hide(); // we hide every second select
$clone.appendTo(".wrapper");
});
$(".row-fluid").on("click",".filter", resetFunction);
$(".row-fluid").on("change", ".produse", function() {
var value = $(this).val(), // save value
$parent = $(this).closest(".row-fluid");
$('.sub_select_class',$parent).hide(); // we hide every second select
$(".Modele" + value,$parent).show();
});
});
.sub_select_class {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select class="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select class="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select class="ModeleColtare sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select class="ModeleSeturi sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button class="filter" name="filter">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
I am trying to make this part of the form disappear by putting it in a div and the id = loan
To troubleshoot I put TESTTEXT1 in after the div element, and it does what I want (disappears when user clicks a radio button),However TESTTEST2 and beyond does not seem to be affected by the user's action. Does anyone know why this could be?
HTML:
<header>
<script>
function checkA(){
document.getElementById('loan').style.display='none';
document.getElementById('assigned').style.display='block';
}
function checkL(){
document.getElementById('assigned').style.display='none';
document.getElementById('loan').style.display='block';
}
</script>
</header>
<body>
<table>
<td>
<input type="radio" onclick='checkA()' name="toloan" id="0" value="0"/> <label for="0">To assign</label>
<input type="radio" onclick='checkL()' name="toloan" id="1" value="1"/> <label for="1">To loan</label>
</td>
<div id="loan">
TESTTEXT1
<tr>
<th>
<label for="borrowing_month">Borrowing date</label>
</th>
<td>
<select name="borrowing_month" id="borrowing_month">
<option value ='1' selected="selected">
TEST
</option>
</select>
<select name="borrowing_day" id="borrowing_day">
<option value="2" selected="selected">
</select>
<select name="borrowing_year" id="borrowing_year">
<option value="3" selected="selected">
</select>
</td>
</tr>
<tr>
<th>
<label for="return_month">Return date</label>
</th>
<td>
<select name="return_month" id="return_month">
<option value="4" selected="selected">
</option>
</select>
<select name="return_day" id="return_day">
<option value="5" selected="selected">
</select>
<select name="return_year" id="return_year">
<option value="6" selected="selected">
</select>
</td>
</tr>
</div>
</table>
</body>
OK I tried to remove all the php as requested.
Let it be known that you can not use div elements inside table-wrappers. If you wish to use the div element to add CSS to only part of a table. It is better to add a ID to the table head/row/data or just make a new table altogether for that specific part of the table.
As #DanielBeck points out, there is no table-wrapper, so I would try changing the <div id="loan"> to <table id="loan">.
You'll have to change the closing tag from </div> to </table>, of course, and it will change your javascript a little:
function checkA() {
document.getElementById('loan').style.display = 'none';
document.getElementById('assigned').style.display = 'table';
}
function checkL() {
document.getElementById('assigned').style.display = 'none';
document.getElementById('loan').style.display = 'table';
}
Here when i select lose from drop down then I want to change label from win to lose, is it possible to change label (header).
<td>
<select name="action" id="action" class="mondatory" onchange="getAlert()">
<option value="0">--Select--</option>
<option value="win">win</option>
<option value="los">lose</option>
</select>
</td>
<td>win</td>
<td align="left">
<input type="text" name="win" id="win" size="10" class="mondatory">
</td>
Yes, you can set onChange event listener on the select with vanilla javascript, for example:
//html
<select id='mySelect' onchange='mySelectOnChange()'>
<option value='win'>win</option>
<option value='lose'>lose</option>
</select>
<span id='result'></span>
//js
function mySelectOnChange() {
document.querySelector('#result').innerHTML = document.querySelector('#mySelect').value
}
You can do it much more simpler if you use any framework/library supporting two-way data binding. e.g. Angular.js / Vue.js
Just try this
<td>
<select name="action" id="action" class="mondatory" onchange="getAlert()">
<option value="0">--Select--</option>
<option value="win">win</option>
<option value="lose">lose</option>
</select>
</td>
<td><span id="header_td"></span></td>
<td align="left">
<input type="text" name="win" id="win" size="10" class="mondatory">
</td>
In your script
<script>
function getAlert() {
var selected_value = document.getElementById('action').value;
$("#header_td").text(selected_value);
}
</script>
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.