Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Looping through input fields for validation using Jquery each()

Tags:

I'm making a form and would like the code to execute only if the input values are numbers. I'm trying to avoid using some kind of validation plugin and was wondering if there is a way to loop through the input fields and check for the values.

I've been trying the following but I think my logic is wrong:

(#monthlyincome is the form id)

$("#submit").click(function() {    $("#monthlyincome input").each(function() {         if (!isNaN(this.value)) {        // process stuff here         }     });  }); 

Any ideas?

This is the whole updated code:

$("#submit").click(function() {      $("#monthlyincome input[type=text]").each(function() {         if (!isNaN(this.value)) {             // processing data                   var age         = parseInt($("#age").val());             var startingage = parseInt($("#startingage").val());              if (startingage - age > 0) {                   $("#field1").val(startingage - age);                 $("#field3").val($("#field1").val());                  var inflationyrs    = parseInt($("#field3").val());                 var inflationprc    = $("#field4").val() / 100;                 var inflationfactor = Math.pow(1 + inflationprc, inflationyrs);                 $("#field5").val(inflationfactor.toFixed(2));                   var estyearlyinc    = $("#field6").val();                 var inflatedyearlyinc = inflationfactor * estyearlyinc;                 $("#field7").val(FormatNumberBy3(inflatedyearlyinc.toFixed(0), ",", "."));                  var estincyears = $("#field2").val();                 var esttotalinc = estincyears * inflatedyearlyinc;                 $("#field8").val(FormatNumberBy3(esttotalinc.toFixed(0), ",", "."));                  var investmentrate   = $("#field9").val() / 100;                 var investmentfactor = Math.pow(1 + investmentrate, inflationyrs);                 $("#field10").val(investmentfactor.toFixed(2));                  var currentsavings = $("#field11").val();                 var futuresavings  = currentsavings * investmentfactor;                 $("#field12").val(FormatNumberBy3(futuresavings.toFixed(0), ",", "."));                  //final calculations                 var futurevalue = (1 * (Math.pow(1 + investmentrate, inflationyrs) - 1) / investmentrate);                 var finalvalue = (1 / futurevalue * (esttotalinc - futuresavings));                  $("#field13").val(FormatNumberBy3(finalvalue.toFixed(0), ",", "."));              }             // end processing         }     });  }); 

FormatNumberBy3 is a function for... formatting the numbers. :)

like image 910
Alex Berg Avatar asked Jan 21 '11 11:01

Alex Berg


People also ask

How to Loop through input jQuery?

The inputs can be filtered by specifying the :input selector in jQuery that selects every type of input on the element it is used. Next, we will use the each() method to iterate over the inputs to display the values or perform any operation as needed. Syntax: $('#id *').

How to get all input values in jQuery?

To iterate through all the inputs in a form you can do this: $("form#formID :input"). each(function(){ var input = $(this); // This is the jquery object of the input, do what you will });

What is .each in jQuery?

each() jQuery's each() function is used to loop through each element of the target jQuery object — an object that contains one or more DOM elements, and exposes all jQuery functions. It's very useful for multi-element DOM manipulation, as well as iterating over arbitrary arrays and object properties.


2 Answers

Well testing here this works just fine:

$(function() {     $("#submit").click(function() {         $("#myForm input[type=text]").each(function() {             if(!isNaN(this.value)) {                 alert(this.value + " is a valid number");             }         });         return false;     }); }); 

on a form looking like this:

<form method="post" action="" id="myForm">     <input type="text" value="1234" />     <input type="text" value="1234fd" />     <input type="text" value="1234as" />     <input type="text" value="1234gf" />     <input type="submit" value="Send" id="submit" /> </form> 

Move the return false around as you see fit

Edit: link to code sdded to OPs form http://pastebin.com/UajaEc2e

like image 64
Sondre Avatar answered Oct 14 '22 18:10

Sondre


The value is a string. You need to try to convert it to a number first. In this case a simple unitary + will do the trick:

if (!isNaN(+this.value)) {   // process stuff here } 
like image 35
RoToRa Avatar answered Oct 14 '22 16:10

RoToRa