How can I check if the number entered in the input-field is higher of even as th value in my 'min' field?
<tr>
<td>Steeeeaak</td>
<td><input type="hidden" name="amount_5_min" value="10"/>
<input type="text" name="amount_5" size="4" value="10"/></td>
<td>开发者_开发技巧-</td>
<td><a href="/item/delete/eventId/2/hash/a8b5dzp9rks7164wh30j2anqh13w/itemId/5">Verwijder</a> </td>
</tr>
As you can see the first part of the name of both fields are the same ... Any possibilities here? I do a submit at the end of the form, so I guess I have to do something on submit?
Thx!
I'm guessing by the markup you posted that there are many rows, shopping cart style. In that case here's a way to loop though all rows checking the amounts on submit, just give your form/table IDs to match your selector:
$("#myForm").submit(function() {
var valid = true;
$("#myTable tr td input[name^='amount_']:last-child").each(function() {
var val = parseInt(this.value, 10); //this value
var min_val = parseInt($(this).siblings().val(), 10); //min_value
if(val < min_val) {
valid = false;
alert($(this).closest('tr').children(':first').text() + //"Steeeeaak"
" doesn't meet the minimum required value: " + min_val);
}
});
return valid; //submit aborts if any didn't meet min value
});
This function makes use of the <input>
elements being siblings, in a certain order and inside the same <td>
, just using the known HTML structure to your advantage here.
var fieldname = "amount_5";
var val1 = parseInt($("input[name="+field_name+"_min]").val(),10);
var val2 = parseInt($("input[name="+field_name+"]").val(),10);
// Compare the values
And to bind onto the submit action of the form
$("form#your_form_id_here").submit(function() {
// Use above code
});
EDIT Kevin makes a good point
EDIT 2 Updated for any input name
I'll throw this one out there just for fun (and partly because I just learned about ~~
today).
Try it out: http://jsfiddle.net/694dB/
It assumes the inputs are the only two (or at least the first two) in the row.
$('#myform').submit(function() {
var $inputs = $(this).find('input[name^=amount]');
var values = $inputs.map(function() {
return this.value;
}).get();
// If it is less than the minimum, add a class,
// and return false to stop the submit
if(~~values[1] < ~~values[0]) {
$inputs.closest('tr').addClass("someNewClassName");
return false;
}
});
Updated based on your comment. Please note, that this is effective for one row. To do the same operation on several rows, you'll need to use a loop like @Nick provided in his answer.
Article on the double bitwise operator:
http://james.padolsey.com/javascript/double-bitwise-not/
In that case, use something like:
var elms = document.getElementsByTagName("input"); //get all input tags
var texts;
var minlengths;
for (input in elms) {
var value = input.value; //'with' statement is evil
if (input.type == "text") {
texts.push(value);
} else if (input.type == "hidden") {
minlengths[value.substring(0, value.lastIndexOf("_"))] = value; //set what the field 'checks' = the minimum length
}
}
for (text in texts) { //go back through the texts because the inputs might not be right after the texts
var minlength = minlengths[text];
var textnum = parseInt(text.value, 10);
if (textnum === NaN || textnum > minlength) {
alert("One of the fields is greater than the minimum length.");
}
}
Note: This code is untested, and may not work. There is probably an "off by one" error somewhere in there.
Edit: In any case, you have to do this server-side too, because the user may tamper with the request. (Never trust the user)
Is there any specific reason why you can't just use the minlength
attribute on the text input fields?
精彩评论