Display average of TextBoxes inside modal using JavaScript in ASP.Net MVC

nabilabolo
 
on Sep 06, 2021 04:48 AM
Sample_676849.zip
641 Views

Hi

I got a list of data and each data got one modal popup button which record the average value that user insert.

After save in modal popup, the average should display in the textbox next to popup modal. 

my issue is how to make each average belongs to its data? like data A will display the average A

model

public class dataModel
{
    //got some other data 
    public List<MoldingModel> MoldingList { get; set; }
}

public class MoldingModel
{
    public string data{ get; set; }
    public decimal average{ get; set; }
    public decimal reading1{ get; set; }
    public decimal reading2{ get; set; }
    public decimal reading3{ get; set; }
    public decimal reading4{ get; set; }
    public decimal reading5{ get; set; }
    public decimal reading6{ get; set; }
}

View

<table>
    <tr>
        <td>Data</td>
	<td>Average</td>
    </tr>
	@for(int i = 0; i < Model.MoldingList.Count; i++)
	{
		<tr>
                      <td style="text-align:center">@Model.MoldingList[i].data</td>
			<td style="vertical-align:middle; width:10%; padding-right: 5px; padding-left:5px">
                                @Html.TextBoxFor(m => m.MoldingList[i].average, new { @class = "form-control", @id = "txtAverage", @style = "height: 30px" })
                                @Html.ValidationMessageFor(m => m.MoldingList[i].average, "", new { @class = "red", @style = "color:red" })
                                <button type="button" class="btn btn-info" data-toggle="modal"  data-id="@Model.MoldingList[i].data"  data-target="#MachineResult"  style="margin: 0; margin-left:1rem;">....</button>
                         </td>
		</tr>
	}
</table>

//modal popup
<div class="modal" id="MachineResult">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            @*@using (Html.BeginForm("MoldReading", "Entry"))
        {*@
            <div class="modal-body">

                <table class="table table-striped" id="example">
                    <tr>
                        <td style="width: 200px">
                            @Html.Label("*", new { style = "color:red" })
                            @Html.Label("Reading#1")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.Reading1, new { @class = "form-control", @id = "Reading1", @style = "height: 30px", @onkeyup = "getAverageMold()" })
                                @Html.ValidationMessageFor(a => a.Reading1, "", new { @class = "red", @style = "color:red" })
                            </div>
                        </td>
                        <td style="width: 200px">
                            @Html.Label("Reading#4")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.Reading4, new { @class = "form-control", @id = "Reading4", @style = "height: 30px", @onkeyup = "getAverageMold()" })
                                @Html.ValidationMessageFor(a => a.Reading4, "", new { @class = "red", @style = "color:red" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 200px">
                            @Html.Label("Reading#2")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.Reading2, new { @class = "form-control", @id = "Reading2", @style = "height: 30px", @onkeyup = "getAverageMold()" })
                                @Html.ValidationMessageFor(a => a.Reading2, "", new { @class = "red", @style = "color:red" })
                            </div>
                        </td>
                        <td style="width: 200px">
                            @Html.Label("Reading#5")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.Reading5, new { @class = "form-control", @id = "Reading5", @style = "height: 30px", @onkeyup = "getAverageMold()" })
                                @Html.ValidationMessageFor(a => a.Reading5, "", new { @class = "red", @style = "color:red" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 200px">
                            @Html.Label("Reading#3")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.Reading3, new { @class = "form-control", @id = "Reading3", @style = "height: 30px", @onkeyup = "getAverageMold()" })
                                @Html.ValidationMessageFor(a => a.Reading3, "", new { @class = "red", @style = "color:red" })
                            </div>
                        </td>
                        <td style="width: 200px">
                            @Html.Label("Reading#6")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.Reading6, new { @class = "form-control", @id = "Reading6", @style = "height: 30px", @onkeyup = "getAverageMold()" })
                                @Html.ValidationMessageFor(a => a.Reading5, "", new { @class = "red", @style = "color:red" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 200px">
                            @Html.Label("Average")
                        </td>
                        <td> : </td>
                        <td>
                            <div class="col-md-5" style="width:40%">
                                @Html.TextBoxFor(a => a.averageMold, new { @class = "form-control", @id = "AverageMold", @style = "height: 30px" })
                                @Html.ValidationMessageFor(a => a.averageMold, "", new { @class = "red", @style = "color:red" })

                            </div>
                        </td>

                    </tr>
                </table>
            </div>

          
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal" id="confirm">Confirm</button>
                <input id="Reset" type="reset" name="ActionType" value="Reset" class="btn btn-primary" />
                <button type="button" class="btn btn-primary" data-dismiss="modal">Exit</button>
            </div>
            @*}*@
        </div>
    </div>
</div>

///javascript
function getAverageMold() {

         var r1 = document.getElementById("Reading1").value;
         var r2 = document.getElementById("Reading2").value;
         var r3 = document.getElementById("Reading3").value;
         var r4 = document.getElementById("Reading4").value;
         var r5 = document.getElementById("Reading5").value;
         var r6 = document.getElementById("Reading6").value;

         var avgval =0;
         var chk = 0;

         if (r1 != '') { chk += 1; avgval = avgval + parseFloat(r1) }
         if (r2 != '') { chk += 1; avgval = avgval + parseFloat(r2) }
         if (r3 != '') { chk += 1; avgval = avgval + parseFloat(r3) }
         if (r4 != '') { chk += 1; avgval = avgval + parseFloat(r4) }
         if (r5 != '') { chk += 1; avgval = avgval + parseFloat(r5) }
         if (r6 != '') { chk += 1; avgval = avgval + parseFloat(r6) }

         if (avgval != 0) { avgval = avgval / parseFloat(chk); }
         document.getElementById('AverageMold').value = avgval.toFixed(2);
    }
<script>
    $('#MachineResult').on('show.bs.modal', function (event) {
        var myVal = $(event.relatedTarget).data('id');
        $(this).find(".modal-title").text(myVal);
        console.log(myVal);
    });
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 06, 2021 06:57 AM
nabilabolo says:
function getAverageMold() {
 
         var r1 = document.getElementById("Reading1").value;
         var r2 = document.getElementById("Reading2").value;
         var r3 = document.getElementById("Reading3").value;
         var r4 = document.getElementById("Reading4").value;
         var r5 = document.getElementById("Reading5").value;
         var r6 = document.getElementById("Reading6").value;
 
         var avgval =0;
         var chk = 0;
 
         if (r1 != '') { chk += 1; avgval = avgval + parseFloat(r1) }
         if (r2 != '') { chk += 1; avgval = avgval + parseFloat(r2) }
         if (r3 != '') { chk += 1; avgval = avgval + parseFloat(r3) }
         if (r4 != '') { chk += 1; avgval = avgval + parseFloat(r4) }
         if (r5 != '') { chk += 1; avgval = avgval + parseFloat(r5) }
         if (r6 != '') { chk += 1; avgval = avgval + parseFloat(r6) }
 
         if (avgval != 0) { avgval = avgval / parseFloat(chk); }
 
 
         document.getElementById('AverageMold').value = avgval.toFixed(2);
 
    }

Replace with below code.

function getAverageMold() {
    var r1 = document.getElementById("Reading1").value;
    var r2 = document.getElementById("Reading2").value;
    var r3 = document.getElementById("Reading3").value;
    var r4 = document.getElementById("Reading4").value;
    var r5 = document.getElementById("Reading5").value;
    var r6 = document.getElementById("Reading6").value;
    var result = [];
    if (r1 != '') { result.push(r1) }
    if (r2 != '') { result.push(r2) }
    if (r3 != '') { result.push(r3) }
    if (r4 != '') { result.push(r4) }
    if (r5 != '') { result.push(r5) }
    if (r6 != '') { result.push(r6) }
    document.getElementById('AverageMold').value = calculateAverage(result).toFixed(2);
}

function calculateAverage(array) {
    var total = 0;
    var count = 0;
    array.forEach(function (item, index) {
        total += parseFloat(item);
        count++;
    });
    return total / count;
}