苦苦挣扎到POSTJavascript

Question

I have a few inputs that I am taking the values from and displaying them as a Cash_total. I am wanting to get the cash_total into settings.php and have tried allsorts but just can't figure it out. I've got all the input values there with this:

    submitHandler: function(form) {
  $.ajax({
    url: "includes/settings.php",
    type: "POST",
    data: $('form').serialize(),
    success: function(strMessage) {
      $('#message').text(strMessage)
    }
  });
  return false;
}

Here is the rest of what I have got

$('.cashinput').keyup(function() {


  var sum = 0;
  $('.cashinput').each(function() {
    sum += Number($(this).val());
  });


  $('#cash_total').val(sum);
});

input,
select {
  background-color: #FFFFFF;
  border: solid 1px #A9A9A9;
  font-size: 13px;
  color: #000000;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  display: block;
  margin-bottom: 5px;
}

label {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
  padding-top: 0px;
  padding-bottom: 0px;
  float: left;
  width: 77px;
  text-align: right;
  margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="cash_up" method="POST">
<label for="cash_two_pence">2p </label><input id="cash_two_pence" type="number" step="0.02" name="cash_two_pence" class="cashinput" placeholder="0.00" />
<label for="cash_one_pence">1p </label><input id="cash_one_pence" type="number" step="0.01" name="cash_one_pence" class="cashinput" placeholder="0.00" />

<label for="cash_total">Cash Total</label><input type='text'     name='cash_total' id='cash_total' disabled />
</input type="submit" value="Next" id="save_button"/>
</form>

Please could someone point me at the solution. :-)

</div>

Answer 1

You need form tags, a submit button and the handler attached to the form submit event which you then prevent

You cannot submit a disabled field. Change to readonly

$(function() {
  $('.cashinput').on("input", function() {
    var sum = 0;
    $('.cashinput').each(function() {
      sum += Number($(this).val());
    });
    $('#cash_total').val(sum);
  });

  $("form").on("submit", function(e) {
    e.preventDefault(); //stop submission
    $.ajax({
      url: "includes/settings.php",
      type: "POST",
      data: $(this).serialize(),
      success: function(strMessage) {
        $('#message').text(strMessage)
      }
    });
  });
});

input,
select {
  background-color: #FFFFFF;
  border: solid 1px #A9A9A9;
  font-size: 13px;
  color: #000000;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  display: block;
  margin-bottom: 5px;
}

label {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
  padding-top: 0px;
  padding-bottom: 0px;
  float: left;
  width: 77px;
  text-align: right;
  margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
  <label for="cash_two_pence">2p </label><input id="cash_two_pence" type="number" step="0.02" name="cash_two_pence" class="cashinput" placeholder="0.00" />
  <label for="cash_one_pence">1p </label><input id="cash_one_pence" type="number" step="0.01" name="cash_one_pence" class="cashinput" placeholder="0.00" />

  <label for="cash_total">Cash Total</label><input type='text' name='cash_total' id='cash_total' readonly />
  <input type="submit" />
  <span id="message"></span>
</form>

</div>