I am using jQuery's Validate plugin to validate the inputs. Everything is working except when you hit submit without selecting a radio button, it seems to be adding line breaks or spaces in the markup, causing the 'Yes' button to pop below the radio button.
I just want the error messages to appear in their 'error class' containers without touching the radio buttons themselves at all.
Can anyone please give me some guidance on this?
Link to demo: http://revivelab.com/demo_software/form_bug/order_form_overflow.php
This is my goal: http://i.minus.com/jbaQaXvPgsST6p.png
Update: if you look at the code in Chrome using Inspect Element, it appears spaces are being inserted around the 'Yes' text; this is what I am trying to disable.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#contact_top {}
#contact_top input text {width:200px;}
#order_style {font-size:12px;}
#orders {font-size:12px;}
#orders tr:hover {width:40px; background-color:#c3ac84;border-color:#000;}
#orders1 {font-size:10px;}
.input167 {width:200px;}
</style>
<link rel="stylesheet" type="text/css" href="css/order_style_new.css" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>
<script type="text/javascript" language="javascript">
$('.addForm').live('keyup',function autocalc(){
var oForm=$('form')[0];
if(isNaN($(this).val())){
alert('Numbers only!');
$(this).val('');
} else {
var total=0;
$('.addForm').each(function(){
var val=$(this).val()
if (val && !isNaN(val))
total+=+val
})
if (!isNaN(total)){
oForm.total.value = total;
oForm.pallets.value = Math.ceil(total / 36);
}else{
oForm.total.value = '';
oForm.pallets.value = '';
}
}
})
var tplus1 = 100;
tplus1 = tplus1 +1;
var tplus1id = 100;
tplus1id = tplus1id +1;
var tplus2 = 200;
tplus2 = tplus2 +1;
var tplus2id = 200;
tplus2id = tplus2id +1;
var tplus3 = 300;
tplus3 = tplus3 +1;
var tplus3id = 300;
tplus3id = tplus3id +1;
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " products");
}else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<strong>Factory Tinted Product: </strong><input type='text' name='TintedInputs" + tplus1id++ + "' id='tintedproduct" + tplus1++ + "' style='width:100px;'> <strong>Color Name and Code: </strong><input type='text' name='TintedInputscc" + tplus2id++ + "' id='tintedproduct" + tplus2++ + "' style='width:100px;'> <strong> QTY: </strong> <input type='text' id='TintedInputqty" + tplus3id++ + "' name='TintedInputqty" + tplus3++ + "' width='100px' class='addForm'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
var utcplus1 = 100;
utcplus1 = utcplus1 +1;
var utcplus1id = 100;
utcplus1id = utcplus1id +1;
var utcplushalf = 200;
utcplushalf = utcplushalf +1;
var utcplushalfid = 200;
utcplushalfid = utcplushalfid +1;
var utcplusgallon = 400;
utcplusgallon = utcplusgallon +1;
var utcplusgallonid = 400;
utcplusgallonid = utcplusgallonid +1;
var utcplusquart = 500;
utcplusquart = utcplusquart +1;
var utcplusquartid = 500;
utcplusquartid = utcplusquartid +1;
var utcplusqty = 600;
utcplusqty = utcplusqty +1;
var utcplusqtyid = 600;
utcplusqtyid = utcplusqtyid +1;
var utcplus3 = 300;
utcplus3 = utcplus3 +1;
var utcplus3id = 300;
utcplus3id = utcplus3id +1;
var counter1 = 1;
var limit1 = 3;
function addInput1(divName){
if (counter1 == limit1) {
alert("You have reached the limit of adding " + counter1 + " products");
}else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<strong>Universal Tint Color: </strong><input type='text' name='UNIVERSALInputs" + utcplus1++ + "' id='UNIVERSALInputs" + utcplus1id++ + "' style='width:100px;'> <input type='checkbox' name='UNIVERSALINPUTSchxcase"+ utcplusgallon++ + "' id='UNIVERSALINPUTSchxcase"+ utcplusgallonid++ + "' value='Case' style='width:13px;'>Case <input type='checkbox' name='UNIVERSALINPUTSchxgal"+ utcplusgallon++ + "' id='UNIVERSALINPUTSchxgal"+ utcplusgallonid++ + "' value='Gallon' style='width:13px;'>Gallon <input type='checkbox' name='UNIVERSALINPUTSchxhalfgal" + utcplushalf++ + "' id='UNIVERSALINPUTSchxhalfgal" + utcplushalfid++ + "' value=' 1/2 Gallon' style='width:13px;'>1/2 Gallon <input type='checkbox' name='UNIVERSALINPUTSchxquart" + utcplusquart++ + "' id='UNIVERSALINPUTSchxquart" + utcplusquartid++ + "' value='Quart' style='width:13px;'>Quart <strong style='padding-left:5px;'> QTY:</strong> <input type='text' name='UNIVERSALINPUTSchxqty" + utcplusqty++ + "' id='UNIVERSALINPUTSchxqty" + utcplusqtyid++ + "' width='100px'>";
document.getElementById(divName).appendChild(newdiv);
counter1++;
}
}
function disableCommentsFieldOrNot(val) {
if (val) {
document.forms[0].comments.value = "";
document.forms[0].comments.disabled = 1;
} else {
document.forms[0].comments.disabled = 0;
}
}
</script>
<script>
$(document).ready(function() {
$("#form1").validate();
});
</script>
<link rel="stylesheet" type="text/css" href="<?php echo $siteURL; ?>css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $siteURL; ?>css/order_style.css" />
</head>
<body>
<div id="container">
<form style="width:900px;margin:auto;border:none;" action="process/mail.php" method="post" id="form1">
<div id="contact_top" style="width:900px;position:relative;overflow:auto;">
<div id="ctleft" style="width:450px; float:left;position:absolute:top:xxx;left:xxx;">
<table width="470px" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="150" align="right" style="text-align:right"><label><strong>Dealer Name:</strong></label></td>
<td width="300"><input type="text" name="shipto" id="shipto" class="input167 required" <?php if(isset($dealer_name)){ echo "value=\"".$dealer_name."\""; } ?> size="35"/></td>
</tr>
<tr>
<td align="right" style="text-align:right"><label><strong>Contact:</strong></label></td>
<td><input type="text" name="contact" id="contact" class="input167" <?php if(isset($contact)){ echo "value=\"".$contact."\""; } ?> size="35"/></td>
</tr>
<tr>
<td align="right" style="text-align:right"><label><strong>Shipping Address:</strong></label></td>
<td><input type="text" name="address1" id="address1" class="input167" <?php if(isset($address)){ echo "value=\"".$address."\""; } ?> size="35"/></td>
</tr>
<tr>
<td align="right" style="text-align:right"><label><strong>Shipping Address Cont:</strong></label></td>
<td><input type="text" name="address_2" id="address_2" class="input167" <?php if(isset($address_2)){ echo "value=\"".$address_2."\""; } ?> size="35"/></td>
</tr>
<tr>
<td width="134" align="right" style="text-align:right"><label><strong>Phone:</strong></label></td>
<td width="300" ><input type="text" name="phone" id="phone" class="input167" <?php if(isset($address_2)){ echo "value=\"".$phone."\""; } ?> style="width: 100px;"/> <label><strong style="padding-left:15px;">Fax: </strong></label><input type="text" name="fax" id="fax" class="input167" <?php if(isset($fax)){ echo "value=\"".$fax."\""; } ?> style="width: 102px; "/></td>
</tr>
<tr>
<td align="right" style="text-align:right"><label><strong>Email Address:</strong></label></td>
<td><input type="text" name="emaill" id="emaill" class="input167 required email" style="clear:both;" <?php if(isset($email)){ echo "value=\"".$email."\""; } ?> size="35"/></td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
<div id="ctright" style="width:450px; float:right; position:absolute:top: xxx;left: xxx;">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td height="25" width="199"><strong>Purchase Order Date:</strong></td>
<td width="235"><input type="text" name="pod" id="pod" class="input100 datepicker required" value="<?php echo $today ?>" /> </td>
</tr>
<tr>
<td><strong>Bill of Lading Requested:</strong></td>
<td>
<div style="border:1px solid red;float:left;width:100px;">
<input type="radio" class="required" name="blr" id="blr" value="Yes" />Yes
<input type="radio" name="blr" id="blr" value="No" />No
</div>
<div style="border:1px solid blue;float:left;">
<label for="blr" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td><strong>Phone Call Notification:</strong></td>
<td>
<div style="border:1px solid red;float:left;width:100px;">
<input type="radio" class="required" name="pcn" id="pcn" value="Yes" />Yes
<input type="radio" name="pcn" id="pcn" value="No" />No
</div>
<div style="border:1px solid blue;float:left;">
<label for="pcn" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td><strong>Residential Delivery:</strong></td>
<td>
<div style="border:1px solid red;float:left;width:100px;">
<input type="radio" name="rdy" class="required" id="rdy" value="Yes" />Yes
<input type="radio" name="rdy" id="rdy" value="No" />No
</div>
<div style="border:1px solid blue;float:left;">
<label for="rdy" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td><strong>Lift Gate:</strong></td>
<td>
<div style="border:1px solid red;float:left;width:100px;">
<input type="radio" name="lg" id="lg" value="Yes" class="required" />Yes
<input type="radio" name="lg" id="lg" value="No" />No
</div>
<div style="border:1px solid blue;float:left;">
<label for="lg" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td style="vertical-align:top">
<strong>Special Instructions</strong><br />
</td>
<td width="235"><textarea type="text" name="NotesToDriver" id="NotesToDriver" class="input100 datepicker required" style="width:230px; height:82px;"/></textarea> </td>
</tr>
</table>
</div>
</div>
<div align="right" style="text-align:center;padding-top:20px; padding-right:auto;">
<input type="submit" name="submit" id="submit" value=" Submit Order " style="width:125px; height:45px; padding-right:auto;" />
</div>
</form>
</div>
</body>
</html>
Wrapping the 'Yes/No' commands in a span set to display:block; fixed the bug. See below for completed code.
<div id="ctright" style="width:450px; float:right; position:absolute:top: xxx;left: xxx;">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td height="25" width="199"><strong>Purchase Order Date:</strong></td>
<td width="235"><input type="text" name="pod" id="pod" class="input100 datepicker required" value="<?php echo $today ?>" /> </td>
</tr>
<tr>
<td><strong>Bill of Lading Requested:</strong></td>
<td>
<div style="float:left;width:100px;">
<div style="float:left;"><input type="radio" class="required" name="blr" id="blr" value="Yes" /></div>
<span style="display:block;width:30px;padding-top:3px;float:left;">Yes</span>
<div style="float:left;"><input type="radio" name="blr" id="blr" value="No" /></div>
<span style="display:block;width:20px;padding-top:3px;float:left;">No</span>
</div>
<div style="float:left;">
<label for="blr" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td><strong>Phone Call Notification:</strong></td>
<td>
<div style="float:left;width:100px;">
<div style="float:left;"><input type="radio" class="required" name="pcn" id="pcn" value="Yes" /></div>
<span style="display:block;width:30px;padding-top:3px;float:left;">Yes</span>
<div style="float:left;"><input type="radio" name="pcn" id="pcn" value="No" /></div>
<span style="display:block;width:20px;padding-top:3px;float:left;">No</span>
</div>
<div style="float:left;">
<label for="pcn" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td><strong>Residential Delivery:</strong></td>
<td>
<div style="float:left;width:100px;">
<div style="float:left;"><input type="radio" name="rdy" class="required" id="rdy" value="Yes" /></div>
<span style="display:block;width:30px;padding-top:3px;float:left;">Yes</span>
<div style="float:left;"><input type="radio" name="rdy" id="rdy" value="No" /></div>
<span style="display:block;width:20px;padding-top:3px;float:left;">No</span>
</div>
<div style="float:left;">
<label for="rdy" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td><strong>Lift Gate:</strong></td>
<td>
<div style="float:left;width:100px;">
<div style="float:left;"><input type="radio" name="lg" id="lg" value="Yes" class="required" /></div>
<span style="display:block;width:30px;padding-top:3px;float:left;">Yes</span>
<div style="float:left;"><input type="radio" name="lg" id="lg" value="No" /></div>
<span style="display:block;width:20px;padding-top:3px;float:left;">No</span>
</div>
<div style="float:left;">
<label for="lg" class="error" style="display:none;">Please choose one.</label>
</div>
</td>
</tr>
<tr>
<td style="vertical-align:top">
<strong>Special Instructions</strong><br />
</td>
<td width="235"><textarea type="text" name="NotesToDriver" id="NotesToDriver" class="input100 datepicker required" style="width:230px; height:82px;"/></textarea> </td>
</tr>
</table>
</div>
</div>