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
Related
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);
}
});
I have written an ASP page with javascript for validating a form, then to have it redirect (form.action) to another page but it just reloads the page. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- InstanceBegin template="/Templates/nirsaplate_forms.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="Title/Keywords" -->
<title>TED CEU/PIC Tracking System</title>
<meta name="keywords">
<script type="text/javascript">
var typesAndCovered={};
typesAndCovered['CEU']=['Philosphy & Theory','Programming','Management Techniques','Business Procedures','Facility Management, Planning & Design','Research & Evaluation','Legal Liability & Risk Management','Personal & Professional Qualities'];
typesAndCovered['PIC']=['Leadership, governance and service','Education, training, scholarship and research'];
function ChangeTypeList()
{
var typeList=document.getElementById("Atype");
var coveredList=document.getElementById("typecovered");
var selType=typeList.options[typeList.selectedIndex].value;
while (coveredList.options.length)
{
coveredList.remove(0);
}
var types=typesAndCovered[selType];
if (types)
{
for (var i=0;i<types.length;i++)
{
var Atype=new Option(types[i],i);
coveredList.options.add(Atype);
}
}
}
</script>
<script type="text/javascript">
<!--
function validateForm(form) {
if (form.Atype.value == "") {
alert("You must specify activity to track: CEU or PIC?");
form.Atype.focus();
return false;
}
if (form.DateEvent.value == "") {
alert("You must specify a date for this event.");
form.DateEvent.focus();
return false;
}
if (form.NameEvent.value == "") {
alert("You must specify a name for this event.");
form.NameEvent.focus();
return false;
}
if (form.NameSession.value == "") {
alert("You must specify a session name.");
form.NameSession.focus();
return false;
}
if (form.UnitsEarned.value == "") {
alert("You must specify how many units you earned.");
form.UnitsEarned.focus();
return false;
}
if (form.CEUPICType.value == "") {
alert("You must specify a CEU/PIC type.");
form.CEUPICType.focus();
return false;
}
if (form.TEDEvent.value == "") {
alert("You must specify if this was a TED event or not.");
form.TEDEvent.focus();
return false;
}
if (form.TypeCovered.value == "") {
alert("You must specify CEU Core Competency or PIC Category.");
form.TypeCovered.focus();
return false;
}
form.action = "display.asp";
form.submit();
return true;
}
//-->
</script>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="ChangeTypeList();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle" bgcolor="#000033">
<td> </td>
<td align="left" width="150"><a class="tedhome" href="http://www.ted.org"> TED Home</a></td>
<td id="tedtop" width="450" height="20"> </td>
<td width="150"></td>
<td> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr valign="top" bgcolor="#003399" height="60">
<td rowspan="2" colspan="2" height="80"><img src="images/ted_head_1.jpg" alt="TED" height="80" width="500" border="0"></td>
<td height="60"><img src="images/ted_head_2.jpg" alt="" height="60" width="250" border="0"></td>
</tr>
<tr valign="top" bgcolor="#003399" height="20">
<td id="toplinks" align="right" valign="middle" height="20"><p></p></td>
</tr>
<tr bgcolor="#e3e3e3">
<td colspan="3" align="center" height="20"><div id="tagline"> </div></td>
</tr>
<!-- Begin mainNav -->
<tr bgcolor="#003399">
<td colspan="3" height="20"> </td>
</tr>
<!-- End mainNav -->
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr align="left" valign="top">
<td>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr valign="top">
<td><!-- InstanceBeginEditable name="Content" -->
<div id="Content"><h1>TED CEU/PIC Tracking System</h1>
<p><font color="#cc0000">* Required field</font></p>
<form name="form" Method="post" onSubmit="return validateForm(form)">
<table width="650" border="0" cellspacing="1" cellpadding="3" align="center" bgcolor="gray">
<tr valign="top">
<td colspan="2" bgcolor="#FFCC66"><h4>CEU/PIC Details:</h4></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Activity to Track:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select name="Atype" id="Atype" onchange="ChangeTypeList();">
<option value="">-- Activity Type --</option>
<option value="CEU">CEU</option>
<option value="PIC">PIC</option></select></p></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">* </font>Date:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="DateEvent" type="text" class="ctrl" id="DateEvent" size="10" maxlength="10"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Event:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="NameEvent" type="text" id="NameEvent" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Educational Session:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="NameSession" type="text" id="NameSession" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEUs/PICs Earned:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="UnitsEarned" type="text" class="ctrl" id="UnitsEarned" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Type:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="CEUPICType" type="text" id="CEUPICType" size="25" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> TED Event:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select name="TEDEvent" id="TEDEvent"><option value="Yes" selected>Yes</option><option value="No">No</option></select></p></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Core Competency/Category Covered:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select id="typecovered"></select></p></td>
</tr>
<tr valign="top">
<td colspan="2" align="center" bgcolor="#FFCC66"><p><br><b>Submit your CEU/PIC tracking.</b></p><p align="center"> </p></td>
</tr>
<tr valign="top">
<td colspan="2" align="center" bgcolor="#FFFFFF"><p><input type="submit" value="Submit Data" name="submit" ><input type="reset" name="reset" value="Reset"></p></td>
</tr>
</table>
</form>
</div>
<!-- InstanceEndEditable -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<!-- InstanceEnd -->
</html>
Any assistance would be very helpful.
Thank you.
My guess is that you're entering an endless loop, and that it causes a "stack overflow" error ;)
Try removing the form.submit(); after the for.action = ...
form.action = "display.asp";
// form.submit(); // this is what triggers validateForm again and again...
You used form.TypeCovered in function validateForm(form), but the actual id is typecovered (all lower cases), that would cause an exception, so that the function fails
Below is the html code of my problem I need to copy the contents of one textbox to another onblur or onkeyup of similar ID. Kindly help me. The javascript function "sync" should be updated for my issue. Thanks in advance.
<html>
</head>
<body>
<div id="container">
<script type="text/javascript">
function sync(order){
var val, i, val1;
val = document.getElementsByTagName('input');
alert(val.length);
for (i=0;i<val.length;i++){
if(val[i].getAttribute('id')==order){
val1 = document.getElementById(order).value;
if(val1 != '')
break;
}
}
}
</script>
<div id="body">
<div id="wrapper">
<form id="assignship" name="assignship" action="/drivewise-dst/assignship" method="post">
<table class="wwFormTable">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" colspan="3" class="titlebar"
style="background-repeat: no-repeat; align: right"> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="17"> </td>
<td width="10" bgcolor="#CCCCCC" class="header"> </td>
<td width="110" bgcolor="#CCCCCC" class="header">Export To Excel</td>
<td width="130" bgcolor="#CCCCCC" class="header">Order #</td>
<td width="175" bgcolor="#CCCCCC" class="header">First Name</td>
<td width="205" bgcolor="#CCCCCC" class="header">Last Name</td>
<td width="142" bgcolor="#CCCCCC" class="header">Tracking #</td>
<td width="115" bgcolor="#CCCCCC" class="header">Serial #</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<div
style="width: 993px; height: 350px; overflow: auto; overflow-x: hidden; background-color: #f9f5e3;">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="7">
<div align="center"></div>
</td>
</tr>
<tr>
<td width="114">
<div align="center"><input name="Export7" type="checkbox"
id="Export7" onclick="javascript:checkedAll();" /></div>
</td>
<td width="105"> </td>
<td width="175"> </td>
<td width="175"> </td>
<td width="142"> </td>
<td width="142"> </td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="0"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="1"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="2"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="3"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1085</td>
<td width="175" class="chartcopy">CAT</td>
<td width="175" class="chartcopy">DOG</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1085" onblur="javascript:sync('1085')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="4"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3333</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="5"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3333</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="6"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3334</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3334" onblur="javascript:sync('3334')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="7"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3335</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3335" onblur="javascript:sync('3335')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
</table>
</div>
</td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="43" bgcolor="#FFFFFF"> </td>
</td>
<td width="157" bgcolor="#FFFFFF"><input type="button" alt="" id="xxx" name="xxx" value="submit"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table></form>
</div>
</div>
</div>
</body>
</html>
Your main issue is all your <input> elements have the same id, "1067". Not only is this not XHTML compliant, but it will cause issues with your javascript, as document.getElementById(order) will return multiple elements, a scenario which this function is not designed to handle.
I'd suggest applying classes to all your <input> elements, use jQuery to bind the .blur() event to each element of that class, and perform your logic that way (use jQuery's foreach enumerator rather than a for loop with id matching).
Of course you could accomplish this with regular JavaScript too (as you have done, inline "onblur" event wiring on the actual elements).
But first things first, fix up the HTML so it can play nice with JavaScript.
id is supposed to be unique, you should not have more than one element with the same id on a page, and you cannot use getElementById to reference them (it will probably return the first element in document order with the id).
You can do it...if you must, by using getElementsByTagName and a loop (somewhat similar to your code)
function getIds(id) {
var inputs = document.getElementsByTagName('input'), matches = [];
for (var i=0; i<inputs.length; i++)
if (inputs[i].getAttribute('id') == id) matches.push(inputs[i]);
return matches;
}
But you should really re-factor and put "similar" values in element classes, in which case, the code above will still work, just replace 'id' with 'class'
how can i get all songs selected when i click playselected button without selecting any songs?
</style>
<script language=JavaScript>
function checkall()
{
void(d=document);
void(el=d.getElementsByName('song[]'));
for(i=0;i<el.length;i++)
void(el[i].checked=1)
}
function uncheckall()
{
void(d2=document);
void(e2=d2.getElementsByName('song[]'));
for(i=0;i<el.length;i++)
void(el[i].checked=0)
}
</script>
<form method="post" action="/player.php" target="player">
<table width="747" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" rowspan="6" valign="top">
</td>
<td height="120" colspan="3" align="center" valign="top"></td>
<td width="176" rowspan="6" valign="top"></td>
</tr>
<tr>
<!-- movie name -->
<td width="179" height="150" align="center" valign="top"><h3><font color="#008080">moviename</font></h3>
<!-- movie Description start (add description in between these tags)-->
<pre>
</pre> <!-- movie Description end-->
</td>
<td colspan="2" valign="top"><img src="/images/moviename.jpg"></td>
</tr>
<tr>
<td width="179" height="44" align="center"><input type=submit value="Play Selected" /></td>
<td width="86"><input type=button onClick="checkall()" value="Select All" name="button"></td>
<td width="156"><input type=button onClick="uncheckall()" value="Invert Selection" name="button"></td>
</tr>
<tr>
<td colspan="3" valign="top"><table height="342" cellspacing="0" cellpadding="0" border="0" width="423" class="VERDANAFONT">
<tbody>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_1 ,/telugusongs/moviename/0_1.mp3" />
<!-- song names -->
0_1 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_2 ,/telugusongs/moviename/0_2.mp3" />
<!-- song names -->
0_2 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_3 ,/telugusongs/moviename/0_3.mp3" />
<!-- song names -->
0_3 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_4,/telugusongs/moviename/0_4.mp3" />
<!-- song names -->
0_4<br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_5 ,/telugusongs/moviename/0_5.mp3" />
<!-- song names -->
0_5 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_6 ,/telugusongs/moviename/0_6.mp3" />
<!-- song names -->
0_6<br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_7 ,/telugusongs/moviename/0_7.mp3" />
<!-- song names -->
0_7 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_8 ,/telugusongs/moviename/0_8.mp3" />
<!-- song names -->
0_8 <br />
</font></p></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
am explaining clearly... when user select one song and if click on playselect button form will post one song. that is working perfect. but when user didnot select any song any if he clicked on playselected button ,in this situation i want all songs to be selected
adding an id to your playselect button, something like this should work
javascript only approach
<input type="Button" id="PlaySelected" value="Play Selected"
onclick="checklist(myform)"/>//minor changes here made
function checklist(field)
{
var answer=false;
for (i = 0; i < field.length; i++)
{
if (field[i].type=="checkbox" && field[i].checked){
answer=true;
return false;
}
}
for (i = 0; i < field.length; i++)
{
field[i].checked = true ;
}
}
Also I forgot to mention to you to add the name "myform" to your form tag: Here is a
Click here for Demo working version
jQuery
$('#PlaySelected').click(function()
{
var answer=false;
$('input[type='checkbox']').each(function(){
answer = this.checked;
if(answer==true)
{
return false;
}
});
$('input[type='checkbox']').each(function(){
$(this).attr('checked', true);
});
});
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.