Develop Reference

form not clearing properly after submit and also for hidden input

I'm using a parsley validator and somehow it affects my form. After submission, it won't clear all the inputs; especially hidden inputs. And when I tried to set some input value from javascript it won't show up.
I think it's because of my <form method="post" id="transaction_form">. I've tried to re-evaluate my HTML but still, it won't work properly.
$(document).ready(function () {
$("#cust_num").val(55555);
var exam_num = 12345;
var prod_num = 88998;
var prod_name = "Hello";
var prod_price = 150000;
var transactionTable = $("#transaction_table");
var trxprodcount = 0;
var subTotal = 0;
var endTotal = 0;
function clearinput() {
$("#transaction_form")[0].reset();
$("#transaction_form").parsley().reset();
//$('#get_productdata').attr('disabled', 'disabled');
$("#subtotal").html(0);
$("#endtotal").html(0);
}
clearinput();
function recount() {
subTotal = transactionTable.DataTable().column(3).data().sum();
$("#subtotal").html(subTotal);
endTotal = subTotal - (subTotal * $("#trx_disc").val()) / 100;
$("#endtotal").html(endTotal);
}
transactionTable.DataTable({
ordering: false,
responsive: true,
searching: false,
paging: false,
info: false,
fnRender: function (Obj) {
return "Rp" + Obj.Data[3];
},
drawCallback: function () {
recount();
},
});
$("#trx_disc").on("change", function () {
recount();
});
trxprodcount = trxprodcount + 1;
var exam_num = $("#cust_num").val() + "S" + trxprodcount;
var col_exam_num =
exam_num +
'<input type="hidden" name="hidden_exam_num[]" id="exam_num' +
trxprodcount +
'" class="exam_num" value="' +
exam_num +
'" />';
var col_exam_prod =
prod_num +
'<input type="hidden" name="hidden_exam_prod[]" id="exam_prod' +
trxprodcount +
'" value="' +
prod_num +
'" />';
var del_btn =
'<button type="button" name="del_prodtrx" id="' +
trxprodcount +
'" class="btn btn-danger btn-sm del_prodtrx" >Delete</button>';
transactionTable
.DataTable()
.row.add([col_exam_num, col_exam_prod, prod_name, prod_price, del_btn])
.draw()
.node();
$("#transaction_table").on("click", ".del_prodtrx", function () {
var row = $(this).parents("tr");
if ($(row).hasClass("child")) {
transactionTable.DataTable().row($(row).prev("tr")).remove().draw();
} else {
transactionTable.DataTable().row($(this).parents("tr")).remove().draw();
}
});
$("#transaction_form").on("submit", function (event) {
event.preventDefault();
if ($("#transaction_form").parsley().isValid()) {
var count_data = 0;
$(".exam_num").each(function () {
count_data = count_data + 1;
});
if (count_data > 0) {
clearinput();
} else {
$("#message").html(
'<div class="alert alert-danger">Customer/Product Kosong'
);
}
setTimeout(function () {
$("#message").html("");
}, 3000);
}
});
});
Live Example: https://jsfiddle.net/azissofyanp/9p7j1d6u/30/
And I'm very confused about it.

Count the results returned in an AJAX call from selected parent

My first pop up list distinct customers with distinct cust_id from the AJAX call. I'm trying to get the count of the number of rows with cust_id that are the same as the selected customer.
For example: If I select "Jeffs Music" from the distinct list I need the count to return 5 since there are 5 rows that cust_id = "15"
$('.add-invoice').live('click', function() {
$("#invoice_div").css("display", "block");
$.ajax({
url: 'invoice_fill.php',
data: {
action: "invoice"
},
dataType: 'json',
success: function(data) {
var result = [];
$.each(data, function(i, e) {
var matchingItems = $.grep(result, function(item) {
return item.customer === e.customer && item.cust_id === e.cust_id;
console.log(item.cust_id);
});
if (matchingItems.length === 0) {
result.push(e);
}
});
var xyz = (JSON.stringify(result));
console.log(xyz);
populateSelectBoxes($('#invoice_div #ddinvoice'), result);
function populateSelectBoxes($select, result) {
var invoices = [];
$.each(result, function() {
invoices.push('<li data-value="' + this.cust_id + '">' + this.customer + ' : ' + this.invoice + '</li>');
});
$select.append(invoices.join(''));
}
function populateTableRow(data, selectedProductAutonum) {
var invoices;
$.each(result, function() {
if (this.cust_id == selectedProductAutonum) {
invoices = this;
var arr = this.cust_id;
var occurrences = {};
for (var i = 0, j = arr.length; i < j; i++) {
occurrences[arr[i]] = (occurrences[arr[i]] || 0) + 1;
}
console.log(occurrences);
return false;
// changed autonun to cust_id to give unique record/product call (changed in line 248 as well)
}
});
$(".item-row:last").after(
'<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a><a class="add-product" href="javascript:;" title="Add Product">A</a></div></td><td class="description"><textarea form ="testinsert" name="item_desc[]">Description</textarea></td><td><textarea class="cost" form ="testinsert" name="item_cost[]">$0</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty[]">0</textarea></td><td><span class="price" form ="testinsert" name="item_price[]">$0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
$('#address-title').val(invoices.customer);
$('#address-one').val(invoices.address);
//$('#address-two').val(invoices.sales + '\n' + invoices.owed);
//$('#address-three').val(invoices.address3);
///////////////////////////////////////////
$('#invoice_num').val(invoices.invoice);
$('#paid').val(invoices.paid);
$('#owed').val(invoices.sales);
$('#auto_num').val(invoices.autonum);
///////////////////////////////////////////
$('[name="item_name[]"]').val(invoices.product);
$('[name="item_desc[]"]').val(invoices.description);
$('[name="item_cost[]"]').val(invoices.cost);
$('[name="item_qty[]"]').val(invoices.quantity);
$('[name="item_price[]"]').val(invoices.price);
}
$('#invoice_div #ddinvoice li').click(function(e) {
var selection = $(this).attr("data-value");
$(this).parent().parent().parent().hide();
populateTableRow(data, selection);
$('ul').empty();
});
}
});
update_total();
});
Look at this jsFiddle for full code. That should be clear, however the AJAX calls are not working in it?

Trigger keyup on page load

In my code below I am not able to trigger the quantity function. Normally, when I execute the quantity function below I use keyup, i.e when I start typing in the quantity box.
However this time, in the quantity input box below I fetch a value from the database into it already so on page load I am expecting the function trigger to run that function. That is not working. How can I get this done?
$(document).ready(function() {
#foreach($products - > items as $item)
var item = $('#{!! $item->id !!}');
var ad = JSON.parse(item.attr('data-item'));
if (item.prop("checked")) {
$('.panel').append(
'<div class="container"> ' +
'<p class="name" >' + ad.name + '</p>' +
'<p class="price" data-price="' + ad.price + '">' + ad.price + '</p>' +
'<p class="total" ><span class="line-total" name="total" id="total"></span></p>' +
'<input size="50" type="text" class="form-control quantity" placeholder=" qty " name="quantity[]" value="{!!$item->pivot->quantity!!}" required/>' +
'</div>'
)
} else {
$(".panel .container [data-id=" + ad.id + "]").parent().remove();
}
quantityFunction();
#endforeach
update
<script>
var quantityFunction => function() {
var container = $(this).closest('div');
var sum;
var quantity = Number($(this).val());
var price = Number($(this).closest('div').find('.price').data('price'));
points = Number($(this).closest('div').find('.points').data('points'));
container.find(".total span").text(quantity * price);
container.find(".pts-total span").text(quantity * points);
sum = 0;
$(".line-total").each(function(){
sum = sum + Number($(this).text());
})
}
</script>

Why don't you put the quantity function into a non anonymous function and call it on document ready?
var quantityFunction = function() {
// your code here
}
and
$( document ).ready(function() {
quantityFunction ();
});
EDIT
JS Snipped:
var quantityFunction = function() {
var container = $(this).closest('div');
var sum;
var quantity = Number($(this).val());
var price = Number($(this).closest('div').find('.price').data('price'));
points = Number($(this).closest('div').find('.points').data('points'));
container.find(".total span").text(quantity * price);
container.find(".pts-total span").text(quantity * points);
sum = 0;
$(".line-total").each(function() {
sum = sum + Number($(this).text());
});
}

Doesn't it have to be here?
$('.panel').on('trigger','click',function() { }

$('.panel').on('trigger','.quantity',function()
Which event you want to trigger on the .panel?
Correct format for .on jQuery method is
.on( events [, selector ] [, data ], handler )
eg:
$('.panel').on('click','.quantity',function() {} );
Changes to your updated code,
var $container = $('.panel').closest('div');
var sum;
var quantity = Number($('.quantity').val());
var price = Number($container.find('.price').data('price'));
points = Number($container.find('.points').data('points'));
$container.find(".total span").text(quantity * price);
$container.find(".pts-total span").text(quantity * points);

Cannot select a button which appended dynamically in jQuery

I use getJSON function in jQuery and append the retrieved result in the form of button in the DOM. however I cannot use the selector on the appended DOM.
here is my script:
$.getJSON("http://example.com/checkDiary.php?babyID=" + localStorage.getItem("babyRegNo"), function(data) {
if (data.indexOf("noDiary") > -1) {
document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
} else {
var appendedText = '';
$.each(data, function(){
var diaryID = this.diary_id;
var dateAdded = this.date;
appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
})
document.getElementById("diaryList").innerHTML = appendedText;
}
})
this is what i use to select:
$(':button.diaries').click(function(){});
but it seems not working. however when I put a dummy button with the same class in the HTML body, it is selected perfectly. Can you guys give me any suggestion?

#Kelvin Aliyanto ....So the solution will be like this
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(function(){
$.getJSON("http://example.com/checkDiary.php?babyID=" + localStorage.getItem("babyRegNo"), function(data) {
if (data.indexOf("noDiary") > -1) {
document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
} else {
var appendedText = '';
$.each(data, function(){
var diaryID = this.diary_id;
var dateAdded = this.date;
appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
})
document.getElementById("diaryList").innerHTML = appendedText;
}
});
$('div').on('click', '.diaries', function(event){
alert("Hi");
}) ;
});
</script>
<div id="diaryList"></div>

check your code is after document ready
$(document).ready(function(){ //your code here });
and use
$('button.diaries').on(click , function(){})
instead of .click

How to get the values of all textfields in add/remove textfields and form JSON

I'm using a plugin to duplicate textfields on add and remove buttons. Now, after getting the fields added and removed, I want to form JSON out of all the textfields and POST it on submit.
Below is the code -
$(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function () {
$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
JSFiddle can be referred to.
I want to get the values of all textfields and form JSON.

Iterate through the input fields, grab their values, and push them through JSON.stringify to create your desired JSON.
function serializeAndPost() {
var values = [];
$( '#p_scents input[id^=p_scnt_]' ).each( function ( index, element ) {
values.push( element.value );
} );
var json = JSON.stringify( { "welcomesList": values } );
// Do your POSTing here
}
Updated fiddle:
https://jsfiddle.net/tZPg4/11019/

I don't know if this is the best solution as I am building a string rather than an JSON object but here is my solution:
HTML
<input type="button" id="btnSubmit" value="Submit"></input>
JS:
$(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function () {
$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
$('#btnSubmit').click(function(e) {
e.preventDefault();
var str = [];
$.each($('input[type=text]'), function(i, val) {
var el = $(this);
str.push('"' + el.attr("id") + '":"' + el.val() +'"');
});
var json_string = "{" + str + "}";
});
});