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);
});
});
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 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
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'
I am building a website of yellopages in which I want to upload and display images on some pages.
First, I insert the image name in to the database while uploading. I want to get the image name on the parent page.
addproduct.php
<form action="" method="post" enctype="multipart/form-data" name="uploadform" id="uploadform">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="42%" align="right">Product Title </td>
<td width="1%"> </td>
<td width="118" height="118" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF" ><iframe src="" id="fileframe" name="fileframe" width="118" height="118" scrolling="no" frameborder="0"></iframe></td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td onclick="whatever();">value</td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td><label>
<input name="thefile" type="file" id="thefile" />
upload</label></td>
</tr>
<tr>
<td align="right">Product Description </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input name="web" type="submit" id="web" value="Continue" />
</label></td>
</tr>
</table>
</form>
Javascript in this page
function whatever() {
mmspobj=document.getElementId("fileframe");
// if (mmspobj.tagName=='iframe'){
//alert("hi");
//mmsiobj=window.frames[fileframe].document.getElementId('fileframe').value;
alert(mmspobj);
//}
}
uploader.js
function init() {
fileUploadEvents();
}
function fileUploadEvents() {
var links = document.getElementsByTagName("a");
if (links) {
for (var x=0; x<links.length; ++x) {
if (links[x].className == "uploadfile")
links[x].onclick = uploadFile;
}
}
}
function uploadFile() {
var uploadForm = document.getElementById("uploadform");
if (uploadForm) {
uploadForm.target="fileframe";
uploadForm.action="upload.php";
}
uploadForm.submit();
}
How can I get the image name in addproduct.php?
You might find it easier to have the iframe call a JavaScript function in the parent, rather than have the parent window try to read the name from the iframe.