Multiply value from input box to a fixed value in a table (HTML)

Question

I am trying to create a table where the value from the first cell in the row will multiply to the value of the second cell of the table (same row).

I made this work when I have two input boxes. But it does not work when I have one input box and one fixed value. Here is the snippet that works :

 $(document).ready(function () {
       $(".txtMult input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           $("tr.txtMult").each(function () {
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();
               var $total = ($val1 * 1) * ($val2 * 1) - ($val1 * 1)
               $('.multTotal',this).text($total.toPrecision(2));
               mult += $total;
           });
           $("#grandTotal").text(mult);
       }
  });

  
h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: fixed;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 15px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}


/* demo styles */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: #fb887c;
  font-family: 'Roboto', sans-serif;
}
section{
  margin: 50px;
}


*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ac-custom {
	padding: 0 1em;
	max-width: 900px;
	margin: 0 auto;
}

.ac-custom h2 {
	font-size: 1em;
	font-weight: 300;
	padding: 0 0 0.5em;
	margin: 0 0 30px;
	color:#000;
}

.ac-custom ul,
.ac-custom ol {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 800px;
}

.ac-custom li {
	margin: 0 auto;
	padding: 0.5em 0;
	position: relative;
}

.ac-custom label {
	display: inline-block;
	position: relative;
	font-size: 1em;
	padding: 0 0 0 80px;
	vertical-align: top;
	color: #000;
	cursor: pointer;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	margin-top: -12px;
	position: absolute;
	cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 100;
}

.ac-custom label::before {
	content: '';
	border: 1px solid #000;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.ac-radio label::before {
	border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
	color: #fff;
} 

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
	opacity: 0.8;
}

/* General SVG and path styles */

.ac-custom svg {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	margin-top: -12px;
	left: 0px;
	pointer-events: none;
}

.ac-custom svg path {
	stroke: #fdfcd3;
	stroke-width: 13px;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/* Specific input, SVG and path styles */

/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
	width: 30px;
	height: 30px;
	margin-top: -15px;
	left: 10px;
	position: absolute;
}

.ac-circle label::before {
	background-color: #fff;
	border: none;
}

.ac-circle svg {
	width: 70px;
	height: 70px;
	margin-top: -35px;
	left: -10px;
}

.ac-circle svg path {
	stroke-width: 5px;
} 

/* Box Fill */
.ac-boxfill svg path {
	stroke-width: 8px;
} 

/* Swirl */
.ac-swirl svg path {
	stroke-width: 8px;
}

/* List */
.ac-list ol {
	list-style: decimal;
	list-style-position: inside;
}

.ac-list ol li {
	font-size: 2em;
	padding: 1em 1em 0 2em;
	text-indent: -40px;
}

.ac-list ol li label {
	font-size: 0.5em;
	text-indent: 0;
	padding-left: 30px;
}

.ac-list label::before {
	display: none;
}

.ac-list svg {
	width: 100%;
	height: 80px;
	left: 0;
	top: 1.2em;
	margin-top: 0px;
}

.ac-list svg path {
	stroke-width: 4px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-sm-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .col-sm-4 {
    float: left;
  }

  .col-sm-4 {
    width: 33.33333333%;
  } 
 
 .filter-columns {
	background-color:#fdb5ad;
 }
 
 .filter-columns-alt {
	background-color:#fecbc6;
 }
 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <tbody>
        <tr id="Memory1" class="part_detail txtMult">
            <td class="stake"><input class="val1"/></td>
            <td class="odds"><input class="val2"/></td>
			<td class="profit"><span class="multTotal">0.00</span></td>
        </tr>
      </tbody>

and when I change the HTML to :

<tbody>
<tr id="Memory1" class="part_detail txtMult">
    <td class="stake"><input class="val1"/></td>
    <td class="odds">2.2</td>
    <td class="profit"><span class="multTotal">0.00</span></td>
</tr>

Answer 1

You should use text() instead of val() here in the javascript code as there is no longer a input field and hence no value exist for the same.

USE var $val2 = $('.odds', this).text(); instead of var $val2 = $('.val2', this).val();

If the child is dynamic inside the tag and can be both

<td class="odds"><input class="val2"/></td> or <td class="odds">2.2</td>

You can try this to fetch correct value

var val2 = $('.odds .val2')?$('.odds .val2').val():$('.odds').text();

Answer 2

If the elements can be an input or a span and you need to handle both you may test the value against undefined:

var $val2 = $('.val2', this).val();
if ($val2 === undefined)
   $val2 = $('.val2', this).text();

The example:

$(document).ready(function () {
  $(".txtMult input").keyup(multInputs);

  function multInputs() {
    var mult = 0;
    $("tr.txtMult").each(function () {
      var $val1 = $('.val1', this).val();
      var $val2 = $('.val2', this).val();
      if ($val2 === undefined)
        $val2 = $('.val2', this).text();
      var $total = ($val1 * 1) * ($val2 * 1) - ($val1 * 1)
      $('.multTotal',this).text($total.toPrecision(2));
      mult += $total;
    });
    $("#grandTotal").text(mult);
  }
});

h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: fixed;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
}
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 15px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}


/* demo styles */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: #fb887c;
  font-family: 'Roboto', sans-serif;
}
section{
  margin: 50px;
}


*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ac-custom {
  padding: 0 1em;
  max-width: 900px;
  margin: 0 auto;
}

.ac-custom h2 {
  font-size: 1em;
  font-weight: 300;
  padding: 0 0 0.5em;
  margin: 0 0 30px;
  color:#000;
}

.ac-custom ul,
.ac-custom ol {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

.ac-custom li {
  margin: 0 auto;
  padding: 0.5em 0;
  position: relative;
}

.ac-custom label {
  display: inline-block;
  position: relative;
  font-size: 1em;
  padding: 0 0 0 80px;
  vertical-align: top;
  color: #000;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  margin-top: -12px;
  position: absolute;
  cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
  opacity: 0;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  z-index: 100;
}

.ac-custom label::before {
  content: '';
  border: 1px solid #000;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ac-radio label::before {
  border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
  color: #fff;
}

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
  opacity: 0.8;
}

/* General SVG and path styles */

.ac-custom svg {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  margin-top: -12px;
  left: 0px;
  pointer-events: none;
}

.ac-custom svg path {
  stroke: #fdfcd3;
  stroke-width: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Specific input, SVG and path styles */

/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  left: 10px;
  position: absolute;
}

.ac-circle label::before {
  background-color: #fff;
  border: none;
}

.ac-circle svg {
  width: 70px;
  height: 70px;
  margin-top: -35px;
  left: -10px;
}

.ac-circle svg path {
  stroke-width: 5px;
}

/* Box Fill */
.ac-boxfill svg path {
  stroke-width: 8px;
}

/* Swirl */
.ac-swirl svg path {
  stroke-width: 8px;
}

/* List */
.ac-list ol {
  list-style: decimal;
  list-style-position: inside;
}

.ac-list ol li {
  font-size: 2em;
  padding: 1em 1em 0 2em;
  text-indent: -40px;
}

.ac-list ol li label {
  font-size: 0.5em;
  text-indent: 0;
  padding-left: 30px;
}

.ac-list label::before {
  display: none;
}

.ac-list svg {
  width: 100%;
  height: 80px;
  left: 0;
  top: 1.2em;
  margin-top: 0px;
}

.ac-list svg path {
  stroke-width: 4px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-sm-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .col-sm-4 {
    float: left;
  }

  .col-sm-4 {
    width: 33.33333333%;
  }

  .filter-columns {
    background-color: #fdb5ad;
  }

  .filter-columns-alt {
    background-color: #fecbc6;
  }
}

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

<table>
    <tbody>
    <tr id="Memory1" class="part_detail txtMult">
        <td class="stake"><input class="val1"/></td>
        <td class="odds"><input class="val2"/></td>
        <td class="profit"><span class="multTotal">0.00</span></td>
    </tr>
    <tr id="Memory2" class="part_detail txtMult">
        <td class="stake"><input class="val1"/></td>
        <td class="odds">2.2</td>
        <td class="profit"><span class="multTotal">0.00</span></td>
    </tr>
    </tbody>
</table>

Answer 3

Just use text() instead of val().

val() is only used for form controls that have a value property