"required" validation not working in javascript

"required" validation not working in javascript - javascript

pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required
name="customOfficeId" >
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate"
onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo"
required name="consignmentNo">
</div>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?

You can use checkValidity() to check if the fields in a form are valid.
https://www.w3schools.com/js/js_validation_api.asp
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
if (document.getElementById("new-row").checkValidity()) {
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
} else {
alert('New row data is invalid or incomplete');
}
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form id="new-row">
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required name="customOfficeId">
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo" required name="consignmentNo">
</div>
</form>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Related

how to compare listbox values and table values in javascript?

In my scenario just select the list box options, that values and text going to append to the table rows, but im facing small issues, user not allow to select same options (already selected options) and user not allow to append same values in the table.. if user select same option show alert messages like, 'you are already selected, select another option' like that..
here is my sample code fiddle..
Fiddle
Sample snippet here..
$("#excist_supp").on("change", function() {
$(".indexDrop").hide();
var newText = $("#excist_supp option:selected").text();
var newValue = $("#excist_supp option:selected").val();
$("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
$("#letterTable tr").each(function(i) {
var count = (i) - 1;
if (i === 0) return;
var input1 = $(this).find('.newStyle1');
var input2 = $(this).find('.newStyle2');
// id
input1.eq(0).attr("id", "sm_supp" + count); // Text fields
input2.eq(0).attr("id", "sm_code" + count);
// name
input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
input2.eq(0).attr("name", "sm_code[" + count + "]");
});
});
/* compare two fields */
$('#excist_supp').change(function() {
$("#letterTable tr").each(function(i) {
var listVal = $('#excist_supp').val();
var tableVal = $('.newStyle2').val();
var nawTab = JSON.stringify(tableVal);
if (listVal == nawTab) {
alert('Matching!');
return true;
} else {
alert('Not matching!');
return false;
}
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<div class="row">
<!-- Existing Suppliers -->
<div class="col-sm-6">
<div class="col-12">
<div class="row">
<div class="col-12">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
<div class="selector">
<select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
<option class="indexDrop">Choose Existing Suppliers</option>
<option value="0000">Komal </option>
<option value="0001">Ranjeet</option>
<option value="0002">Vishal </option>
<option value="0003">Gaurav</option>
<option value="0004">Dhanpat</option>
<option value="0005">Joe</option>
<option value="0006">Gowri</option>
<option value="0007">shankar</option>
<option value="0008">Dhanpat</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="container">
<div class="row clearfix">
<div class="table-wrapper">
<div class="table-scroll">
<table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
<thead>
<tr style="background-color: #680f79;color: #fff;">
<th class="text-center">Supplier Name</th>
<th class="text-center">Supplier Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="mytbody" style="text-align: center;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

With $("#excist_supp").on("change".... and $('#excist_supp').change(function()... you are attaching the same event to the same element twice.
You can create a temporary array of all the used list values and create a function to check if the current value is exist in that array or not using Array.prototype.includes().
Try the following way:
$("#excist_supp").on("change", function() {
if(!checkValue()){
$(".indexDrop").hide();
var newText = $("#excist_supp option:selected").text();
var newValue = $("#excist_supp option:selected").val();
$("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
$("#letterTable tr").each(function(i) {
var count = (i) - 1;
if (i === 0) return;
var input1 = $(this).find('.newStyle1');
var input2 = $(this).find('.newStyle2');
// id
input1.eq(0).attr("id", "sm_supp" + count); // Text fields
input2.eq(0).attr("id", "sm_code" + count);
// name
input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
input2.eq(0).attr("name", "sm_code[" + count + "]");
});
}
});
/* compare two fields */
var temp = [];
function checkValue() {
var listVal = $('#excist_supp').val();
var tableVal = $('.newStyle2').val();
var nawTab = JSON.stringify(tableVal);
if (temp.includes(listVal)) {
alert('Matching!');
return true;
} else {
alert('Not matching!');
temp.push(listVal)
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<div class="row">
<!-- Existing Suppliers -->
<div class="col-sm-6">
<div class="col-12">
<div class="row">
<div class="col-12">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
<div class="selector">
<select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
<option class="indexDrop">Choose Existing Suppliers</option>
<option value="0000">Komal </option>
<option value="0001">Ranjeet</option>
<option value="0002">Vishal </option>
<option value="0003">Gaurav</option>
<option value="0004">Dhanpat</option>
<option value="0005">Joe</option>
<option value="0006">Gowri</option>
<option value="0007">shankar</option>
<option value="0008">Dhanpat</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="container">
<div class="row clearfix">
<div class="table-wrapper">
<div class="table-scroll">
<table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
<thead>
<tr style="background-color: #680f79;color: #fff;">
<th class="text-center">Supplier Name</th>
<th class="text-center">Supplier Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="mytbody" style="text-align: center;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Edit and Delete buttons are not working in form how to fix it

The code is incorrect for edit button when click on edit button it has to show the data of person which we clicked, and delete button also has to delete the selected person's data can't solve this issue buttons are not working properly give some advice how to fix it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wizard form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/form.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min
.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
//css
.nav-item{width:160px;text-align: center;}
h2 {text-align: center; text-transform: uppercase;font-weight: bold}
li a :hover{}
.tab-content{display: none;}
.tab-content.active{display: block}
.next{padding: 5px 10px;border: 1px solid grey;
border-radius: 5px;
float: right;
text-align: center;
font-weight: 700;
cursor: pointer;}
.prev{padding: 5px 10px;border: 1px solid grey;
border-radius: 5px;
float: left;
text-align: center;
font-weight: 700;
cursor: pointer;}
.next:hover{background-color: #ccc}
.prev:hover{background-color: #ccc}
.wrap{padding:200px 30px 0 30px;}
table{width:100%}
tr{width:100%;}
tr th{width:8%; text-align:center; font-size:12px; border-bottom: 1px solid grey }
tr td{width:8%; text-align:center; font-size:12px; }
java script jquery started
<script> // variables used
var tab_id;
var id=0;
var fnm;
var lnm;
var gen;
var mail;
var num;
var dob;
var sport;
var about;
var tcn;
var target;
var edit;
var count;
$(document).ready(function () {
$(".next").click(function () { //click function for next button
count = $(this).attr('data-tab');
show_form(count);
fnm = $("#fname").val();
lnm = $("#lname").val();
gen = $("input[name='gender']:checked").val();
mail = $("#mail").val();
num = $("#number").val();
dob = $("#dob").val();
});
$(".prev").click(function () {
count = $(this).attr('data-tab');
show_form(count);
});
function show_form(count) {
tab_id = count;
$('li a').removeClass('active');
$('.tab-content').hide();
$("." + tab_id).addClass("active");
$("#" + tab_id).show();
}
function reset() {
$("#fname").val("");
$("#lname").val("");
$("input[name='gender']").prop("checked", false);
$("#mail").val(" ");
$("#number").val(" ");
$("#dob").val("");
$("#sport").val("");
$("#about").val("");
$("#tc").prop("checked", false);
console.log(id, fnm, lnm, gen, mail, num, dob, sport, about, tcn);
}
$("#sbmt").click(function () {
if ($('#tc').is(":checked")) {
tcn = "agree";
} else {
tcn = "disagree";
}
sport = $("#sport").val();
about = $("#about").val();
tab_data();
reset();
});
function tab_data() {
id++;
var data_dlt = "<button class='next delete'>delete</button>";
var data_edt = "<a class='edit next' data-tab='tab1'>edit</a>";
$("table").append("<tr>" + "<td id='uid'>" + id + "</td>" + "<td>" + fnm + "</td>" + "<td>" + lnm + "</td>" +
"<td>" + gen + "</td>" + "<td>" + mail + "</td>" + "<td>" + num + "</td>" + "<td>" + dob + "</td>" +
"<td>" + sport + "</td>" + "<td>" + about + "</td>" + "<td>" + tcn + "</td>" + "<td>" + data_edt + "</td>" + "<td>" + data_dlt + "</td>" + "</tr>");
$(".edit").click(function () {
count = $(this).attr('data-tab');
show_form(count);
edit = ($(this).index());
console.log(edit);
$("#fname").val(fnm);
$("#lname").val(lnm);
$("input[name='gender']").prop("checked", false);
$("#mail").val(mail);
$("#number").val(num);
$("#dob").val(dob);
$("#sport").val(sport);
$("#about").val(about);
$("#tc").prop("checked", false);
console.log(id, fnm, lnm, gen, mail, num, dob, sport, about, tcn);
});
$("#del").click(function () {
target = $("td button .delete").index(this);
console.log(target);
});
}
})
</script>
HTML with Bootstrap
<div class="container clearfix" style="padding:30px 20%;">
<h2>Wizard Form</h2>
<br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link tab1 active" data-tab="tab1" >STEP 1</a>
</li>
<li class="nav-item">
<a class="nav-link tab2" data-tab="tab2" >STEP 2</a>
</li>
<li class="nav-item">
<a class="nav-link tab3" data-tab="tab3">STEP 3</a>
</li>
</ul>
<!-- Tab panes -->
<div id="tab1" class=" tab-pane tab-content active"><br>
<form>
<div class="form-group row">
<label for="fname" class="col-sm-3 col-form-label">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="fname" placeholder="Enter first name">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-3 col-form-label">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lname" placeholder="Enter last name">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-3 pt-0">Gender:</legend>
<div class="col-sm-8">
<div class="form-check">
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</div>
</div>
</div>
</fieldset>
<div>
<a data-tab="tab2" class="next" >SAVE & NEXT</a>
</div>
</form>
</div>
<div id="tab2" class="tab-pane tab-content"><br>
<form action="#" method="post">
<div class="form-group row">
<label for="mail" class="col-sm-3 col-form-label">Email:</label>
<div class="col-sm-8">
<input id="mail" type="email" placeholder="Enter Email" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-sm-3 col-form-label">Contact No:</label>
<div class="col-sm-8">
<input id="number" type="text" placeholder="Enter contact number" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-3 col-form-label">Date Of Birth: </label>
<div class="col-sm-8">
<input id="dob" type="text" placeholder="dd/mm/yyyy" class="form-control">
</div>
</div>
<div style="margin-top:20px;">
<a data-tab="tab1" class=" prev">PREVIOUS</a>
<a data-tab="tab3" class=" next">SAVE & NEXT</a>
</div>
</form>
</div>
<div id="tab3" class="tab-pane tab-content"><br>
<form action="#" methos="post">
<div class="form-group row">
<label for="sport" class="col-sm-3 col-form-label"> Favourite Sport</label>
<div class="col-sm-8">
<select id="sport" class="form-control">
<option selected></option>
<option >Cricket</option>
<option >Tennis</option>
<option >Soccer</option>
<option >Hockey</option>
<option >Wrestling</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="about" class="col-sm-3 col-form-label">About Yourself</label>
<div class="col-sm-8">
<textarea class="form-control" id="about" rows="1"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<input type="checkbox" id="tc" value="agree">
<label for="tc" class=" col-form-label" >I agree to Terms & Conditions</label>
</div>
</div>
<a data-tab="tab2 " class="prev">PREVIOUS</a>
<a class="next " data-tab="tab1" id="sbmt" >submit</a>
</form>
</div>
</div>
<div class="wrap">
<table>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Email</th>
<th>Contact no </th>
<th>DOB</th>
<th>sports</th>
<th>About </th>
<th>T&C</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</table>
</div>
</body>
</html>

Replace
var data_dlt = "<button class='next delete'>delete</button>";
With
var data_dlt = "<button class='next delete' id='del' name='del'>delete</button>";

How do I calculate the total of the qty and price in a dynamic created html table row

I need help I have no Idea how to get the price and qty subtotals also I'm getting an undefined in the type field which is a drop down input I found this code here in this forum it calculates the total of the price column put not multiplying the qty and price to give a subtotal I'm very new at this jquery and java script How can I add a function that would multiply the qty * price
function row(Id, Code, Client, Quantity, Price) {
this.Id = Id;
this.Code = Code;
this.Client = Client;
//this.DebitCredit = DebitCredit;
this.Quantity = Quantity;
this.Price = Price;
}
function model() {
this.rows = [];
}
var mymodel = new model();
$(document).ready(function() {
$("body").on("click", ".delete", function() {
var id = $(this).data('id');
for (i = 0; i < mymodel.rows.length; i++) {
console.log(mymodel.rows[i].Id);
if (mymodel.rows[i].Id == id) {
mymodel.rows.splice(i, 1);
}
}
draw();
});
$('#add').click(function() {
mymodel.rows.push(new row(
$('#Id').val(),
$('#Code').val(),
$('#Client').val(),
Number($('#Quantity').val()),
Number($('#Price').val())
))
draw();
});
})
function draw() {
$('tbody').empty();
var totalQuantity = 0;
var totalPrice = 0;
$.each(mymodel.rows, function(i, row) {
totalQuantity += row.Quantity;
totalPrice += row.Price;
var myrow = '<tr>'
$.each(row, function(key, value) {
myrow += '<td>' + value + '</td>'
});
myrow += '<td><input type="button" class="btn btn-danger delete" data-id="' + row.Id + '" value="X"/></td>'
myrow += '<tr>'
$('tbody').append(myrow);
});
$('#totalQuantity').text(totalQuantity)
$('#totalPrice').text(totalPrice)
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<table class="table table-condensed">
<thead>
<tr>
<td>Part #</td>
<td>Part Name</td>
<td>Type</td>
<td>Quantity</td>
<td>Price</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan=7>Total Quantity:
<span id="totalQuantity"></span> Total Price:
<span id="totalPrice"></span>
</td>
</tr>
</tfoot>
</table>
<form class="form-inline">
<div class="form-group">
<label for="id">Part #:</label>
<input type="text" class="form-control" id="Id">
</div>
<div class="form-group">
<label for="PartName">Part Name:</label>
<input type="text" class="form-control" id="Code">
</div>
<div class="form-group">
<label for="type">Type:</label>
<select name="type" id="cliente" class="form-control">
<option value="" selected="selected"">Please Select..</option>
<option value="Code">Code</option>
<option value="Regular">Regular</option>
</select>
</div>
<div class="form-group">
<label for="Quantity">Quantity:</label>
<input type="number" class="form-control" id="Quantity">
</div>
<div class="form-group">
<label for="Price">Price:</label>
<input type="number" class="form-control" id="Price">
</div>
<input type="button" class="btn btn-info" value="add" id="add" />
</form>
</body>
</html>

You were missing a small detail. When setting the total price, you were using this code totalPrice += row.Price;. All you needed to do, was changing the code, so that instead of just adding up the price, you would multiply it by the row quantity,
totalPrice += row.Price * row.Quantity;.
function row(Id, Code, Client, Quantity, Price) {
this.Id = Id;
this.Code = Code;
this.Client = Client;
//this.DebitCredit = DebitCredit;
this.Quantity = Quantity;
this.Price = Price;
this.Total = Quantity * Price;
}
function model() {
this.rows = [];
}
var mymodel = new model();
$(document).ready(function() {
$("body").on("click", ".delete", function() {
var id = $(this).data('id');
for (i = 0; i < mymodel.rows.length; i++) {
console.log(mymodel.rows[i].Id);
if (mymodel.rows[i].Id == id) {
mymodel.rows.splice(i, 1);
}
}
draw();
});
$('#add').click(function() {
mymodel.rows.push(new row(
$('#Id').val(),
$('#Code').val(),
$('#cliente').val(),
Number($('#Quantity').val()),
Number($('#Price').val())
))
draw();
});
})
function draw() {
$('tbody').empty();
var totalQuantity = 0;
var totalPrice = 0;
$.each(mymodel.rows, function(i, row) {
totalQuantity += row.Quantity;
totalPrice += row.Price * row.Quantity;
var myrow = '<tr>';
$.each(row, function(key, value) {
myrow += '<td>' + value + '</td>'
});
myrow += '<td><input type="button" class="btn btn-danger delete" data-id="' + row.Id + '" value="X"/></td>'
myrow += '<tr>'
$('tbody').append(myrow);
});
$('#totalQuantity').text(totalQuantity)
$('#totalPrice').text(totalPrice)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<table class="table table-condensed">
<thead>
<tr>
<td>Part #</td>
<td>Part Name</td>
<td>Type</td>
<td>Quantity</td>
<td>Price</td>
<td>Total</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan=7>Total Quantity:
<span id="totalQuantity"></span> Total Price:
<span id="totalPrice"></span>
</td>
</tr>
</tfoot>
</table>
<form class="form-inline">
<div class="form-group">
<label for="id">Part #:</label>
<input type="text" class="form-control" id="Id">
</div>
<div class="form-group">
<label for="PartName">Part Name:</label>
<input type="text" class="form-control" id="Code">
</div>
<div class="form-group">
<label for="type">Type:</label>
<select name="type" id="cliente" class="form-control">
<option value="" selected="selected">Please Select..</option>
<option value="Code">Code</option>
<option value="Regular">Regular</option>
</select>
</div>
<div class="form-group">
<label for="Quantity">Quantity:</label>
<input type="number" class="form-control" id="Quantity">
</div>
<div class="form-group">
<label for="Price">Price:</label>
<input type="number" class="form-control" id="Price">
</div>
<input type="button" class="btn btn-info" value="add" id="add" />
</form>
</body>
</html>
Please, let me know if you need anything else. Also, there was a typo in #Cliente, the c was on lower case, so I changed it to #cliente.

How to get the id of a drop down list from different rows of a table?

I am currently working on a web app that lets the user create a survey like Google forms using asp.net C#. Right now having trouble getting the id of the generated drop down list that's why I can't put any field in the new rows here is the code for the form:
<div class="form-group" style="margin:auto; width:80%;">
<form name="add_question" id="add_question">
<asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
<input type="text" name="title" id="title" class="form-control question_list" placeholder="Enter Survey Title"/>
<asp:Label ID="Label2" runat="server" Text="Description: " Font-Size="Large"></asp:Label>
<br>
<textarea rows="4" cols="100%" name="description" id="description" placeholder="Enter description"></textarea>
<table class="table" id="dynamic_field">
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
<tr id="row1">
<td style="width: 50%"><input type="text" name="question1" id="question1" class="form-control question_list" placeholder="Enter question"/></td>
<td style="width: 15%"><select name="type1" id="type1" class="dropdown">
<option selected></option>
<option value="1">Multiple Choice</option>
<option value="2">CheckBox</option>
<option value="3">Short Sentence</option>
<option value="4">Paragraph</option>
<option value="5">Line Scale</option>
</select></td>
<td style="width: 30%"></td>
<td style="width: 5%"> <button name="remove" id="1" class="btn btn-danger btn_remove"> X </button></td>
</tr>
</table>
<button type="button" name="add" id="add" class="btn btn-warning" > Add Question </button>
</form>
<button type="button" name="submit" id="submit" class="btn btn-success" > Submit </button>
</div>
And here is the code for generating the fields of the survey I'm making:
<script>
var i = 1;
$("#add").click(function () {
i++;
$("#dynamic_field").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$("#row" + button_id + "").remove();
});
$('#type1').change(function () {
var x = 1;
if ($(this).val() == '3') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$('#myInput'+x+'').remove();
}
});
</script>
I'm also open for any ideas that can make this easier to create.

Create table like
<table class="table" id="dynamic_field">
<thead>
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
When appending rows, append to tbody.
$("#add").click(function () {
i++;
$("#dynamic_field tbody").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
Change change event like this
$('#dynamic_field').on('change','[id^=type]',function () {
var x = 1;
if ($(this).val() == '3') {
$(this).closest('tr').find('[id^=myInput]').remove();
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$(this).closest('tr').find('[id^=myInput]')
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$(this).closest('tr').find('[id^=myInput]')
}
});

Not working HTML table rows from jQuery append()

How to create rows in tables by append() that still be able to operate with math operations?
Now I have row in HTML including netto price, amount, discount, tax rate and brutto price - brutto price is shown after input netto and amount, tax is selected from , but it's working only for HTML generated row, not for jQuery append. How to fix it?
HTML
<table class="table table-striped table-bordered" id="invoice">
<thead>
<tr>
<th class="col-xs-0">Lp.</th>
<th class="col-xs-4">Towar/usługa</th>
<th class="col-xs-1">PKWiU</th>
<th class="col-xs-1">Ilość</th>
<th class="col-xs-1">Jedn.</th>
<th class="col-xs-1">Cena netto</th>
<th class="col-xs-1">Rabat</th>
<th class="col-xs-2">VAT</th>
<th class="col-xs-1">Cena brutto</th>
</tr>
</thead>
<tbody>
<tr>
<th><p class="form-control-static">1.</p></th>
<td>
<div class="form-group input-sm">
<input type="text" name="product[]" class="form-control" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="pkwiu[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="quantity[]" class="form-control quantity" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="unit[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="nettoprice[]" class="form-control nettoprice" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="discount[]" class="form-control discount">
</div>
</td>
<td>
<div class="form-group">
<div class="col-xs-12">
<select class="form-control vatrate" name="vatrate[]" form="invoice">
<option value="0">zw.</option>
<option value="1.00">0%</option>
<option value="1.05">5%</option>
<option value="1.08">8%</option>
<option value="1.23" selected>23%</option>
</select>
</div>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
</div>
</td>
</tr>
</tbody>
</table>
jQuery
var x = 2;
$("#addProduct").click(function(){
$row = '<tr>' +
'<th>'+x+'.</th>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="product[]" class="form-control" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="pkwiu[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="quantity[]" class="form-control quantity" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="unit[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="discount[]" class="form-control discount">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group">' +
'<div class="col-xs-12">' +
'<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
'<option value="0">zw.</option>' +
'<option value="1.00">0%</option>' +
'<option value="1.05">5%</option>' +
'<option value="1.08">8%</option>' +
'<option value="1.23" selected>23%</option>' +
'</select>' +
'</div>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
'</div>' +
'</td>' +
'</tr>';
$('#invoice > tbody:last').append($row);
x=x+1;
});
$("#deleteProduct").click(function(){
$("tbody > tr:last").remove();
if(x > 1) {
x = x - 1;
}
});
$('select').on('change', function () {
var vat = this.selectedOptions[0].value;
console.log(vat);
});
$(":input").on('input', function(){
var $tr = $(this).closest("tr");
var netto = parseFloat($tr.find('.nettoprice').val()),
quantity = parseFloat($tr.find('.quantity').val()),
vat = parseFloat($tr.find('.vatrate').val()),
discount = parseFloat($tr.find('.discount').val());
if(isNaN(discount)) {
discount = 1;
} else {
discount = discount / 100;
discount = 1 - discount;
}
if(vat == 0 || vat == -1) {
vat = 1;
}
var v = '';
console.log(netto, quantity, vat, discount);
if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
v = netto * quantity * discount * vat;
v = v.toFixed(2);
}
$tr.find('.bruttoprice').val(v.toString());
});

Remove the last or make it :last-child:
$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);

Either remove the :last from it:
$('#invoice > tbody').append($row);
or use it with .after() with the :last tr of the table:
$('#invoice > tbody tr:last').after($row);

Okay, I found mistake - function works fine now.
$(document).on('input', ':input', function(){
/* Foo */
});

We Keep Coding

JavaScript is the programming language of the Web.

"required" validation not working in javascript - javascript

Related

how to compare listbox values and table values in javascript?

Edit and Delete buttons are not working in form how to fix it

How do I calculate the total of the qty and price in a dynamic created html table row

How to get the id of a drop down list from different rows of a table?

Not working HTML table rows from jQuery append()

Categories

Resources