Input with wrong size - javascript

Hello I'm using bootstrap 3.3.6 and I don't know why this is happen. Basically I am using bootstrap grid system, I have mi first div with col-md-12 and then with jQuery I create 4 divs with class col-md-3 with controls inside but when I resize the window the controls jump to other line and leaves a blank space.
var num = 0;
var lineas = "";
$('#agregar').click(function() {
agregar();
});
function agregar() {
num++;
if (num <= 4) {
if (num == 1) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Quality:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 2) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Manufacture:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 3) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Supp. Produccion:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 4) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Control de Documentos:</label">';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
} else {
$('#agregar').hide();
$('#lbl1').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" id="options">
<div class="col-md-4">
<label id="lbl1" class="control-label hidden-print">Add</label>
<span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
</div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>
jsFiddle


There's a typo in the HTML strings in the JS. You have </label"> instead of </label>.
var num = 0;
var lineas = "";
$('#agregar').click(function() {
agregar();
});
function agregar() {
num++;
if (num <= 4) {
if (num == 1) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Quality:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 2) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Manufacture:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 3) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Supp. Produccion:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
if (num == 4) {
lineas += '<div class="col-md-3 form-group">';
lineas += '<label class="control-label hidden-print">Control de Documentos:</label>';
lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
lineas += '</div>';
$('#aprobadores').append(lineas);
lineas = "";
}
} else {
$('#agregar').hide();
$('#lbl1').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" id="options">
<div class="col-md-4">
<label id="lbl1" class="control-label hidden-print">Add</label>
<span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
</div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>

Related

Adding {% csrf_token %} to javascript HTML insertion

All,
I have a popup that is inserted via javascript when a button is clicked:
function loadTypeManagement(existingDocTypes) {
const typeManagementModalDiv =
'<div class="modal fade" id="typeManagementModalDiv" >' +
'<div class="modal-dialog" style="max-width: none;">' +
'<div class="modal-content feedback_popup" style="height:100%; margin-top: 0vh;">' +
'<form class="feedback_form" autocomplete="off" action="/" method="post" id="taskitem_form">' +
'<h1 id="djangoInsert">Type Management</h1><br>' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Add a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="addDoctypeId" type="text" name="addDocTypeName" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'<p class="col-sm-4 admin_input_desc d-inline">Can this new type be an Authentication Source?</p>' +
'<label class="">No</label>' +
' <input type="radio" id="date_newToOld" name="choice" value="date_newToOld" checked/>' +
'<label class="float-right " style="margin-left: 1.25vw;">Yes</label>' +
' <input class="float-left" type="radio" id="date_newToOld" name="choice" value="date_newToOld" />' +
'</div>' +
'</div>' +
'<input class="submit_button" name="submit" type="submit" value="Add Document Type">' +
'</div>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Remove a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<input class="submit_button" type="submit" value="Remove Document Type">' +
'</div>' +
'<hr>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Change a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Change Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m2" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">To Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="myInput" type="text" name="myCountry" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col-4"></div>' +
'<input class="col-4 submit_button" type="submit" value="Change Document Type">' +
'<div class="col-4"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<hr>' +
'</form>' +
'</div>' +
'</div>' +
'</div>';
const newDiv = document.createElement("div");
newDiv.innerHTML = typeManagementModalDiv;
var data = $('form').serialize()
document.body.appendChild(newDiv);
for (i = 0; i < existingDocTypes.length; i++) {
var opt = document.createElement("option");
document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}
I am trying to submit the form and keep getting the error "CSRF token missing or incorrect." I've tried to insert it via string '{% csrf_token %}', but that just leaves the string value and Django doesn't pick up on it.
Any idea how I can do this? Is there a better way?

I'm not completely sure if there are any security concerns using this method (please let me know if there are), but I was able to initiate the {{ csrftoken }} within the template using:
<script>
var csrftoken = '{{ csrf_token }}';
</script>
and then passing that token value to the JS function like so:
<a onclick="loadTypeManagement({{ existingDocTypes }}, csrftoken);" id="feedbackButton" data-toggle="modal" data-target="#typeManagementModalDiv" class="hide_table_button underline_none" href="{% url 'admin:login' %}">Type Management</a>
Then, within the JS, I was able to add the line:
'<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
which holds the token value.
So, the full JS looks like this:
function loadTypeManagement(existingDocTypes, csrftoken) {
console.log(csrftoken)
const typeManagementModalDiv =
'<div class="modal fade" id="typeManagementModalDiv" >' +
'<div class="modal-dialog" style="max-width: none;">' +
'<div class="modal-content feedback_popup" style="height:100%; margin-top: 0vh;">' +
'<form class="feedback_form" autocomplete="off" action="/adminFunct/" method="post" id="taskitem_form">' +
'<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
'<h1 id="djangoInsert">Type Management</h1><br>' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Add a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="addDoctypeId" type="text" name="addDocTypeName" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'<p class="col-sm-4 admin_input_desc d-inline">Can this new type be an Authentication Source?</p>' +
'<label class="">No</label>' +
' <input type="radio" id="date_newToOld" name="choice" value="date_newToOld" checked/>' +
'<label class="float-right " style="margin-left: 1.25vw;">Yes</label>' +
' <input class="float-left" type="radio" id="date_newToOld" name="choice" value="date_newToOld" />' +
'</div>' +
'</div>' +
'<input class="submit_button" name="submit" type="submit" value="Add Document Type">' +
'</div>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<hr>' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Remove a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<input class="submit_button" type="submit" value="Remove Document Type">' +
'</div>' +
'<hr>' +
'</form>' +
'<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
'<div class="autocomplete container justify-content-center">' +
'<h3 style="margin-bottom: .5vw;">Change a Document Type</h3>' +
'<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">Change Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<tr>' +
'<td class=" text-center col-6 remove_doc_dropdown ">' +
'<select class=" text-center remove_doc_dropdown2 " id="m2" >' +
'<option id="-1" value="" selected disabled>Document Type</option>' +
'</select>' +
'</td>' +
'</tr>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<label class="col-6 admin_input_desc ">To Document Type:</label>' +
'<div class="col-3"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-3"></div>' +
'<input class=" text-center col-6 admin_input " id="myInput" type="text" name="myCountry" placeholder="Document Type">' +
'<div class="col-3"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col-4"></div>' +
'<input class="col-4 submit_button" type="submit" value="Change Document Type">' +
'<div class="col-4"></div>' +
'<div class="d-inline p-2 text-white ">' +
'</div>' +
'</div>' +
'<hr>' +
'</form>' +
'</div>' +
'</div>' +
'</div>';
const newDiv = document.createElement("div");
newDiv.innerHTML = typeManagementModalDiv;
document.body.appendChild(newDiv);
for (i = 0; i < existingDocTypes.length; i++) {
var opt = document.createElement("option");
document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}
For any curious, this portion is used for dropdown stuff and not needed for anything related to the csrf_token
for (i = 0; i < existingDocTypes.length; i++) {
var opt = document.createElement("option");
document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}

multiple dynamic input onchange and onblur function javascript

I have multiple input that when you select the option, the stock and the price would come out on other input to be used for another function.
i've tried to add unique id's for the inputs added but i just cant seem to figure out how to apply the function to the added inputs.
here is the Html:
<div id="container1">
<div class="form-group row">
<div class="col-lg-3">
<select class="form-control border-teal" id="produk_nama1" name="produk_nama[]">
<option value="">Pilih Produk</option>
#foreach ($stoks as $stok)
<option data-stok="{{$stok->stok}}" data-price="{{$stok->harga}}" value="{{$stok->produk->produk}}">{{$stok->produk->produk}}</option>
#endforeach
</select>
<div class="d-block form-text">
<span id="stok1" class="badge bg-orange"></span>
</div>
</div>
<div class="col-lg-3">
<input type="text" id="harga1" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>
</div>
<div class="col-lg-3">
<input type="number" id="jumlah1" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">
</div>
<div class="col-lg-3">
<input type="text" id="subtotal1" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>
</div>
</div>
</div>
here is the javascript:
$(document).ready(function() {
var add_button = $("#add_button");
var inputs = document.getElementsByTagName('input');
var select = document.getElementById("produk_nama");
var i = 1;
$(add_button).click(function(e) {
e.preventDefault();
i++;
$("#container1")
var html = '<div class="form-group row">';
// select buah
html += '<div class="col-lg-3">';
html += '<select class="form-control border-teal" id="produk_nama'+i+'" name="produk_nama[]">';
html += '<option value="">Pilih Produk</option>';
html += '#foreach ($stoks as $stok)';
html += '<option data-stok="{{$stok->stok}}" data-price="{{$stok->harga}}" value="{{$stok->produk->produk}}">{{$stok->produk->produk}}</option>';
html += '#endforeach';
html += '</select>';
html += '<div class="d-block form-text">';
html += '<span id="stok'+i+'" class="badge bg-orange"></span>';
html += '</div></div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="harga'+i+'" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="number" id="jumlah'+i+'" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="subtotal'+i+'" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>';
html += '</div>';
html += '</div>';
$(this).before(html);
// clone entire div
// $("#container1")
// .append(
// $("#container1")
// .children(inputs)
// .first()
// .clone()
// )
});
// main input function
$('#produk_nama'+i).on('change', function(){
alert(i);
var hargaproduk = $('#produk_nama'+i+' option:selected').data('price');
var stok = $('#produk_nama'+i+' option:selected').data('stok');
$('#stok'+i).text('Stok '+stok);
$('#harga'+i).val(hargaproduk);
});
document.getElementById('jumlah'+i).addEventListener("blur", function(){
var jumlah = $('#jumlah'+i).val();
var harga = $('#harga'+i).val();
var subtotal = jumlah * harga;
$('#subtotal'+i).val(subtotal);
})
});
any help and explanation would be much appreciated, thank you

As your first select-box i.e :produk_nama is same for all divs you can use clone() method to get clone of that select instead of writing laravel code inside jquery code.
Then , you can use $(document).on("change", "select[name*=produk_nama]".. to capture all change event on select-box . Inside this you can use .closest() and .find() method to get required values from input you needed and add the value to required inputs.Same you can do for jumlah input .
Demo Code :
$(document).ready(function() {
var add_button = $("#add_button");
var i = 1;
$(add_button).click(function(e) {
e.preventDefault();
i++;
$("#container1")
//get first div > selct clone it
var slects = $('.outer:first').find("select").clone();
var html = '<div class="form-group row outer">';
html += '<div class="col-lg-3">';
html += '<select class="form-control border-teal" id="produk_nama' + i + '" name="produk_nama[]">';
html += $(slects).html(); //add that
html += '</select>';
html += '<div class="d-block form-text">';
html += '<span id="stok' + i + '" class="badge bg-orange"></span>';
html += '</div></div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="harga' + i + '" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="number" id="jumlah' + i + '" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">';
html += '</div>';
html += '<div class="col-lg-3">';
html += '<input type="text" id="subtotal' + i + '" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>';
html += '</div>';
html += '</div>';
$(this).before(html);
});
//on change of selct
$(document).on("change", "select[name*=produk_nama]", function() {
//get attrs values
var hargaproduk = $(this).find("option:selected").attr('data-price');
var stok = $(this).find("option:selected").attr('data-stok');
//add the values to required elemnt
$(this).closest(".outer").find(".d-block span").text('Stok ' + stok)
$(this).closest(".outer").find("input[name*=harga]").val(hargaproduk);
});
$(document).on("blur", "input[name*=jumlah]", function() {
var jumlah = $(this).val(); //get value
var harga = $(this).closest(".outer").find("input[name*=harga]").val();
var subtotal = jumlah * harga;
//add value to subtotal
$(this).closest(".outer").find("input[name=subtotal]").val(subtotal);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
<!--just added outer class-->
<div class="form-group row outer">
<div class="col-lg-3">
<select class="form-control border-teal" id="produk_nama1" name="produk_nama[]">
<option value="">Pilih Produk</option>
<option data-stok="something" data-price="12" value="1">1</option>
<option data-stok="something" data-price="13" value="2">2</option>
<option data-stok="something" data-price="14" value="3">3</option>
</select>
<div class="d-block form-text">
<span id="stok1" class="badge bg-orange"></span>
</div>
</div>
<div class="col-lg-3">
<input type="text" id="harga1" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>
</div>
<div class="col-lg-3">
<input type="number" id="jumlah1" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">
</div>
<div class="col-lg-3">
<input type="text" id="subtotal1" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>
</div>
</div>
</div>
<button id="add_button">Add more</button>

How to prevent append from key in button to not add extra values when a new div is created

I've created a form which will add products to be key in details of the said products, each products will sometime have serialnumbers, users will need to click enabled serial numbers to start key in serial numbers.
So i have issue here whereby, when i add a new product, and key in serial number on product #1, it will have additional value added to it.
in a more detailed and simpler explanation;
Add Product -> product #2 created.
enabled product #1 table to key in
value inputted to textarea became
SGH983819;
;
How do i go about to not let any previous product's key in not add on those ;\n in any previous appended section?
$(document).ready(function() {
function enableSerial() {
$('.enable-serial').on('change', function() {
var item = $(this).data('item');
$('.enable-' + item).prop('disabled', !this.checked);
});
}
$('#add_product').on('click', function() {
var itemNo = $('.product-item').length + 1;
var appendData = '<div class="product-item" data-item="' + itemNo +'">' +
'<span>#' + itemNo +'</span>' +
'<button type="button" class="btn btn-danger float-right remove_product"><i class="fas fa-trash-alt"></i></button>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Category</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']category" type="text" placeholder="eg. 333" maxlength="3"required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Code</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']code" type="text" placeholder="eg. 22" maxlength="2" required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Partnumber</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']partnumber" type="text" placeholder="eg. NGH92838" required>' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Brand</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']brand" type="text" placeholder="eg. Rototype" required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Quantities</label>' +
'<div class="col-sm-2">' +
'<input class="form-control" name="products[' + (itemNo - 1) + ']qty" type="number" placeholder="eg. 1" required>' +
'</div>' +
'<label class="col-sm-1 col-form-label font-weight-bold">Location</label>' +
'<div class="col-sm-2">' +
'<input class="form-control location-ctrl-' + itemNo +' location-ctrl" data-item="' + itemNo +'" type="text" name="products[' + (itemNo - 1) + ']loc_name" list="locations" value="">' +
'<input type="hidden" class="location-id-' + itemNo +'" name="products[' + (itemNo - 1) + ']location_id" value="">' +
'<input type="hidden" class="loc-desc-' + itemNo +'" name="products[' + (itemNo - 1) + ']loc_desc" value="">' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Description</label>' +
'<div class="col-sm-8">' +
'<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label font-weight-bold">Serial Number(s)</label>' +
'<div class="col-sm-5">' +
'<input class="form-control enable-' + itemNo +' serial-' + itemNo +'" maxlength="25" placeholder="Key in Serial Number and hit button Key In" disabled>' +
'</div>' +
'<div class="col-sm-5">' +
'<button class="btn btn-dark enable-' + itemNo +' keyin-ctrl-' + itemNo +' keyin-ctrl" data-item="' + itemNo +'" type="button" disabled>Key In</button>' +
'<button class="btn btn-dark ml-1 enable-' + itemNo +' undo-ctrl-' + itemNo +' undo-ctrl" data-item="' + itemNo +'" type="button" disabled>Del</button>' +
'<input class="form-check-input ml-4 mt-2 pointer enable-serial-' + itemNo +' enable-serial" data-item="'+ itemNo +'" id="checkbox-' + itemNo +'" type="checkbox">' +
'<label class="form-check-label ml-5 pointer" for="checkbox-' + itemNo +'">tick to enable serialnumber</label>' +
'</div>' +
'</div>' +
'<div class="form-group row">' +
'<label class="col-sm-2 col-form-label"></label>' +
'<div class="col-sm-5">' +
'<textarea class="form-control display-' + itemNo +'" name="products[' + (itemNo - 1) + ']serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>' +
'</div>' +
'</div>' +
'<hr>' +
'</div>';
$('#append').append(appendData);
enableSerial();
ctrlSerial();
});
function ctrlSerial() {
$('.keyin-ctrl').on('click', function() {
var item = $(this).data('item');
var result = $('.serial-' + item).val() + '; \n';
$('.display-' + item).append(result);
$('.serial-' + item).val('').focus();
});
$('.undo-ctrl').on('click', function() {
var item = $(this).data('item');
$('.display-' + item).html('');
});
}
$('#append').on('click','.remove_product', function(){
var itemNo = $('.product-item').length + 1;
$(this).parent('div').remove();
itemNo--;
});
enableSerial();
ctrlSerial();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
<h4>Product Details</h4>
<hr>
<h5>GRN Details</h5>
<form method="post" action="">
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">GRN</label>
<div class="col-sm-4">
<input class="form-control" type="text" value="020719" name="nnmmyy" readonly>
<input type="hidden" name="supp_name" value="ABCD Co. Ltd.">
<input type="hidden" name="supp_do" value="DO97/39901/01">
<input type="hidden" name="do_date" value="17/07/2019">
</div>
</div>
<!-- Multiple Product addition -->
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Product Setting</label><br/>
<div class="col-sm-5">
<button type="button" id="add_product" class="btn btn-dark">Add Product <i class="fas fa-plus-square"></i></button>
</div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
<!-- Product Details -->
<div class="product-item" data-item="1">
<span>#1</span>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Category</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Code</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Partnumber</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Brand</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Quantities</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">Location</label>
<div class="col-sm-2">
<input class="form-control location-ctrl-1 location-ctrl" data-item="1" type="text" name="products[0]loc_name" list="locations" value="">
<input type="hidden" class="location_id-1" name="products[0]location_id" value="">
<input type="hidden" class="loc_desc-1" name="products[0]loc_desc" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Description</label>
<div class="col-sm-8">
<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">Serial Number(s)</label>
<div class="col-sm-5">
<input class="form-control enable-1 serial-1" maxlength="25" placeholder="Key in Serial Number and hit button Key In" disabled>
</div>
<div class="col-sm-5">
<button class="btn btn-dark enable-1 keyin-ctrl-1 keyin-ctrl" data-item="1" type="button" disabled>Key In</button>
<button class="btn btn-dark enable-1 undo-ctrl-1 undo-ctrl" data-item="1" type="button" disabled>Del</button>
<input class="form-check-input ml-4 mt-2 pointer enable-serial-1 enable-serial" data-item="1" id="checkbox-1" type="checkbox">
<label class="form-check-label ml-5 pointer" for="checkbox-1">tick to enable serialnumber</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-5">
<textarea class="form-control display-1" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>
<hr>
</div>
<!-- append start -->
</div>
<datalist id="locations">
<option value="A0001" data-locationid="1" data-locdesc="Cabinet A"></option>
</datalist>
</form>
</main>
I in hope that there some suggestion or way to do it whereby wont have additional value added when keying previous product serial numbers

found my own fix...
added result.val(''); will reset any key in
function ctrlSerial() {
$('.keyin-ctrl').on('click', function() {
var item = $(this).data('item');
var result = $('.serial-' + item).val() + '; \n';
$('.display-' + item).append(result);
$('.serial-' + item).val('').focus();
result.val(''); // added this to also wipe clean properly
});
$('.undo-ctrl').on('click', function() {
var item = $(this).data('item');
$('.display-' + item).html('');
});
}

how to Auto Increment the value in input field (type=text) that is dynamically added on a button click?

I want to have a value in "sr.no." field that is auto incremented every time i click on button that adds new clause.
html:
<div id="clauseDiv">
<div class="col-sm-12">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2" for="clause">Clause: </label>
<div class="col-sm-10">
<input type="text" class="form-control clauseHeader" v-bind:id="'clauseHeader-' + clause.contractGroupId"
name="clause" :key="index" v-bind:value="clause.contractGroupName" readonly="readonly"/>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-sm-2" for="sequence">Sr.no.: </label>
<div class="col-sm-4">
<input type="text" class="form-control clauseSequence" v-bind:id="'clauseSequence-' + clause.contractGroupId" name="sequence"
:key="index" v-bind:value="clause.sequence" />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-1" for="subClause">Subclause: </label>
<div class="col-sm-11">
<div>
<textarea class="form-control subClause" v-bind:id="'subClause-' + clause.contractGroupId"
:key="index" readonly="readonly"></textarea>
</div>
</div>
</div>
</div>
</div>
js:
var clauseHtml = '<div class="col-sm-12" id="clause-'+this.count+'">'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
' <label class="control-label col-sm-2" for="clause">Clause: </label>'+
' <div class="col-sm-10">'+
' <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-'+this.count+'" name="clause" />'+
' </div>'+
' </div>'+
'</div>'+
'<div class="col-sm-4">'+
'<div class="form-group">'+
' <label class="control-label col-sm-2" for="sequence">Sr.no: </label>'+
' <div class="col-sm-4">'+
' <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-'+this.count+'" name="sequence"/>'+
' </div>'+
' </div>'+
' </div>'+
'<div class="col-sm-2">'+
'<div class="form-group">'+
' <button type="button" class="btn btn-danger deleteClause" id="deleteClause-'+this.count+'" v-on:click="deleteClause">Delete</button>'+
' </div>'+
' </div>'+
'<div class="col-sm-12">'+
' <div class="form-group">'+
' <label class="control-label col-sm-1" for="subClause">Subclause: </label>'+
' <div class="col-sm-11">'+
' <textarea class="form-control clauseAddlTermSubClause" id="subClause-'+this.count+'" ></textarea>'+
' </div>'+
' </div>'+
' </div>'+
'</div>';
$('#clauseDiv').append(clauseHtml);
this.count++;
From html, I am adding div which contains 'clause', 'sr.no.' and 'subclause' fields. I have a button, and when clicked on that button the js part gets executed and the div appends and more 'clause', 'sr.no.' and 'subclause' fields are added. I want the newly appended 'sr.no' field to get a value in it that is auto incremented from the previous field. How do I do that?

remove this from this.count and make the count as global variable, add value="' + count +'" to the input and it should be like this
'<input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>'
Demo:
var count = 0;
$('#addClause').on('click', function() {
var clauseHtml = '<div class="col-sm-12" id="clause-' + count + '">' +
'<div class="col-sm-6">' +
'<div class="form-group">' +
' <label class="control-label col-sm-2" for="clause">Clause: </label>' +
' <div class="col-sm-10">' +
' <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-' + count + '" name="clause" />' +
' </div>' +
' </div>' +
'</div>' +
'<div class="col-sm-4">' +
'<div class="form-group">' +
' <label class="control-label col-sm-2" for="sequence">Sr.no: </label>' +
' <div class="col-sm-4">' +
' <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>' +
' </div>' +
' </div>' +
' </div>' +
'<div class="col-sm-2">' +
'<div class="form-group">' +
' <button type="button" class="btn btn-danger deleteClause" id="deleteClause-' + count + '" v-on:click="deleteClause">Delete</button>' +
' </div>' +
' </div>' +
'<div class="col-sm-12">' +
' <div class="form-group">' +
' <label class="control-label col-sm-1" for="subClause">Subclause: </label>' +
' <div class="col-sm-11">' +
' <textarea class="form-control clauseAddlTermSubClause" id="subClause-' + count + '" ></textarea>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
$('#clauseDiv').append(clauseHtml);
count++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addClause">addCaluse</button>
<div id="clauseDiv"></div>

Javascript onClick event just once?

I'm trying to implement a comment system. Now I have a problem regarding JS and an onClick function.
First the code:
<ul class="comments">
<li>
<div class="comment">
<div class="img-thumbnail" style="margin-left: -98px;">
<img class="avatar" alt="" src="img/avatars/noAvatar.jpg" style="width:50px;height:50px;">
</div>
<div class="comment-block-new" style="background-color:#fff;">
<div class="post-leave-comment" style="border:0px; margin:0px; padding:0px;">
<form action="" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<textarea maxlength="500" rows="1" class="form-control" name="comment" id="comment" onClick="expandComment(this,this.form);">Post your comment...</textarea>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</li>
And the functions.js
function expandComment(inputC,formC){
inputC.innerHTML = '';
var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
+ '<div class="form-group">'
+ '<div class="col-md-4">'
+ '<label>Your name</label>'
+ '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
+ '<div class="col-md-12">'
+ '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
+ '</div>'
+ '</div>';
formC.innerHTML = formC.innerHTML + showReplyOptions;
}
Now I want the expand function only to run once. I need to create the expanding dynamically cause of the IDs and an upcoming reply system.
How to do that?
Thank you in advance.

Did you try adding a flag for it?
var bExpandFunctionRunned = false;
function expandComment(inputC,formC){
// it won't run again once the flag is set.
if(bExpandFunctionRunned == false){
bExpandFunctionRunned = true;
inputC.innerHTML = '';
var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
+ '<div class="form-group">'
+ '<div class="col-md-4">'
+ '<label>Your name</label>'
+ '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
+ '<div class="col-md-12">'
+ '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
+ '</div>'
+ '</div>';
formC.innerHTML = formC.innerHTML + showReplyOptions;
}
}

Best way to assign flag value of in element dataSet and when event call, check flag value function, if already call return from top of function, see below code
function expandComment(inputC,formC){
/***return event code****/
if(inputC.dataset.offclickevent === true)
return;
else
inputC.dataset.offclickevent = true;
/****************/
inputC.innerHTML = '';
var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
'<div class="form-group">'
'<div class="col-md-4">'
'<label>Your name</label>'
'<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
'</div>'
'</div>'
'</div>'
'<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
'<div class="col-md-12">'
'<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
'</div>'
'</div>';
formC.innerHTML = formC.innerHTML + showReplyOptions;
}

Categories

Resources