Tried couple of things with no success.

The idea is to grap the value from the form and push to an array and add it all ...

the pageNext() function is supposed to just page through the form, hiding the previous and showing the next, and on the last page the idea is to have the submitBtn show something.

but for some reason, I am getting NaN pushed to the array, so I am trying to find a way to filter those NaN from my array? or not get them in the first place?

Appreciate.

$(document).ready(init);
var answersTotal = [];
var answer;

function init(){
	$('#nextBtn').on('click', pageNext);
}



function grabAnswer(){
	answers = $("select option:selected");
	values = $.map(answers ,function(option) {
  		return parseInt(option.value);
	});
	answersTotal.push(values);

	// answersTotal = answersTotal.filter(function(n){ return n != NaN });
	// console.log('answersTotal after filter: ', answersTotal);

}


function pageNext(){
	$('#nextBtn').on('click', function(){
		grabAnswer();
		console.log('values: ', values);
		
		console.log(answersTotal);
		$('.current').removeClass('current').hide().next().show().addClass('current');
		if ($('.current').hasClass('last')){
			$('#nextBtn').hide();
			$('#submitBtn').show();
		};
	});
};

     

.select2, .select3, .select4, .select5 {
	display: none;
}

#submitBtn {
	display: none;
}

<script src=".1.1/jquery.min.js"></script>
<div class="input-field first current select1">
						<p>Q1?</p>
				    <select>
				      <option value="" disabled selected>Choose your option</option>
				      <option value="1">a</option>
				      <option value="2">b</option>
				      <option value="3">c</option>
				    </select>
				  </div>
				  <div class="input-field select2">
				  	<p>q2</p>
				    <select>
				      <option value="" disabled selected>Choose your option</option>
				      <option value="2">a</option>
				      <option value="5">b</option>
				      <option value="7">c</option>
				      <option value="10">d</option>
				      <option value="12">e</option>
				    </select>
				    <!-- <label>Materialize Select</label> -->
				  </div>
				  <div class="input-field select3">
				  	<p>What do you Find More Interesting?</p>
				    <select>
				      <option value="" disabled selected>a</option>
				      <option value="1">b</option>
				      <option value="3">c</option>
				    </select>
				  </div>

Tried couple of things with no success.

The idea is to grap the value from the form and push to an array and add it all ...

the pageNext() function is supposed to just page through the form, hiding the previous and showing the next, and on the last page the idea is to have the submitBtn show something.

but for some reason, I am getting NaN pushed to the array, so I am trying to find a way to filter those NaN from my array? or not get them in the first place?

Appreciate.

$(document).ready(init);
var answersTotal = [];
var answer;

function init(){
	$('#nextBtn').on('click', pageNext);
}



function grabAnswer(){
	answers = $("select option:selected");
	values = $.map(answers ,function(option) {
  		return parseInt(option.value);
	});
	answersTotal.push(values);

	// answersTotal = answersTotal.filter(function(n){ return n != NaN });
	// console.log('answersTotal after filter: ', answersTotal);

}


function pageNext(){
	$('#nextBtn').on('click', function(){
		grabAnswer();
		console.log('values: ', values);
		
		console.log(answersTotal);
		$('.current').removeClass('current').hide().next().show().addClass('current');
		if ($('.current').hasClass('last')){
			$('#nextBtn').hide();
			$('#submitBtn').show();
		};
	});
};

     

.select2, .select3, .select4, .select5 {
	display: none;
}

#submitBtn {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field first current select1">
						<p>Q1?</p>
				    <select>
				      <option value="" disabled selected>Choose your option</option>
				      <option value="1">a</option>
				      <option value="2">b</option>
				      <option value="3">c</option>
				    </select>
				  </div>
				  <div class="input-field select2">
				  	<p>q2</p>
				    <select>
				      <option value="" disabled selected>Choose your option</option>
				      <option value="2">a</option>
				      <option value="5">b</option>
				      <option value="7">c</option>
				      <option value="10">d</option>
				      <option value="12">e</option>
				    </select>
				    <!-- <label>Materialize Select</label> -->
				  </div>
				  <div class="input-field select3">
				  	<p>What do you Find More Interesting?</p>
				    <select>
				      <option value="" disabled selected>a</option>
				      <option value="1">b</option>
				      <option value="3">c</option>
				    </select>
				  </div>

• javascript
• jquery

• You could check for Number.isNaN in the filter rather than just blindly parsing – scrappedcola Commented Aug 11, 2017 at 20:42
• 3 I'm guessing this only happens when the user doesn't select anything in the dropdowns. A simple solution would be to just set the value to 0 for the first default options – adeneo Commented Aug 11, 2017 at 21:04
• Yeah, that would do the trick. for some reason my form is jumping when you click the button, not allowing the user to answer all questions. – Lucky500 Commented Aug 11, 2017 at 21:08
• it's happening because parseInt(undefined) is NaN, fyi – jdubjdub Commented Aug 11, 2017 at 21:11
• so perhaps I should do my parseInt down the road? – Lucky500 Commented Aug 11, 2017 at 21:12

1 Answer 1

The simples way to remove NaNs from any array is to use Array.prototype.filter + Number.isNaN():

const newArray = oldArray.filter(function (value) {
    return !Number.isNaN(value);
});