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.
Related
I've been working on a form where I'm retrieving the city/state information using JSON file. I've reached to a stage where I can see the related city/state, when the user enters their PIN code. Now the bit that i'm stuck on is, on parsing this information to the database when the user submits the form.
The information on city/state is getting populated in the field on the form, immediately after filling in the PIN code but I'm not able to get this data entered into the database, despite trying multiple option (hidden field, trying to store in a variable).
So far, the form gets filled in easily and is taking all the information, except for the details getting populated in the field.
My form is as follows;
<?php
include("inc/dbconnect.php");
session_start();
$username=$_SESSION['username'];
if($username=="")
{
header("location:index.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add new lead</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="inc/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
.ui-autocomplete-loading {
background: white url("img/ui-anim_basic_16x16.gif") right center no-repeat;
}
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script src="inc/jquery.min.js"></script>
<script src="inc/jquery-ui.min.js"></script>
<script>
$(document).ready(
function () {
$( "#datepicker" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
<script>
$(document).ready(
function () {
$( "#datepicker2" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
<script>
$(document).ready(
function () {
$( "#datepicker3" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
</head>
<body>
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30"><?php include("inc/header2.php")?></td>
</tr>
<tr>
<td style="padding:30px;"><form action="addlead.php" method="post" enctype="multipart/form-data" name="form" id="form">
<table width="660" border="0" align="center" cellpadding="1" cellspacing="1" class="resultborder">
<tr>
<td width="684" colspan="2" align="center" valign="middle" class="resultheading2">Add new lead</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="padding-top:5px;"><?php if(isset($msg)) {echo $msg;}?></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="padding-top:5px;"><table width="660" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td align="left" class="fieldhome">Lead source</td>
<td align="left" valign="middle"><select name="source" id="source" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" required>
<option value="">Select lead source</option>
<option value="Sales ID">Sales ID</option>
<option value="Call back">Call Back</option>
<option value="Toll Free">Toll Free</option>
<option value="Walk-in">Walk-in</option>
<option value="Referral">Referral</option>
<option value="Exhibition">Exhibition Data</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">CEP reference (if any)</td>
<td align="left" valign="middle"><select name="cep_ref" id="cep_ref" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select CEP reference</option>
<option value="NA">Not Applicable</option>
<option value="Pallavi">Pallavi</option>
<option value="Pooja">Pooja</option>
<option value="Rashmi">Rashmi</option>
<option value="Savita">Savita</option>
<option value="Shaily">Shaily</option>
</select> </td>
</tr>
<tr>
<td width="209" align="left" class="fieldhome">Lead date</td>
<td width="416" align="left" valign="middle"><input id="datepicker" name="inq_date" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Call date</td>
<td align="left" valign="middle"><input id="datepicker2" name="call_date" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Company Name</td>
<td align="left" valign="middle"><input type="text" name="company" id="company" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Customers Name</td>
<td align="left" valign="middle"><input type="text" name="name" id="name" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Mobile number</td>
<td align="left" valign="middle"><input type="text" name="mobile" id="mobile" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Landline number</td>
<td align="left" valign="middle"><input type="text" name="phone" id="phone" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Email</td>
<td align="left" valign="middle"><input type="text" name="email" id="email" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Designation</td>
<td align="left" valign="middle"><input type="text" name="designation" id="designation" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Nature of Industry</td>
<td align="left" valign="middle"><select name="nature_ind" id="nature_ind" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select Nature of Industry</option>
<option value="Trader">Trader</option>
<option value="Manufacturer">Manufacturer</option>
<option value="Individual">Individual</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Address</td>
<td align="left" valign="middle"><input type="text" name="address" id="address" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Pin Code</td>
<td align="left" valign="middle">
<div>
<input type="text" id="pin" name="pin" placeholder="Enter pincode" width="40%"><span style="color:red; font-size:9px;"> Enter at least 3 digit to show auto-complete.</span></div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#pin" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "pincodes.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3, // Set minum input length
select: function( event, ui ) {
//do something on select event
var vl = ui.item.id;
var data = vl.split("-");
console.log(data);
$("#city").html(data[2]);
$("#taluka").html(data[3]);
$("#state").html(data[4]);
//console.log(ui.item); // ui.item is responded json from server
},
open: function() {
// D0 something on open event.
},
close: function() {
// Do omething on close event
}
});
});
</script>
</td>
</tr>
<tr>
<td align="left" class="fieldhome">Taluka:</td>
<td align="left" valign="middle"><span id="taluka"></span> <?php $taluka='<span id="taluka"></span>'?></td>
</tr>
<tr>
<td align="left" class="fieldhome">City:</td>
<td align="left" valign="middle"><span id="city"></span> <input type="hidden" name="city" id="city" value="" />
</td>
</tr>
<tr>
<td align="left" class="fieldhome">State:</td>
<td align="left" valign="middle"><span id="state" name="state"></span></td>
</tr>
<tr>
<td align="left" class="fieldhome">Potential</td>
<td align="left" valign="middle"><select name="potential" id="potential" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select lead potential</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Purchases what all?</td>
<td align="left" valign="middle"><textarea rows="2" cols="32" name="what_purchases" style="padding:2px; font-family:Arial; font-size:18px;"></textarea></td>
</tr>
<tr>
<td align="left" class="fieldhome">Other important contacts</td>
<td align="left" valign="middle"><textarea rows="2" cols="32" name="other_contacts" style="padding:2px; font-family:Arial; font-size:18px;"></textarea></td>
</tr>
<tr>
<td align="left" class="fieldhome">Turn over</td>
<td align="left" valign="middle"><select name="turnover" id="turnover" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select Customer's Turnover</option>
<option value="Less than 50L">Less than 50L</option>
<option value="1Cr to 2Cr">1Cr - 2Cr</option>
<option value="2Cr to 5Cr">2Cr-5Cr</option>
<option value="5Cr to 10Cr">5Cr-10Cr</option>
<option value="10Cr plus">10Cr+</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Total Employees</td>
<td align="left" valign="middle"><select name="employees" id="employees" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Total number of employees</option>
<option value="1">1</option>
<option value="2 to 5">2-5</option>
<option value="5 to 10">5-10</option>
<option value="10 to 100">10-100</option>
<option value="100 to 500">100-500</option>
<option value="500 plus">500+</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">New customer?</td>
<td align="left" valign="middle"><select name="new_cust" id="new_cust" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" required>
<option value="">Please choose if a new lead?</option>
<option value="Yes">Yes</option>
<option value="Existing-lat">Existing-LAT</option>
<option value="Existing-other">Existing-Other</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Follow up date</td>
<td align="left" valign="middle"><input id="datepicker3" name="follow_up" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Lead Status</td>
<td align="left" valign="middle"><select name="lead_status" id="lead_status" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select lead status</option>
<option value="Won-online">Won-online</option>
<option value="Won-offline">Won-offline</option>
<option value="Lost">Lost</option>
<option value="Regret">Regret</option>
<option value="Disqualified">Disqualified</option>
<option value="Not reachable">Not reachable</option>
<option value="Hold">Hold</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Remarks</td>
<td align="left" valign="middle"><textarea rows="8" cols="32" name="remarks" style="padding:2px; font-family:Arial; font-size:18px;"></textarea></td>
</tr>
<tr>
<td align="center" class="fieldhome"> </td>
<td align="left" valign="middle"><input type="submit" name="submit" value="Submit" style="width:80px; font-size:18px; padding:8px; font-weight:bold; font-family:Arial; color:#333333;" /></td>
</tr>
</table></td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td><?php include "inc/footer.php"?></td>
</tr>
</table>
</body>
</html>
Problem may be with "multipart/form-data". Try to use "urlencoded" instead of "multipart/form-data" (remove enctype="multipart/form-data" from your form).
Not sure if I'm right but i think that when you do
$("#city").html(data[2]);
$("#taluka").html(data[3]);
$("#state").html(data[4]);
you are actually changing the HTML itself with data[] and not the value of the
<input type="hidden" name="city" id="city" value="" />
I would like to print this script currency format thousand separator with comma or dot with javascript.
I mean ,for example I would print 1.001,00 instead of 1001
which code should I add for this script ?
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});
});
</script>
<form name="invoice form" action="saveToDatabase.java">
<table width="30%" border="1" height="30%">
<tbody>
<tr>
<td colspan="5" align="center">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input value="400" name="unitprice1" size="4" type="text"></td>
<td width="20%"><input name="quantity1" value="2" size="2" type="text"></td>
<td width="25%"><input name="price1" value="400" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input value="700" name="unitprice2" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity2" value="1" size="2" type="text"></td>
<td width="25%"><input name="price2=" value="700" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input value="50" name="unitprice1" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity1" value="3" size="2" type="text"></td>
<td width="25%"><input name="price1" value="150" size="4" type="text"></td>
</tr>
<tr>
<td colspan="5" align="right">Total<input name="subtotal" value="1250" size="12" disabled="" type="text"></td>
</tr>
</tbody>
</table>
</form>
JSfiddle link
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
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'