Develop Reference

append parent names and ids of textboxes to newly generated ones

I'm able to generate more textboxes for user to input variables on click of a link. what i've noticed is when the new row of textboxes are generated, it generates with name text and id as id. But i want it to have the same names of the original or parent textboxes.
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td>
</tr>
<tr id="more_vechicle">
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="button" id="button" value="Save & Continue" />
</div></td>
</tr>
</table>
JS
$(document).ready(function()
{
$('.add_more').click(function(){
var id=$(':text').length;
$('#more_vechicle td').append('<input class="register-input" type="text" id='+id+' name="text'+id+'">');
});
});

Use a .each() loop to loop over the TDs. Then you can get the first input that's in each TD, clone it, and give it a new ID.
$('.add_more').click(function() {
$('#more_vechicle td').each(function() {
var these_inputs = $(this).find(".register-input");
var id = these_inputs.length;
var new_input = these_inputs.first().clone(true).val('');
new_input.attr('id', function(i, old_id) {
return old_id + id;
});
$(this).append(new_input);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="80%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CCCCFF"><strong>4. VECHICLE INFORMATION</strong></td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"> </td>
<td bgcolor="#CCCCFF"><div align="right"><a class="add_more" href="#">Add More Vechicles</a></div></td>
</tr>
<tr id="more_vechicle">
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_name[]" id="vechicle_name" class="register-input" placeholder="Name of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_type[]" id="vechicle_type" class="register-input" placeholder="Type of Vechicle" /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_registration[]" id="vechicle_registration" class="register-input" placeholder="Registration No." /></td>
<td bgcolor="#FFFFFF"><input type="text" name="vechicle_color[]" id="vechicle_color" class="register-input" placeholder="Color of Vechicle" /></td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF"><div align="center">
<input type="submit" name="button" id="button" value="Save & Continue" />
</div></td>
</tr>
</table>

The solution you're looking for is jquery's clone() function (http://api.jquery.com/clone/). Just clone #more_vehicle and insert it before the continue button.
$('.add_more').click(function() {
$('#more_vechicle').clone()
.attr('id', null) /* removing id attribute for the cloned
* tr so there is only one elemnt with that id
*/
.insertBefore('#append_anchor');
Be aware that the default behavior of clone() is to not copy event handler from the parent element.
I'd also suggest to make sure every car gets it's own tr. See the following fiddle:
https://jsfiddle.net/jcvnos9w/

enable button if value in textfield 1 is greater than textfield 2

I'm working on a project and what i want to achieve is when the value is textfield2 is lesser than the value in textfield1, the button must be enabled and i know jquery or javascript will be needed to make this happen
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div><label></label>
</td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
<div></div>
</td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password">
</td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button disabled>Submit</button></td>
</tr>
</table>
any help?

Use keyup to identify changes on the input
parseFloat parses a string argument and returns a floating point number
.prop() set one or more properties for every matched element
Try this:
$('#Textfield1,#Textfield2').on('keyup', function() {
var btn = $('button.mybutton');
if (parseFloat($('#Textfield1').val()) > parseFloat($('#Textfield2').val())) {
btn.prop('disabled', false);
} else {
btn.prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext">
<div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div>
</td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext">
<label for="Textfield2"></label>
<input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password">
</td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext">
<button disabled class='mybutton'>Submit</button>
</td>
</tr>
</table>
Fiddle here

function enableBtn(){
textBox1 = parseFloat($("#Textfield1").val());
textBox2 = parseFloat($("#Textfield2").val());
if(textBox1 > textBox2)
{
$(".redtext button").prop("disabled", false);
}else{
$(".redtext button").prop("disabled", false);
}
}
$('#Textfield2, #Textfield1').on('input',function(e){
enableBtn();
});

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</label></td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input class="amtBox" name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div></td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input class="amtBox" name="Textfield2" type="text" class="textbox" id="Textfield2" placeholder="Enter Amount"></td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button id="butSubmit" disabled>Submit</button></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('.amtBox').on('keyup keypress blur', function(){
var Textfield1 = $('#Textfield1').val();
var Textfield2 = $('#Textfield2').val();
console.log(Textfield1 + " :: " + Textfield2);
if (Textfield2 < Textfield1) {
$('#butSubmit').prop('disabled', false);
console.log("Less");
} else {
$('#butSubmit').prop('disabled', true);
console.log("More");
}
});
});
</script>
try this !!

try this Demo
$('#Textfield2, #Textfield1').on('keypress',function(){
var text1 = parseInt($('#Textfield1').val());
var text2 = parseInt($('#Textfield2').val());
var btn = $('.redtext > button');
if(text1 > text2){
btn.prop('disabled', false);
}else{
btn.prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</label></td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div></td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password"></td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button disabled>Submit</button></td>
</tr>
</table>

Try this:
HTML
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</label></td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div></td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input name="Textfield2" type="text" class="textbox" id="Textfield2" placeholder="Enter your number"></td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button disabled class=
"disabledButton">Submit</button></td>
</tr>
</table>
Javascript:
$('#Textfield2').keyup(function(){
var textBox1 = $('#Textfield1').val();
var textBox2 = $('#Textfield2').val();
if(textBox2>textBox1){
$('.disabledButton').prop("disabled", false);
}
});

javascript for form validation works in firefox but not IE8

I am very new to javascript, and took a chunk of code and modified it for my own use. It works fine in Firefox (*NIX and Windows). In IE8, the text field validation works fine, but the select drop downs return as invalid even when an option is selected.
<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var RequiredFieldIDs =
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';
function CheckRequiredFields()
{
RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
var idList = RequiredFieldIDs.split(",");
var Empties = new Array();
{
var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
if (s.length<1) { Empties.push(idList[i]); }
}
if (! Empties.length) { return true; }
var ess = new String ("\n\nThe Following are required:\n");
for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
alert (ess);
return false;
}
function TrimFormFieldValues(s)
{
s = s.replace (/^\s*/,"");
s = s.replace (/\s*$/,"");
}
</script>
<script type="text/javascript">
function ShowMenu()
{
var form = document.climo;
var field = form.Classification;
var select = field.selectedIndex;
{
if(select == 4) document.getElementById('tableHide').style.display = '';
else document.getElementById('tableHide').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function ShowMenu2()
{
var form = document.climo;
var field = form.Affiliation;
var select = field.selectedIndex;
{
if(select == 1)document.getElementById('tableHide2').style.display = "";
else document.getElementById('tableHide2').style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude: <input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude: <input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude: &nbsp<input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude: <input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>
The other select fields have the same code, just different names/values. No selection validates in IE8. Your help greatly appreciated.
edited to add all code as per request

The way you validate select box is not correct. You can get value of the selected option like select.value and it will work in Forefox and Chrome. However the proper way to do it so that IE could also understand it, is using the value of selected option:
var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);
If you have different type of controls in your form, you can check if the current one is selectbox with this check:
if (idList[i].tagName == 'SELECT') {
// this is select, get the value using el.options[el.selectedIndex].value
}

How to reduce blank space meant for hidden fields in jsp

I have a jsp page which has lot of hidden fields in it which get displayed based on conditions. Below is the code for my jsp page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>E-Form </title>
<script type="text/javascript">
</script>
<SCRIPT language="JavaScript" src="/Eform/JS/common.js"></SCRIPT>
<link href='/Eform/CSS/common.css' rel="stylesheet" type="text/css">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<!--form action="/Eform/SendMail" method="post" id='Eform' name='Eform'-->
<form action="/Eform/SendMail" method="post" enctype="multipart/form-data" id='Eform' name='Eform'>
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" class="text1">
<tr>
<td valign="middle">
<img border="0" src="/Eform/Images/Header.GIF" />
</td>
</tr>
<tr>
<td align="center" valign="middle" width="100%" class="headingText1">E-Form </td>
</tr>
<tr>
<td align="center" valign="middle" width="100%" height="50"></td>
</tr>
<tr>
<td valign="middle">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" class="commonText1">
<tr>
<td height="20" valign="middle" align="right" width="40%">Account(Existing Customers) or Projected Monthly Balance(New Customers)* : </td>
<td height="20" valign="middle" align="left" width="60%">
<select tabindex="0" name="accOrBalType" id="accOrBalType" onchange="doClear();" class="text1">
<option selected value="">-- Select One & Enter a value in to text box below --</option>
<option value="1">Account(Existing Customers)</option>
<option value="2">Projected Monthly Balance(New Customers)</option>
</select>
</td>
</tr>
<tr id = "accountNumber" style = "visibility:hidden">
<td height="20" valign="middle" align="right" width="40%">Account Number* :</td>
<td height="20" valign="middle" align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="accountNumber" size="20" onblur="selectFirst();" /></td>
</tr>
<tr id = "monthlyBalance" style = "visibility:hidden">
<td height="20" valign="middle" align="right" width="40%">Projected Monthly Balance* :</td>
<td height="20" valign="middle" align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="monthlyBalance" size="20" onblur="selectFirst();" /></td>
</tr>
<tr id = "accEnrol" style = "visibility:hidden">
<td height="20" valign="middle" align="right" width="40%">Is the account already enrolled in a checking package or program?* : </td>
<td height="20" valign="middle" align="left" width="60%"> <input type="radio" class="text1" name="accEnrol" id="accEnrolY" value="Yes" onclick="packageName();"> Yes <input type="radio" class="text1" name="enrol" id="accEnrolN" value="No" onclick="packageName();"> No</td>
</tr>
<tr id = "packages" style = "visibility:hidden">
<td height="20" valign="middle" align="right" width="40%">Package Name* : </td>
<td height="20" valign="middle" align="left" width="60%"><input type="text" maxlength="100" class="text1" name="packages" size="50"/></td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Enrolled in Business Online* : </td>
<td height="20" valign="middle" align="left" width="60%"> <input type="radio" class="text1" name="enrol" value="Yes"> Yes <input type="radio" class="text1" name="enrol" value="No"> No</td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Company Name* : </td>
<td height="20" valign="middle" align="left" width="60%"><input type="text" maxlength="100" class="text1" name="cmpName" id="cmpName" size="50" /></td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Business Industry/Description Of Business Activity* : </td>
<td height="20" valign="middle" align="left" width="60%" class="text1">
<textarea class="text1" rows="4" cols="61" name="bussAct" id="bussAct"></textarea>
</td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Business Contact's First Name* : </td>
<td height="20" valign="middle" align="left" width="60%"><input type="text" maxlength="15" class="text1" name="fName" id="fName" size="20" /></td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Business Contact's Last Name* : </td>
<td height="20" valign="middle" align="left" width="60%"><input type="text" maxlength="15" class="text1" name="lName" id="lName" size="20"/></td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Business Contact's Telephone* : </td>
<td height="20" valign="middle" align="left" width="60%">
<input type="text" value=" +1-" size="1" readonly/>
<input type="text" maxlength="10" name="contTellNo" id="contTellNo" class="text1" size="11" />
</td>
</tr>
<tr>
<td height="20" valign="middle" align="right" width="40%">Business Contact's E-mail Address* : </td>
<td height="20" valign="middle" align="left" width="60%"><input type="text" maxlength="50" class="text1" name="emailAdd" id="emailAdd" size="30" /></td>
</table>
</form>
</body>
</html>
The output looks like this
If you notice there is a huge gap between the first field and the second. The space is automatically left for all the hidden fields. It kinda looks awkward. I want to rectify this.

Using the style visibility:hidden hides an element but the element continues to take up its space on the screen.
Using the style display:none would hide the element and stop taking up space on the screen.
So simply replace all thevisibility:hidden to display:none

jquery/javascript alert if all fields are not completed

I have a form which I'd like to alert people if ALL of the fields aren't completed. I am currently using a jquery validation script for the required fields, but I need it to also let people know that not all of the fields are filled out before saving (they're not required fields, but just to let them know that the form isn't finished).
The form fields are:
type, status, rating, cterms, companyid, company, name, surname, address, suburb, city, state, country, pcode, phone, email and comments
If someone could help me out with this, that'd be great, I dont mind if it's with jquery or javascript, just something that will alert that not all of the fields are completed and if they want to continue with the save or not.
Cheers
Leanne
EDIT:
Here's the form:
<form action="/index.php?option=com_database&view=add&Itemid=3&task=save" method="post" name="adminForm" id="adminForm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="left" valign="middle" nowrap="nowrap" class="key"><strong> </strong></td>
<td></td>
</tr>
<tr>
<td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Active:</strong></td>
<td><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle"><input type="radio" name="published" id="published0" value="0" checked="checked" /></td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"><label for="published0">No</label>
</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"><input type="radio" name="published" id="published1" value="1" /></td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"><label for="published1">Yes</label></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Date:</strong></td>
<td align="left" valign="middle" nowrap="nowrap" class="admintable"><input class="text_area" type="text" name="date" id="date" size="30" value="22/09/2009" disabled="disabled" style="width: 200px;" />
</td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Type:</strong></td>
<td><select name="type" id="type" size="1" class="validate[required]" style="width: 205px;">
<option value="">- Select Type -</option>
<option value="1">Customer</option>
<option value="2">Supplier</option>
</select></td>
</tr>
<tr class="admintable">
<td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Status:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><select name="status" id="status" size="1" class="validate[required]" style="width: 205px;">
<option value="">- Select Status -</option>
<option value="1">Existing</option>
<option value="2">Potential</option>
</select></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Rating:</strong></td>
<td><select name="rating" id="rating" size="1" class="validate[required]" style="width: 205px;">
<option value="">- Select Rating -</option>
<option value="1">Principal</option>
<option value="2">Secondary</option>
<option value="3">Minor</option>
</select></td>
</tr>
<tr class="admintable">
<td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Credit Terms:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><select name="cterms" id="cterms" size="1" class="validate[required]" style="width: 205px;">
<option value="">- Select Credit Terms -</option>
<option value="1">COD</option>
<option value="2">30 Days</option>
<option value="3">60 Days</option>
<option value="4">90 Days</option>
</select></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Database:</strong></td>
<td><select name="companyid" id="companyid" size="1" class="validate[required]" style="width: 205px;">
<option value="">- Select Database -</option>
<option value="2">Cody Opal</option>
<option value="1">National Opal Collection</option>
</select></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Company:</strong></td>
<td><input class="validate[required] text_area" type="text" name="company" id="company" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Address:</strong></td>
<td><input class="validate[required] text_area" type="text" name="address" id="address" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Address 2:</strong></td>
<td><input class="text_area" type="text" name="address2" id="address2" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Suburb:</strong></td>
<td><input class="validate[required] text_area" type="text" name="suburb" id="suburb" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>City:</strong></td>
<td><input class="validate[required] text_area" type="text" name="city" id="city" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>State:</strong></td>
<td><div id="entry_state1">
<input class="validate[required] text_area" type="text" name="state" id="state" size="30" value="" style="width: 200px;" />
</div></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Postcode:</strong></td>
<td><input class="validate[required] text_area" type="text" name="pcode" id="pcode" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Country:</strong></td>
<td><select name="country" id="country" onChange="javascript: loadstate1();" class="selectstate validate[required]">
<option value="">- Select Country -</option>
</select></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Name:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="validate[required] text_area" type="text" name="name" id="name" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Surname:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="surname" id="surname" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Position:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="position" id="position" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Email:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="validate[required,custom[email]] text_area" type="text" name="email" id="email" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Secondary Contact:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="contact" id="contact" size="30" value="" style="width: 200px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Business:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="validate[required] text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
<input class="validate[required,custom[telephone]] text_area" type="text" name="phone_b" id="phone_b" size="22" value="" style="width: 160px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Direct:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
<input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_d" id="phone_d" size="22" value="" style="width: 160px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Mobile:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
<input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_m" id="phone_m" size="22" value="" style="width: 160px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Personal:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
<input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_p" id="phone_p" size="22" value="" style="width: 160px;" /></td>
</tr>
<tr>
<td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Fax:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
<input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_f" id="phone_f" size="22" value="" style="width: 160px;" /></td>
</tr>
<tr>
<td width="160" align="left" valign="top" nowrap="nowrap" class="key"><strong>Customer Comments:</strong></td>
<td align="left" valign="middle" nowrap="nowrap"><textarea name="comments" id="comments" cols="30" rows="7"></textarea></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td width="160" align="left" valign="top" nowrap="nowrap" class="key"><strong>Classifications: </strong></td>
<td><div class="company_1">
<table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables">
<tr>
<td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[71]" id="classifications[71]" value="71" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[71]">Retailer</label></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[72]" id="classifications[72]" value="72" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[72]">Media</label></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[73]" id="classifications[73]" value="73" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[73]">Consultant</label></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[74]" id="classifications[74]" value="74" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[74]">Contractor</label></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[75]" id="classifications[75]" value="75" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[75]">Other</label></td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
</table>
<input type="submit" name="submit" value="Add New Client" />
</form>

Here's a quick mock-up:
$(document).ready(function() {
$('form').submit(function() {
var incomplete = $('form :input').filter(function() {
return $(this).val() == '';
});
//if incomplete contains any elements, the form has not been filled
if(incomplete.length) {
alert('please fill out the form');
//to prevent submission of the form
return false;
}
});
});

function checkEmpty() {
var empty = false;
$("input").each(function() {
empty = ($(this).val() == "") ? true : empty;
});
if(empty) {
var empty_ok = confirm("Are you Ok with leaving stuff empty?");
return empty_ok;
}
the confirm returns a true if they click yes and false if they click no. Return that to the main validator as the value to pass to the submit() event.

Loop through each input element in a form:
$(':input', formName).each(function() {
// Check for completion of each input type
})

( This is why I asked for the markup before blindly answering )
I don't think any of the solutions above account for the logic that only one of the checkboxes must actually be checked and you shouldn't just check if each of them has a value or they would all have one by default. Here's my version which relies on the div enclosing the checkboxes to have a class of 'checkboxgroup'.
Also, the elements that are not filled in are populated to the 'errorElements' array, which you can loop through and add any warning notifications.
$(function() {
$('#adminForm').submit( function ( event ) {
var errorElements = window.errorElements = [], valid = false;
$(':input', this).not(':checkbox').each(function() {
var val = $(this).val();
if ( !val.length ) {
valid = false;
errorElements.push(this);
}
});
$('.checkboxgroup', this).each(function() {
var checkBoxes = $(':checkbox', this), oneChecked = false;
checkBoxes.each(function() {
if ( !oneChecked && !$(this).is(':checked') ) {
valid = false;
errorElements.push(this);
} else {
oneChecked = true;
}
});
});
if ( !errorElements.length ) {
valid = true;
}
if ( !valid ) {
event.preventDefault();
alert('please fill in all form fields.');
} else {
alert('congratulations');
}
});
});
Checkbox Snippet:
<div class="company_1 checkboxgroup">
<table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables">
<tr>
<td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td>
</tr>
<tr>
<td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td>
<td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td>
If you have multiple checkbox groups just have an element enclosing them with the .checkboxgroup class.