Develop Reference

How to remove table row if the form any of the input or select was empty?

I have a form as below, Here i am looking to remove tr row if the input text and select option was empty. and the show the table row if any of the input was not empty
As you can see the input was not empty, it was removing the entire row, it is possible check both are not empty then remove
By using Jquery
Note: table rows are dynamically adding
$(function(){
$("table#my_form tr td").each(function(){
$(this).find('input, select').each(function(){
if($(this).val()==""){
$(this).closest('tr.table_row').remove();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="TCS" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="Deloite" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess" selected>Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
</table>
</form>

To check all inputs, you could try something like this. As you mentioned, you are adding rows dynamically, so you would want some other event handler to check again for more bad rows. This code would run once on page load, and then again any time the '#removeBadRows' button is clicked.
$(function () {
removeBadRows();
$(document).on('click', '#removeBadRows', function () {
removeBadRows();
});
});
function removeBadRows() {
$("table#my_form tr").each(function () {
var badCount = 0;
var inputLength = $(this).find('input, select').length;
$(this).find('input, select').each(function () {
if ($(this).val() == "") {
badCount++;
}
});
if (badCount == inputLength) {
$(this).remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="test" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="" selected>Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby" selected>Ruby</option>
</select>
</td>
</tr>
</table>
</form>

This could be the most simple method
$(function(){
$(document).on('change', '.table_row input', function(e) {
if($(this).val()==""){
$(this).closest('.table_row').remove();
}
});
});

Add new row with button jquery then remove the button

I'm trying to create a table that have "add" button to add new rows in every new row then remove the previous button. I have a code like this.
$("#insert-more").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
Or you can see it here https://jsfiddle.net/f6xcqy2s/.
In that code the add button will show up in every rows, but i wanted the add button just show up in new row only, so there will be one button only. Do you know the way?

Hide the button like below.change the id of the button to a class and bind the button like below.it works perfectly
$('body').on('click','.insert-more',function(){
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).hide();
})
here is the fiddle

you need to put add button outside the #mytable (table) so you can get your desire output only change html part as i pasted here.
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
</tr>
</tbody>
</table>
</table>
<tr>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td></tr></table>
let me know is it ok for you ?

Here first we create an event handler function and assign it to clickHandler. Then when we append the button into the table row after that we assign that click handler to the newly added button using the code as$("#insert-more").click(clickHandler);.
$( document ).ready(function() {
var clickHandler = function() {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).remove();
$("#insert-more").click(clickHandler);
};
$("#insert-more").click(clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="insert-more btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>

Here you go with a solution https://jsfiddle.net/f6xcqy2s/4/
$(document).on('click', "#insert-more", function () {
$('#mytable tbody')
.append(`<tr>${$(this).closest('tr').html()}</tr>`);
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
In the solution, amount of jQuery code is very less.
Hope this will help you.

change form target based on dropdown selection

I want every dropdown option to have a target of "_blank" except option 4. How do I switch the target based on the option selected in the form?
<form action="mypage.php" method="post" target="_blank" />
<input type="hidden" name="turnaround" value="20">
<table>
<tr>
<td>Platform</td>
<td>
<select required id="cu" name="plat" style="min-width: 120px;">
<option value="1">1</option>
<option value="2">2 (Desktop Only)</option>
<option value="3">3 (Mobile Only)</option>
<option value="4">4 (Wildcard)</option>
<option value="5">Catch-All</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
<div><input type="submit" value="Select Platform" /></div>
</form>

Check this fiddle
js:
$("#cu").on("change",function(){
var a = $(this).val();
if(a == "4"){
$("#formId").removeAttr("target")
}else{
$("#formId").attr("target","_blank")
}
})

give your form an id:
<form action="mypage.php" id="myForm" method="post" target="_blank" />
<input type="hidden" name="turnaround" value="20">
<table>
<tr>
<td>Platform</td>
<td>
<select required id="cu" name="plat" style="min-width: 120px;">
<option value="1">1</option>
<option value="2">2 (Desktop Only)</option>
<option value="3">3 (Mobile Only)</option>
<option value="4">4 (Wildcard)</option>
<option value="5">Catch-All</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
your js:
$('#myForm').attr("target") = $('#cu').val() == "4" ? "" : "_blank";
not tested but it should work

May be you want to give class or id to submit button.
$('input[type=submit]').click(function(e){
if($('#cu').val() == '4'){
$(this).closest('form').prop('target','');
}
});

javascript- update total with discount button

/*hey. i have a order site where you can order a hotelroom. Depending on how many persons that are staying and how long you get a total price in a box. But how do I get that if you check the member button you get a discount of 20% of the total order. */
orderingsite
var prices = new Object();
function updateTotal () {
var total = 0.00;
for (var price in prices) {
total += parseInt(prices[price]);
}
document.getElementById("medlem").value=updateTotal;
document.getElementById("total").value = total;
}
function doClear()
{
document.AddressForm.customer.value = "";
document.AddressForm.adress.value = "";
document.AddressForm.city.value= "";
document.AddressForm.zip.value = "";
document.AddressForm.phone.value= "";
document.AddressForm.email.value= "";
document.ComputerForm.cases[0].checked = false; //nullstiller alle verdier fra start
document.ComputerForm.cases[1].checked = false;
document.ComputerForm.cases[2].checked = false;
document.ComputerForm.monitors[0].checked = false;
document.ComputerForm.monitors[1].checked = false;
document.ComputerForm.monitors[2].checked = false;
document.ComputerForm.faces[0].checked = false;
document.ComputerForm.faces[1].checked = false;
document.ComputerForm.faces[2].checked = false;
document.ComputerForm.dager[1].checked = false;
document.ComputerForm.dager[2].checked = false;
document.ComputerForm.dager[3].checked = false;
document.ComputerForm.dager[4].checked = false;
document.ComputerForm.dager[5].checked = false;
document.ComputerForm.dager[6].checked = false;
document.ComputerForm.pers[1].checked = false;
document.ComputerForm.pers[2].checked = false;
document.ComputerForm.pers[3].checked = false;
document.ComputerForm.pers[4].checked = false;
document.ComputerForm.pers[5].checked = false;
document.ComputerForm.pers[6].checked = false;
return;
}
//function totalPrice()
//{
// var t1 = document.ComputerForm.cases.selected.value;
// var t2 = document.ComputerForm.monitors.selected.value;
// var t3 = document.ComputerForm.printers.selected.value;
// var total = document.AddressForm.total.value;
// total.value = t1.value + t2.value + t3.value;
// }
</script>
<h1 align="center">ordering site</h1> <table border="black" cellpadding="10px" align="center"> <tr> <td>
<table cellpadding="10px">
<form name="ComputerForm">
<tr>
<td>
<strong>Member?</strong></br>
<input type="radio" name="cases" value="0" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> member </br>
<input type="radio" name="cases" value="0" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> not a member </br>
</td>
<td>
<tr>
<td>
<strong>Hotelroom</strong> <br/>
<input type="radio" name="monitors" value="250.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> singelrooom </br>
<input type="radio" name="monitors" value="500.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> double room </br>
<input type="radio" name="monitors" value="1000.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> Suite </br>
</td>
<tr>
<td>
<strong> clean up</strong></br>
<input type="radio" name="faces" value="500" onchange="javascript:prices['faces'] = this.value; updateTotal();" /> clean up - + 500,-NOK </br>
<input type="radio" name="faces" value="0" onchange="javascript:prices['faces'] = this.value; updateTotal();" /> wash your self - 0,-NOK </br>
</td>
</tr>
<b><strong>weeks</strong></b>
<select name="dager" id="dagerid" onchange="javascript:prices['dager'] = this.value; updateTotal();" />
<option value="1000" >1</option>
<option value="2000">2</option>
<option value="3000">3</option>
<option value="4000">4</option>
<option value="5000">5</option>
</select>
<br>
<br>
<b><strong>Ant. personer:</strong></b>
<select name="pers" id="persid" onchange="javascript:prices['pers'] = this.value; updateTotal();" />
<option value="1000">1</option>
<option value="2000">2</option>
<option value="3000">3</option>
<option value="4000">4</option>
<option value="5000">5</option>
</select>
<br>
<br>
<b><strong>Avreise fra;</strong></b>
<select name="antpersoner" id="antpersoner" onchange="priceChange(this);">
<option value="1">Gardermoen</option>
<option value="2">Værnes</option>
<option value="3">Stokmarknes international airport</option>
<option value="4">Rygge</option>
<option value="5">Torp</option>
</select>
<br>
<br>
<b>Avreisedato:</b>
<select name="dag" id="dag">
<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">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="mnd" id="mnd">
<option value="Oktober">Oktober</option>
<option value="November">November</option>
<option value="Desember">Desember</option>
<option value="Januar">Januar</option>
<option value="Februar">Februar</option>
<option value="Mars">Mars</option>
</select>
<select name="år" id="år">
<option value="2011">2013</option>
<option value="2012">2014</option>
<option value="2013">2015</option>
</select>
</form>
</table> </td> <td>
<table padding="10px">
<tr>
<form name="AddressForm">
Total price is:
</td>
<td>
NOK<input type="text" name="total" readonly value="0.00" size="8" id="total">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
Navn:
</td>
<td>
<input type="text" name="kunde" placeholder="Skriv inn fullt Navn" required />
</td>
</tr>
<tr>
<td>
birthdate:
</td>
<td>
<input type="number" name="birthdate" placeholder=" DD:MM:ÅR " required />
</td>
</tr>
<tr>
<td>
adress:
</td>
<td>
<input type="text" name="adress" placeholder="your adress " required />
</td>
</tr>
<tr>
<td>
zip:
</td>
<td>
<input type="text" name="poststed" placeholder="Skriv inn inn postedet ditt" required />
</td>
</tr>
<tr>
<td>
city:
</td>
<td>
<select name="kommune" >
<option value=""></option>
<option value="ST">Sør trøndelag</option>
<option value="OS">Oslo</option>
<option value="NL">Nordland</option>
<option value="SF">Sandefjord</option>
</select>
</td>
</tr>
<tr>
<td>
number:
</td>
<td>
<input type="text" name="phone" placeholder="write ur number" />
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
<input type="text" name="email" placeholder="your email">
</td>
</tr>
</form>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="order" onClick="doSubmit()" />
</td>
<td>
<input type="button" value="clear" onClick="doClear()" />
</td>
</tr>
</table> </td> </tr> </table>
<!-- side -->
<div class="side2">
<div id="undertekst">
<p> Undertekst / nyttige lenker </p>
</div>
</body>

Hide input boxes based on drop down selection

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>