How to perform javascript api call for 2 input fields with different forms names which is present in a single cshtml page?

Question

I have 2 forms which performs calculations for different purposes, now I have another field in the same cshtml which is required to take the result from the above 2 forms and perform an operation in the controller. How do I achieve that. Below is my javascript which I used for forms having multiple input fields, as I said before now the issue is my 2 input fields are in 2 different forms, I need to get that and send to my controller.

The below 2 forms will perform the addition in the controller class. Now I need to consider results from the id: liability and id:totalProperty and perform another calculation at my controller.

The controller is just a post method which takes input and performs addition. Basically I need totalworth=totalProperty+liability

    <script>
    var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
            var formData = new FormData(document.forms.assets); //here instead of forms name I want to pass //the id of the 2 input fields and send that for operation in the controller. 
        }
        if (request != null) {
            var url = "Home/TotalAssets";
            request.open("POST", url, false);
            request.send(formData)
            
        }
    
        totalAssets.value = request.response;
    }
    </script>

Below is my html

 <table align="center">
            <tr>
                
                <td>
                    $<input type="number" id="totalworth" name="totalworth" contenteditable="false"  />

                </td>
            </tr>

        </table>
<form name="property">
           
            <table>
                  
                <tr>
                    <td>  Property1  </td>
                    <td> $<input name="property1" type="number" onchange="Assets(event)" value="2000.00" /></td>

                </tr>
                <tr>
                    <td>  property2  </td>
                    <td> $<input type="number" onchange="Assets(event)" name="property2  " value="4000.00" /></td>

                </tr>
 <tr>


                    <td>$ <input type="number" readonly="readonly" name="totalProperty" id="totalProperty" onchange="Assetscalculate(event)"/></td>

                </tr>
            </table>
<form>
 <form name="liabilities">
            <table>
                <tr>
                    <td><h2>Liabilities on property</h2></td>
                </tr>
                <tr>
                    <td>
                        <h3> Short Term Liabilities</h3>
                    </td>
                </tr>
                <tr>
                    <td>  Credit Card 1  </td>
                    <td> $<input type="number" onchange="liabilityChange(event)" id="cccard1" name="cccard1" min="0" value="4342" /></td>

                </tr>
                <tr>
                    <td>  Credit Care 2  </td>
                    <td> $<input type="number" id="cccard2" name="cccard2" min="0" value="322.020"  onchange="liabilityChange(event)" /></td>

                </tr>
<tr>
                   
                    <td> $<input type="number" id="liability" name="liability" readonly="readonly"  onchange="Liabilitiescalculate(event)"  contenteditable="false" /></td>

                </tr>
        </form>

   

I think I have missed something while trying to check with your code in JS

$("#totalAssets, #liability").change(function()
        {
    let totalAssets = 0;
            let liability = 0;

    totalAssets = $('#totalAssets').val();
            liability = $('#liability').val();

            //When values are both set, POST both values to the server..
    if (totalAssets !== '' && totalAssets !== 0 && liability !== '' && liability !== 0) {
        Process(totalAssets, liability);
            }
        });

function Process(totalProperty, liability) {
    var url = '/Home/TotalAssets?totalProperty=' + totalProperty + '&liability='
        + liability;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if (xmlhttp.status == 200) {
                var result = xmlhttp.responseText;
                //Do something with the result
            }
            else {
                alert('Something went wrong: ' + xmlhttp.status);
            }
        }
    };

    xmlhttp.open("POST", url, true);
    xmlhttp.send();

} I have put above code in my javascript but it never executes the function.

Answer 1

After updating your post, it is still not entirely clear, since you have not included the JS functions and we can't guess what you additionally doing there.

I made a setup to show how I would handle the needed POST on the server, with jQuery/AJAX.

Include jQuery in your application.
First of all, you'll have to include jQuery in your application, you can do this application wide by doing this in your _Layout.cshtml, between de tags.

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

More info about including jQuery can be found here: https://www.w3schools.com/jquery/jquery_get_started.asp

Your HTML I left almost untouched, only notice that I did not include your '#totalProperty 'and '#liability' onchange events, if you did something additional you have to add it again.

HTML

<table align="center">
  <tr>
      <td>$<input contenteditable="false" id="totalworth" name="totalworth" type="number"></td>
  </tr>
</table>

<form id="property" name="property">
    <table>
      <tr>
          <td>Property1</td>
          <td>$<input name="property1" onchange="Assets(event)" type="number" value="2000.00"></td>
      </tr>
      <tr>
          <td>property2</td>
          <td>$<input name="property2" onchange="Assets(event)" type="number" value="4000.00"></td>
      </tr>
      <tr>
        <td>$ <input id="totalProperty" name="totalProperty" readonly="readonly" type="number"></td>
      </tr>
    </table>
</form>
<form id="liabilities" name="liabilities">
  <table>
      <tr>
          <td>
              <h2>Liabilities on property</h2>
          </td>
      </tr>
      <tr>
          <td>
              <h3>Short Term Liabilities</h3>
          </td>
      </tr>
      <tr>
          <td>Credit Card 1</td>
          <td>$<input id="cccard1" min="0" name="cccard1" onchange="liabilityChange(event)" type="number" value="4342"></td>
      </tr>
      <tr>
          <td>Credit Care 2</td>
          <td>$<input id="cccard2" min="0" name="cccard2" onchange="liabilityChange(event)" type="number" value="322.020"></td>
      </tr>
      <tr>
          <td>$<input contenteditable="false" id="liability" name="liability" readonly="readonly" type="number"></td>
      </tr>
  </table>

JS (depended on jQuery)

<script>
        //This part will trigger always when one of both inputs are changed..
        $("#totalProperty, #liability").change(function()
        {
            let totalProperty = 0;
            let liability = 0;

            totalProperty = $('#totalProperty').val();
            liability = $('#liability').val();

            //When values are both set, POST both values to the server..
            if (totalProperty !== '' && totalProperty !== 0 && liability !== '' && liability !== 0) {
                Process(totalProperty, liability);
            }
        });

        function Process(totalProperty, liability) 
        {
           //Create JSON object and set the needed properties..
            var data = JSON.stringify({
                'totalProperty': totalProperty,
                'liability': liability
            });
            
           //Sent and handle..
            $.ajax({
                type: 'POST',
                url: '@Url.Action("TotalAssets", "Home")',
                contentType: 'application/json',
                data: data,
                success: function() {
                    alert('Success');
                },
                error: function() {
                    alert('Error');
                },
            });
        } 
 </script>

Notice that there are several ways of processing data to a controller by AJAX, a nice post about this can be found here: https://stackoverflow.com/a/8539918/4611849

Controller

When this is done, change controller to something like this:

[HttpPost]
public ActionResult TotalAssets(string totalProperty, string liability)
{
   return Json("Your result here", JsonRequestBehavior.AllowGet);
}

Cast the variables to decimal and do the needed stuff and return the value as string, decimal or JSON, whatever you want.

Handle response
Then modify the success function in the JS function.

//Sent and handle..
$.ajax({
 type: 'POST',
 url: '@Url.Action("TotalAssets", "Home")',
 contentType: 'application/json',
 data: data,
 success: function() {
   if (response.success) 
    {
        alert(request.response);
    } 
    else {
        alert('Look into it again..');
    }     
 },
error: function() {
   alert('Error');
},
});

JS (non-depended on jQuery)
In case you want to skip the jQuery part, you can do it with plain JS as well.

    document.getElementById("totalProperty").onchange = function() 
    { 
        PreProcess();
    }

    document.getElementById("liability").onchange = function() 
    { 
        PreProcess();
    }

    function PreProcess()
    {
        let totalProperty = 0;
        let liability = 0;

        totalProperty = document.getElementById("totalProperty").value;
        liability = document.getElementById("liability").value;

        //When values are both set, POST both values to the server..
        if (totalProperty !== '' && totalProperty !== 0 && liability !== '' && liability !== 0) {
            Process(totalProperty, liability);
        }
    }

function Process(totalProperty, liability) 
{
var url = '/Home/TotalAssets?totalProperty=' + totalProperty + '&liability=' 
 + liability;
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
       if (xmlhttp.status == 200) {
           var result = xmlhttp.responseText;
           //Do something with the result
       }
       else {
           alert('Something went wrong: ' + xmlhttp.status);
       }
    }
};

xmlhttp.open("POST", url, true);
xmlhttp.send();
} 

Cheers!

Answer 2

My html remains unchanged. Where ever forms has onchange JS function, like in this case I have 2 forms, hence I have 2 onchange functions which performs calculation. With in these forms PreProcess(); is called, which inturn calls Process(totalProperty, liability) ; The request with the parameters are sent to the controller (HttpsPost) and JSON response is captured and sent to the totalAssets id. This gives me the expected result.