How to sum up specific values that are entered in input field?

Question

My script is:

<script type = "text/javascript" >
  jQuery(document).ready(function($) {
    var $inputs = $('#input_6_1, #input_6_2, #input_6_3'),
      $sumInput = $('#input_6_4');
    $inputs.change(function() {
      var oneSum = 0;
      $inputs.each(function() {
        if ($(this).val() == "Y" || "y") {
          oneSum += $(this).val(), 1;
        }
      });
      $sumInput.val(oneSum);
    });
  }); 
</script>

If I add Y Y Y in three input fields, the output of the value is 0YYY, but I want to sum up the value to 3 as there are three y's in the input field and show 3 as output.

How can I do this?

The HTML is

<label class="gfield_label" for="input_6_1">Number</label>
<div class="ginput_container ginput_container_number">
  <input name="input_1" id="input_6_1" value="" class="medium" tabindex="1" aria-invalid="false" type="text">
</div>
</li>
<li id="field_6_2" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_2">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_2" id="input_6_2" value="" class="medium" tabindex="2" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_3" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_3">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_3" id="input_6_3" value="" class="medium" tabindex="3" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_4" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_4">Sum Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_4" id="input_6_4" value="" class="medium" tabindex="4" aria-invalid="false" type="text">
  </div>
</li>

Code snippet:

jQuery(document).ready(function($) {
  var $inputs = $('#input_6_1, #input_6_2, #input_6_3'),
    $sumInput = $('#input_6_4');
  $inputs.change(function() {
    var oneSum = 0;
    $inputs.each(function() {
      if ($(this).val() == "Y" || "y") {
        oneSum += $(this).val(), 1;
      }
    });
    $sumInput.val(oneSum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="gfield_label" for="input_6_1">Number</label>
<div class="ginput_container ginput_container_number">
  <input name="input_1" id="input_6_1" value="" class="medium" tabindex="1" aria-invalid="false" type="text">
</div>
</li>
<li id="field_6_2" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_2">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_2" id="input_6_2" value="" class="medium" tabindex="2" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_3" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_3">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_3" id="input_6_3" value="" class="medium" tabindex="3" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_4" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_4">Sum Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_4" id="input_6_4" value="" class="medium" tabindex="4" aria-invalid="false" type="text">
  </div>
</li>

Answer 1

Here is your rectified code :)

jQuery( document ).ready( function( $ ) { 
    var $inputs = $( '#input_6_1, #input_6_2, #input_6_3' ),
        $sumInput = $( '#input_6_4' );
$inputs.change( function() {
    var oneSum = 0,val=''; 
    $inputs.each( function() {
        if( $( this ).val() == "Y" ||$( this ).val() == "y" ) {
            oneSum +=1;val+=$( this ).val();
        }
    } );
    $sumInput.val( oneSum+val );
} );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="gfield_label" for="input_6_1">Number</label><div class="ginput_container ginput_container_number"><input name="input_1" id="input_6_1" value="" class="medium" tabindex="1" aria-invalid="false" type="text"></div></li><li id="field_6_2" class="gfield field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_2">Number</label><div class="ginput_container ginput_container_number"><input name="input_2" id="input_6_2" value="" class="medium" tabindex="2" aria-invalid="false" type="text"></div></li><li id="field_6_3" class="gfield field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_3">Number</label><div class="ginput_container ginput_container_number"><input name="input_3" id="input_6_3" value="" class="medium" tabindex="3" aria-invalid="false" type="text"></div></li><li id="field_6_4" class="gfield field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_4">Sum Number</label><div class="ginput_container ginput_container_number"><input name="input_4" id="input_6_4" value="" class="medium" tabindex="4" aria-invalid="false" type="text"></div></li>

Answer 2

It seems that replacing

if( $( this ).val() == "Y" || "y" ) {
  oneSum += $( this ).val(), 1;

with

if( $( this ).val() == "Y" || $( this ).val() == "y" ) {
  oneSum += 1;

should do the trick.

Answer 3

For yes/no inputs, you really should be using a checkbox instead. Then you could just count the number of checked boxes. In your case, you can query by value directly in a jquery selector and then count the number of inputs found.

$(function() {
  console.log($('input[value=Y]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="Y">
<input value="N">
<input value="Y">

This will work with radio button groups as well, but without seeing your HTML, I decided to go with the simplest input method.