JQuery: Check value of input

Question

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!

Answer 1

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(funtion() {
    // Use above code
});

EDIT Kevin makes a good point

EDIT 2 Updated for any input name

Answer 2

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.

Answer 3

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/

Answer 4

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?