Webform Validation in MVC - javascript

I want to add some validation to my web form, the user inputs are created in a dynamic table**(user can add and delete rows)**, basically the user will click submit when they have completed, and i will call a java script function to build me a list to pass to my controller, my question is how i can validate the users inputs to ensure its right data type etc before the list is built
HTML
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="tab-content" id="tab_logic" name="table1">
<thead>
<tr>
<th class="text-center" style="width: 25px">
#
</th>
<th class="text-center" style="width: 150px">
Status
</th>
<th class="text-center" style="width: 250px">
Actions
</th>
<th class="text-center" style="width: 150px">
Target
</th>
<th class="text-center" style="width: 100px">
Progress
</th>
<th class="text-center" style="width: 250px">
Comments
</th>
</tr>
</thead>
<tbody id="mainData">
<tr id='entry1'>
<td>
1
</td>
<td>
<div class="form-group">
<select name="select" class="form-control" id="status1">
<option disabled="disabled" selected="selected">Select:</option>
<option style="color: green; background-color: white">Competent</option>
<option style="color: orange; background-color: white">Improvement-Required</option>
<option style="color: red; background-color: white">Below Average</option>
</select>
</div>
</td>
<td>
<textarea class="form-control" id='action1'></textarea>
</td>
<td>
<input type="date" class="form-control" id='target1'/>
</td>
<td>
<input type="text" class="form-control" id='progress1' required="required"/>
</td>
<td>
<textarea class="form-control" id='comments1'></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<a id="add_row" class="btn btn-primary btn-sm pull-left">Add Row</a>
<a id='delete_row' class="btn btn-primary btn-sm">Delete Row </a>
<input type="button" value="Submit" id="subButton" widthvalue="Submit" class="btn btn-primary btn-sm" style="vertical-align: bottom"/>
</div>
</div>
Javascript
$("#subButton")
.click(function() {
for (var j = 1; j <= x; j++) {
var statusEntered = document.getElementById("status" + j).value;
var actionsEntered = document.getElementById("action" + j).value;
var targetEntered = document.getElementById("target" + j).value;
var progessEntered = document.getElementById("progress" + j).value;
var commentsEntered = document.getElementById("comments" + j).value;
var area = "PersonalDevelopment";
var test = employeeSelected.value;
var entry = new newEntry(statusEntered,
actionsEntered,
targetEntered,
progessEntered,
commentsEntered,
area, test
);
arrayDetails.push(entry);
}
sendToController();
});
function sendToController() {
$.ajax({
type: "POST",
url: '#Url.Action("Save", "OneToOne", "EmpList")',
contentType: "application/json; charset=utf-8",
datatype: JSON,
data: JSON.stringify({ methodParam: arrayDetails }),
traditional: true
});
}
});

Related

append form rows using JS

Hello I have an HTML form and want to be able to add or delete rows dynamically.
ie just by a click on an Icon or a text the entire form row should be duplicated and by clicking on a text or icon the duplicated row should be deleted.
I know JavaScript append can solve this but I don't know how to implement it since my my HTML has needed php tags in them.
the drop-downs options are getting it values from a db and some other input fields are also getting it's values from a db hence the reason I have PHP tags in there.
Below is the attached code.
Kindly help me with how I can append the row with the appended form working just like the parent row
<div class="col-xl-8 col-md-12">
<form>
<div class="card">
<div class="card-header">
<h3 class="card-title"><strong class="text-success" style="cursor: pointer;"><?=ucwords($clientName)?></strong> REP'S INFORMATION</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Reps Name<span class="text-red">*</span></label>
<input type="text" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">E-Mail<span class="text-red">*</span></label>
<input type="email" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Phone No.<span class="text-red">*</span></label>
<input type="text text-dark" class="form-control" name="client_contact2" required="" id="client_contact2" onkeypress="return restrictAlphabets(event)" onpaste="return false;" ondrop="return false;" autocomplete="off" required="">
<input type="date" name="" value="<?=date("Y-m-d")?>" hidden="">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">ADD DEVICE(S) INFORMATION</h3>
</div>
<div class="card-body">
<?php
if ($clientType === $slaClient) {
?>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center" >Device Brand</th>
<th class="text-center">Device Model</th>
<th class="text-center">Serial Number</th>
<th class="text-center" style="width:10%">SLA Device</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td>
<select class="form-control form-select brand" data-bs-placeholder="Select" name="brand[]" required="" id="brand" onchange="checkDeviceStatus()">
<?php
$readALL = "SELECT * FROM productbrands WHERE deleted = 0";
$displayAll = mysqli_query($conn,$readALL);
while($rowFetchAll = mysqli_fetch_array($displayAll)){
$brandName = $rowFetchAll['brandName'];
$brandid = $rowFetchAll['brandID'];
?>
<option value="<?=$brandid?>"><?=$brandName?></option>
<?php } ?>
</select>
</td>
<td>
<select class="form-control form-select model" data-bs-placeholder="Select" name="model[]" required="" id="model" onchange="checkDeviceStatus()">
<?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?>
<option value="<?=$modelid?>"><?=$modelName?></option>
<?php } ?>
</select>
</td>
<td><input type="text" name="serialNo" class="form-control serialNo" id="serialNo" onchange="checkDeviceStatus()"></td>
<!-- The input field below is to get value from AJAX -->
<td><input type="text" name="deviceLevel" class="form-control" readonly="" id="deviceLevel">
<!-- End of Input field -->
</td>
<input type="text" name="" id="client" value="<?=$clientID?>" hidden="" class="client">
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
<?php
if ($clientType === $nonSla) {
?>
<table class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Product Model Non-SLA</th>
<th>Serial Number Non-SLA</th>
<th>Device Status Non-SLA</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td><input type="text" name="" class="form-control" ></td>
<td><input type="text" name="" class="form-control"></td>
<td><input type="text" name="" class="form-control"></td>
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
</div>
</div>
</form>
</div>

Here is basic example:
const table_row_html = `
<tr>
<th scope="row">{{ROW_NO}}</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]"">
<option selected>Open this select menu</option>
<option value=" 1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete" href="#">Remove</a></td>
</tr>`;
$(document).on("click", ".table a.insert", function() {
const table_body = $(this).closest(".table").find("tbody");
table_body.append(
table_row_html.replace("{{ROW_NO}}", table_body.children("tr").length + 1)
);
return false;
});
$(document).on("click", ".table a.delete", function() {
$(this).closest("tr").remove();
return false;
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">
<a class="btn btn-primary insert" href="#">Add</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]" ">
<option selected>Open this select menu</option>
<option value=" 1 ">One</option>
<option value="2 ">Two</option>
<option value="3 ">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete " href="# ">Remove</a></td>
</tr>
</tbody>
</table>
</div>

How to auto calculate the html table using jQuery?

Can someone or anybody help me on how to auto calculate total price in the table? Please see the image below:
Here's my code (I will included only the code that I used in the Image):
HTML:
<div class="col-12">
<div class="col drop">
<table name="services">
<tr name="services">
<td>
<select class="form-control serv" name="txt-service" id="txt-service"> //dynamic services (from database)
<option value="" readonly>--- Select Service ---</option>
<?php include "include/connect.php";
$sql="SELECT service_id,services,price FROM tbl_serviceoffered";
foreach ($con->query($sql) as $row){
echo "<option value=$row[service_id] data-price=$row[price] data-service=$row[services]>$row[services]</option>";
}
echo "</select>";
?>
</td>
<td><input type="hidden" style="text-align:right" class="form-control" name="service" id="showservice" readonly></td>
<td><input type="text" style="text-align:right" class="form-control" name="price" id="showprice" readonly></td>
<td><input type="text" style="text-align:right" class="form-control" name="item_total" id="item_total"></td>
<td><button class="btn btn-primary" name="add">Add</button></td>
</tr>
</table>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered table-striped" name="transactions" id="transactions">
<thead>
<th></th>
<th style="text-align:center">Service Name</th>
<th style="text-align:center">Service Price</th>
<th style="text-align:center">Service Total</th>
</thead>
<tbody>
</tbody>
</table>
<td colspan="2" class="tr"> </td>
<div class="text-right">
<tr>
<td><b>Total</b></td>
<td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" style="text-align:right; font-weight:bold" class="form-control" name="grand_total" id="grand_total" placeholder="Total"></td>
</tr>
<tr>
<td>Cash Tendered</td>
<td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="cashtendered" placeholder="Cash Tendered"></td>
</tr>
<tr>
<td>Change</td>
<td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="change" placeholder="Change"></td>
</div>
</div>
</div>
<div class="text-right">
<button type="button" class="btn btn-primary btn-icon icon-right" name="btnSaveTransaction" id="btnSaveTransaction"><i class="fas fa-file-invoice"></i> Process Payment</a>
</div>
JS:
var id = 1;
/*Assigning id and class for tr and td tags for separation.*/
$("button[name=add]").click(function() {
var newid = id++;
$("table[name=transactions]").append('<tr id="'+newid+'">\n\
<td style="text-align:center;"><a class="btn btn-primary" href="javascript:void(0);" id="remove">Remove</a></td>\n\
<td width="100px" style="display:none;">' +newid+ '</td>\n\
<td style="text-align:center; display:none;" class="num'+newid+'">' + $("#txt-transact_num").val() + '</td>\n\
<td style="text-align:center; display:none;" class="date'+newid+'">' + $("#txt-transact_date").val() + '</td>\n\
<td style="text-align:center; display:none;" class="patientid'+newid+'">' + $("#txt-patient_id").val() + '</td>\n\
<td style="text-align:center;" class="serv'+newid+'">' + $("#showservice").val() + '</td>\n\
<td style="text-align:center; display:none;" class="servid'+newid+'">' + $(".serv option:selected").val() + '</td>\n\
<td style="text-align:right;" class="price'+newid+'">₱' + $("#showprice").val() + '</td>\n\
<td style="text-align:right;" name="txt" class="totalprice'+newid+'">₱' + $("#item_total").val() + '</td>');
$("#txt-service").val("");
$("#showprice").val("");
$("#item_total").val("0.00");
calculateSum();
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("tbody").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#grand_total").val(sum.toFixed(2));
}
$("#transactions").on('click', '#remove', function() {
$(this).parent().parent().remove();
calculateSum();
});
As you can see, in the image above, when I add or pick some services that shows the total each of them, the textbox "total" fetch 0.00 only.
I'm still beginner in this programming language. I hope everyone can help me for our Capstone Project. Thank you!

Calculate Row Values & Column Values in Dynamic Add Delete Rows Using Javascript

I am trying to perform the following functionality using JS. I have achieved the total number of participant's sum but it is not working when i add rows dynamically. It only take effect when i change the first row only.
No of participants * Subsidy Per Participant = Total Training Value
Total Training Value Column Sum in Total Assignment Value
Furthermore, i have no idea how to get Total Training Value of each row and sum of total training values. Can you help me out in this regard so i can finish what i started.
//Dynamic Add Delete Rows
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><select class='form-control' required name='topic[" + i + "]'><option selected disabled value=''>Select Topic</option><option value='1'>Topic 1</option></select></td><td><input name='alloc_trainig[" + i + "]' type='text' placeholder='Allocated Trainings' class='form-control input-md'></td><td><input name='add_traing[" + i + "]' type='text' placeholder='Additional Trainings (if Any)' class='form-control'></td><td><input name='no_patycpnt[" + i + "]' id='no_patycpnt' type='text' placeholder='No. of Participants' class='Participants form-control input-md'></td><td><input name='prosd_days[" + i + "]' type='text' placeholder='Proposed Days' class='form-control input-md'></td><td><input name='subsify_per_patrcpnt[" + i + "]' type='text' placeholder='Subsidy Per Participant' class='Subsidy form-control input-md'></td><td><input type='text' name='total_value[" + i + "]' id='total_value' placeholder='Total Value' readonly class='form-control'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
//Calculation Code
$(".Participants").change(function() {
var sum = 0;
$('.Participants').each(function(i, obj) {
if ($.isNumeric(this.value)) {
sum += parseFloat(this.value);
}
})
$('#contrctval').val(sum);
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
input {
background-color: transparent;
border: 0px solid;
height: 40px;
width: 160px;
}
</style>
<style type="text/css">
select {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">Plan Outsourced Training (OST) Budget</h3>
<!-- pre outsurce form Section Start -->
<form role="form" name="frmreg" id="frmreg" method="post" enctype="multipart/form-data">
<div class="col-lg-12">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">To Add More Detail Please Click On "Add Row" Button</h3>
</div>
<div class="col col-xs-6 text-right">
</div>
</div>
</div>
<div class="panel-body">
<table class="table table-bordered table-hover" align="center" id="tab_logic">
<thead>
<tr style="background-color: teal;color:white;">
<th class="text-center">
#
</th>
<th class="text-center">
Topic Name
</th>
<th class="text-center">
Allocated Trainings
</th>
<th class="text-center">
Additional Trainings
</th>
<th class="text-center">
Total Number of Participant
</th>
<th class="text-center">
Proposed Days
</th>
<th class="text-center">
Subsidy Per Participant
</th>
<th class="text-center">
Total Training Value
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="form-control" required id="topic" name="topic">
<option selected disabled value="">Select Topic</option>
<option value="">Topic 1</option>
</select>
</td>
<td>
<input type="text" name="alloc_trainig[]" id="alloc_trainig[]" placeholder="Allocated Trainings" class="AllocatedTrainings form-control" />
</td>
<td>
<input type="text" name="add_traing[]" id="add_traing[]" placeholder="Additional Trainings (if assigned)" class="form-control" />
</td>
<td>
<input type="text" name="no_patycpnt[]" id="no_patycpnt" placeholder="No.of Participant" title="No.of Participant" class="Participants form-control" />
</td>
<td>
<input type="text" name="prosd_days[]" id="prosd_days[]" placeholder="Enter Proposed Days" title="No.of Proposed Days" class="form-control" />
</td>
<td>
<input type="text" name="subsify_per_patrcpnt[]" id="subsify_per_patrcpnt[]" placeholder="Enter Subsidy Per Participant" title="Subsidy Per Participant" class="Subsidy form-control" />
</td>
<td>
<input type="text" name="total_value[]" id="total_value[]" placeholder="Total Value" title="Total Value" readonly class="TotalAmount form-control" />
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
<div class="panel-body">
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
</div>
</div>
<div class="col-lg-12">
<table class="table table-bordered" border="1" align="center">
<tr>
<th scope="row" style="font-size:10px;color:white" align="left" bgcolor="teal">Total Assigment Value</th>
<th align="left" style="font-size:10px;color:white" scope="row">
<input class="Contract form-control" type="text" required="required" name="contrctval" id="contrctval" readonly />
</th>
</tr>
</table>
<tr>
<th width="234" scope="col" bgcolor="teal" align="left" style="font-size:12px">
<input class="btn btn-primary btn-lg btn-block" type="submit" name="SubmitButton" id="SubmitButton" value="Submit">
</th>
</tr>
</div>
</form>
<!-- pre outsurce form Section Section End -->
</div>
<br /> <br /> <br />
</div>
</div>
</div>
</div>

Try remove numeric check and realize the calculations without any restrictions, do a minimal test, likely it will work.

jQuery: append function is not working fine in webpage

hi m trying to append a form which is in bootstrap (using jQuery append funciton),,, it has to open it once but is opening it twice and the button which is at the end of for shows one time and hide other time i just wants to show the form once by clicking once, and when i click again then it display again:" this is the current output i just wants that it show only once https://ibb.co/CtLrBzr "
html code:
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>
$(document).ready(function() {
$('.append').click(function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
Assign Task
</span>
</div>

$(".append").on("click", function(){
$('#table-bordered').html();
});
Use your form inside the jquery html function. it will help you.

Use jQuery's one :
$('.append').one("click" , function(){ ... }
$('.append').one("click", function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>

I just test your code and it's working fine..
Maybe you write the script before render the html? (mean in the head of the html, without defer)?
Make sure you add the script in the end of the body, or add the defer attribute there. otherwise when the script called, the button where you trying add a listener to is not exist in the moment when the script run
$(document).ready(function () {
$('.append').click(function () {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br/>
Assign Task
</span>
</div>
<div id="table-bordered"></div>

How to get a multiple of two text box that is generate by dynamic input box

I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
});
$(document).ready(function(){
var man_day_rates = $('#man_day_rates1');
var estimated_man_days = $('#estimated_man_days1');
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped" id="dynamic_field" style="padding:0px;">
<thead>
<tr class="headings">
<th class="column-title">#</th>
<th class="column-title">Item Title</th>
<th class="column-title">Description </th>
<th class="column-title" style="width:100px;">Man Day Rates (RM)</th>
<th class="column-title" style="width:100px;">Estimated Man Days </th>
<th class="column-title"style="width:100px;">Subtotal (RM)</th>
<th class="column-title"style="width:100px;"></th>
</th>
</tr>
</thead>
<tbody>
<tr id="row01">
<?php
$i = 1;
?>
<td style="border:none;">
<input id="man_day_rates<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >
</td>
<td style="border:none;">
<input id="estimated_man_days<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">
</td>
<td id=""> <input id="result" type="text" name="" value=""/></td>
<td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td>
</tr>
</tbody>
</table>
</div>
<div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div>
I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.

you have to initialize your key event each time when you add new control dynamically.
Try like below.
$(document).ready(function(){
$('#add').click(function(){
i++;
//Add field document History
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
var man_day_rates = $('#man_day_rates'+i);
var estimated_man_days = $('#estimated_man_days'+i);
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
});

Categories

Resources