Checking one field against another using jQuery - php

Question

I have come about quite a problem while programming an order submitting page, the aim of the page is to submit a dispute for an order - providing two fields are filled in, but only if one field is less than another one.
Basically, one is a drop down and the other is a disputes box, the queries are as follows:
If DisputesTextBox = "" and a drop down box = "Please Select..."
Everything is fine - submit button enabled
If DisputesTextBox != "" and dropdown box = "Please select..."
Error ( and vice versa, so if disputes is populated but dropwn = please select...) - submit button disabled
If DisputesTextox != "" and dropdown box = "Other"
Everything is fine - submit button enabled
If DisputesTextBox > shippedbox
Error - submit button disabled
<table>
<thead>
<tr><th>Item ID</th><th>Description</th><th>Dispute Quantity</th><th>Shipped Quantity</th><th>Ordered Quantity</th><th>Reason</th></tr>
</thead>
<tbody>
<?php
$data = mysql_query("SELECT * FROM `artran09` WHERE `invno` = '$invoiceno'") or die(mysql_error());
echo "<center>";
$i = -1;
echo "<form action=\"submitdispute.php?invno=".$invoiceno."&ordate=".$placed."\" method=\"POST\" onsubmit=\"return confirm('Are you sure you are ready to dispute your order?');\">";
while ($info = mysql_fetch_array($data)) {
$i += 1;
echo "<tr>";
echo "<td>".$info['item']."</td>";
echo "<td>".$info['descrip']."</td>";
echo "<td><input type=\"text\" input name=".$i." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\"></td>";
echo "<td><input type=\"text\" value=".$info['qtyshp']." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\" disabled=\"disabled\"></td>";
echo "<td><input type=\"text\" value=".$info['qtyord']." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\" disabled=\"disabled\"></td>";
echo "<td><select name = \"reason$i\">";
echo "<option>Please Select...</option>";
echo "<option>Short/Not received</option>";
echo "<option>Damaged Goods</option>";
echo "<option>Product Not Ordered</option>";
echo "</select></td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<p><input type = "submit" value = "Dispute" name ="Submit">
</form>
Thanks, hope anyone can help!
Edited for Wolf/anyone who can help - what's up with this code here:
-- code i edited --
function validateSubmit(){
// this will loop through each row in table
// Make sure to include jquery.js
$('tr').each( function() {
// Find first input
var input1 = $(this).find('input').eq(0);
var qty1 = input1.val();
// Find Second input
var input2 = $(this).find('input').eq(1);
var qty2 = input2.val();
// Find third input
var input3 = $(this).find('input').eq(2);
var qty3 = input3.val();
// Find select box
var selectBx = $(this).find('select');
var selectVal = selectBx.val();
// Add your validation code here for the inputs and select
// Return true if all validations are correct
// Else return false
if(qty1 = "" && selectVal = "Please Select...") {
return true;
alert("You have an error somewhere, please check over your quantites.");
break;
}
if (qty1 > qty2) {
return false;
alert("You have an error somewhere, please check over your quantites.");
break;
}
});
}

Answer 1

Change the following line
onsubmit=\"return confirm('Are you sure you are ready to dispute your order?');\"
to
onsubmit=\"return validateSubmit();\"
Then write the function
function validateSubmit(){
// this will loop through each row in table
// Make sure to include jquery.js
$('tr').each( function() {
// Find first input
var input1 = $(this).find('input').eq(0);
// Find Second input
var input2 = $(this).find('input').eq(1);
// Find third input
var input3 = $(this).find('input').eq(2);
// Find select box
var selectBx = $(this).find('select');
// Add your validation code here for the inputs and select
// Return true if all validations are correct
// Else return false
});
}
Note that your submit button will be enabled all the time. But submit will work only if your validations are success.