Question 10957 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I get value from textarea, checkbox and radio button for sum? – Jquery

I am trying to get result from all form field. When I change the value and also change the checkbox, answer of sum should be change
How can I get value from textarea, checkbox and radio button for sum?

Here is my JavaScript code:

$("document").ready(function () {
  $("#orderbutton").on("click", function () {
    var weight = parseFloat($("#weight").val());
    var destination = $("#destination").val();
    var insurance = $("#chkbox1").val();

    //construct output
    var msg = "<div> Result Of your order: </div>";
    msg += "<div> Package weight: " + weight + " pounds </div>";
    if (weight <= 25) {
      msg += "<div> Base cost based on your weight: $15.00  <div>";
    } else if (weight <= 50) {
      msg += "<div> Base cost based on your weight: $25.00 <div>";
    } else {
      msg += "<div> Base cost based on your weight: $40.00 </div>";
    }
    if (destination == "ny") {
      msg += "<div> Destination Selected: New York State( No extra cost)</div>";
    } else {
      msg += "<div> Destination Selected: Out Of State ($15.00 Extra)</div>";
    }
    if ($("#chkbox1").is(":checked")) {
      msg += "<div>Insurance option: Insurance Choosen($10.00 Added)<div>";
    } else {
      msg += "<div> Insurance option: Insurance Not Choosen($0.00 Added)</div>";
    }
    msg += "<div> Total price of order: </div>";

    $("#output").html(msg);
  }); // end event handler
}); // end document.ready

sample result image

Tags:

3

Answers


  1. 0

    Currently, you are calculating everything only on click of the order button. In order to have the sum recalculated on the change of textarea, checkbox and radio button, you can attach .change() event to your form elements.

    For more details on .change() refer https://api.jquery.com/change/

    Login or Signup to reply.
  2. 0

    For getting the textarea value

    var textareaValue = $("#myTextarea").val();

    for getting the checkbox value

    var checkboxValue = $("#myCheckbox").is(":checked");

    for getting the radio value

    var radioValue = $("input[name='myRadios']:checked").val();

    for calculating the sum

    var sum = weight + (destination == "ny" ? 0 : 15) + (insurance ? 10 : 0);
msg += "<div> Total price of order: $" + sum.toFixed(2) + "</div>";
    Login or Signup to reply.
  3. 0

    Here is the code for getting the values for textarea, checkbox and radio button.

    const textareaValue = document.getElementById("myTextarea").value;
const myCheckboxValue = document.getElementById("myCheckbox").checked? 
Number(document.getElementById("myCheckbox").value) : 0;
let myRadioValue = 0;
const radioButtons = document.getElementsByName("myRadioGroup");
for (let i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
    myRadioValue = Number(radioButtons[i].value);
    break;
  }
}
const sum = textareaValue + myCheckboxValue + myRadioValue;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search