CODEWITHSUNDEEP
javascriptjquery
user2054545
user2054545

Reputation: 161

javascript function retrieve input[type=number] and filter them based on the value

I have several input fields of type number, which users have to fill in. I need a script that will display a new page only once users have at least one non-zero value for these fields. So I need a function that checks that at least one input of type number is larger than zero. Below is the function, in the script, that I wrote to attempt to implement this conditional page-switching (it calls another function which works and I am not showing here). The issue is with var filledValue. It returns undefined. I would like it to get all input elements of type number that have a raw value larger than 0 and return the id of that element. If the resulting variable is non-empty, then move on.

function NextTrial() {
var filledValue = $("input[type=number].val()>0", 
    "#page" + order[currentTrial]).id;
if (filledValue) {
    $("#page" + order[currentTrial]).hide();
    currentTrial++;
    ShowTrial(currentTrial);
} else {
    alert('Please answer the question before moving on!');
}
}

A sufficient excerpt of the HTML is:

<div id="answercol1">
<p><big>Government:</big></p>

<div class="fieldEntry"><label for="gvt">federal (USA)</label>&nbsp;<input id="fedgvt" min="0" name="fedgvt" size="4" type="number" value="0"></div>

<div class="fieldEntry"><label for="gvt">state or local</label>&nbsp;<input id="stategvt" min="0" name="stategvt" size="4" type="number" value="0"></div>

<div class="fieldEntry"><label for="tribalgvt">tribal</label>&nbsp;<input id="tribalgvt" min="0" name="tribalgvt" type="number" value="0"></div>
</div>

The function that I ended up using is:

function NextTrial() {
var answers = 0;
$("input[type=number]").each(function(){
    if ($(this).val()>0) {
    answers++
    }
})
if (answers>0){  
    $("#page" + order[currentTrial]).hide();
        currentTrial++;
        ShowTrial(currentTrial);
    } else {
        alert('Please answer the question before moving on!');
    }
}

Upvotes: 1

Views: 133

Answers (2)

Patrick Motard
Patrick Motard

Reputation: 2660

var ids = ['fedgvt', 'stategvt', 'tribalgvt'];
function GetValidInputs(inputIds){
  //ids to return
  var rets = [];
  //loop through given inputs
  inputIds.each(function(id){
    //get input value of each based on their id
    var val = ("#"+id).val() > 0;
    //ternary: if value is > 0 push it to array GetValidInputs returns
    //else do nothing
    val > 0 ? rets.push(val) : 0;
  };  
  //return desired ids
  return rets;
};
//call it and see if it works
GetValidInputs(ids);

Something like the above would work if i'm understanding your question. edit: added comments for clarity

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You have an invalid code and it's not clear what you're trying to achieve,I'm not sure if that really what you want but try the following :

function NextTrial() {
    //"#page" + order[currentTrial]).id; //Not sure what this line is used for
    var currentTrial = 0;

    $("input[type=number]").each(function(){
        if ($(this).val()>0) {
            $("#page" + order[currentTrial]).hide();
            currentTrial++;
            ShowTrial(currentTrial);
        } else {
            alert('Please answer the question before moving on!');
        }
    })
}

That will loop through all the fields with type number and check if the value of everyone is >0.

Hope this helps.

Upvotes: 1

Related Questions