adding and removing divs dynamically with jquery - javascript

Hi guys I've got stuck with this. The add works fine the removing is not working. I can alert the figures but the selection is not work. I have just added the remove function.
this i have modified it and it works thanks
<script>
$(function () {
// Handler for .ready() called.
lastPassengerID = $('.passengersInsert').children().last().attr('class');
});
//addPassenger();
// A $( document ).ready() block.
function addPassenger() {
var passengers = $('.passengersInsert').children().length;
if (passengers > 1) {
//var lastPassengerID = $('.passengersInsert').children().last().attr('class');
//var id = $('.passengersInsert').children().attr('id');
lastPassengerID = parseInt(lastPassengerID.replace('P', ''));
} else {
lastPassengerID = 0;
}
if (passengers === 0) {
//alert('passengers' + passengers);
$(".checkbox1").remove();
}
var seqNo = passengers + 1;
if (seqNo > 1) {
var defaultText = "PASSENGER NO " + seqNo + "";
} else {
defaultText = "LEAD PASSENGER";
}
//alert('last ID' + lastPassengerID);
var template = '<div class="P' + seqNo + '"><div id="' + seqNo + '" class="panel panel-default"><div class="panel-heading">' + defaultText + '<div class="col-xs-2 row pull-right" id="addRemove"><input id="neg" class="col-xs-5 pull-left" type="button" value="-" onclick="removePassenger('+ seqNo +')"> <input id="pos" class="col-xs-5" type="button" value="+" onclick="addPassenger()"></div></div><br/><div class="row">';
template += '<div id="C' + seqNo + '" class="col-xs-12" style="/*border:1px solid blue;*/"><div class="col-xs-12" style="/*border: 1px solid green;*/">';
template += '<div class="row"><em><h5 class="col-xs-12" >Contact Details</h5></em></div><br/></div>';
template += '<div class="col-xs-12"><div class="col-sm-6 col-xs-12 pull-left" style="/*border: 1px solid red;*/"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span><input type="text" class="form-control" placeholder="First Name" name="FName' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12 pull-right"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span><input type="text" class="form-control" placeholder="Last Name" name="SName' + seqNo + '"></div></div> </div><div class=" col-xs-12">';
template += '<div class="row"><div id="C' + seqNo + '" class=" col-xs-12"><div class="col-xs-12"><div class="row"><em><h5 class="col-xs-12">Address</h5></em></div><div class="checkbox' + seqNo + '"><label class="row col-xs-12 "><input type="checkbox" class="checkbox' + seqNo + ' col-xs-1" name="PAddress' + seqNo + '" id="PAddress' + seqNo + '" value=""> Same as Lead Passenger </label></div></div></div></div>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12 pull-left"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="number" class="form-control" placeholder="Door No." name="DoorNumber' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Street Name" name="Road' + seqNo + '"></div></div></div></div><br/>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Town /City" name="Town' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Post Code /Zip Code" name="PostCode' + seqNo + '"></div></div></div></div><br/>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="County/State" name="County' + seqNo + '"></div></div><div class="col-sm-6 col-xs-12">';
template += '<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span><input type="text" class="form-control" placeholder="Country" name="Country' + seqNo + '"></div></div></div></div><br/>';
template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span><input type="text" class="form-control" placeholder="Contact No" name="Tel' + seqNo + '"></div></div>';
template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Email" name="Email' + seqNo + '"></div></div></div></div><br/></div></div></div></div></div>';
//$('.passengersInsert').append(template);
$(template).appendTo('.passengersInsert');
$(".checkbox1").remove();
$('.P' + seqNo).css('border', '1px solid red');
}
//var id = $('div').attr('id');
function removePassenger(seqNo) {
$('.P' + seqNo).remove(); /*nothing happens*/
$('.P' + seqNo).css('border', '1px solid blue');/*this highlights the '-' buttons margin. instead of the expected element.*/
}
</script>


There are two problems in your code:
1)
The variable lastPassengerID is defined inside the addPassenger function and therefore bound to its scope. The variable is not available outside the addPassenger function and its therefore undefined inside the removePassenger function.
To use it as you intend inside the removePassenger function you need to declare the variable in a scope both functions are part of or simply declare it as a global variable right before you open the addPassenger function.
2)
The first line of your removePassenger function does contain a coding error:
$('P+lastPassengerID+').remove();
should be
$('.P'+lastPassengerID).remove();
so the the contents of lastPassengerID are actually combined with the string "P" which results in a valid selector. Additionally you need to add a dot (.) at the start of the selector to identify the selector as an class selector so it actually matches a class.

Related

Is there a way to remove input elements if the value is null?

I have a problem with my input element, it has a null value. Can I remove the input element instead? and is there any way of it? thank you. Here is a picture of the problem
Can I remove that input text with null values instead?
I am using js and ajax to call those values in my database. Here is my script file
showAllQuestions();
//function to get data
function showAllQuestions(){
$.ajax({
type: 'ajax',
url: '<?php echo base_url() ?>teachers/showQuestions',
async: false,
dataType: 'json',
success: function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html +='<div class="card">'+
'<div class="card-header">'+
'<h4>Multiple Choice</h4>'+
'</div>'+
'<div class="card-body">'+
'<form>'+
'<div class="input-group">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text">Question</span>'+
'</div>'+
'<input type="text" name="question" value="'+data[i].question+'" class="form-control" required>'+
'</div>'+
'<hr>'+
'<div class="input-group input-group-sm mb-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text" id="inputGroup-sizing-sm">Choice 1</span>'+
'</div>'+
'<input type="text" class="form-control" value="'+data[i].choice1+'" name="choice1" aria-describedby="inputGroup-sizing-sm" required>'+
'</div>'+
'<div class="input-group input-group-sm mb-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text" id="inputGroup-sizing-sm">Choice 2</span>'+
'</div>'+
'<input type="text" class="form-control" name="choice2" value="'+data[i].choice2+'" aria-describedby="inputGroup-sizing-sm" required>'+
'</div>'+
'<div class="input-group input-group-sm mb-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text" id="inputGroup-sizing-sm">Choice 3</span>'+
'</div>'+
'<input type="text" class="form-control" name="choice3" value="'+data[i].choice3+'" aria-describedby="inputGroup-sizing-sm" required>'+
'</div>'+
'<div class="input-group input-group-sm mb-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text" id="inputGroup-sizing-sm">Answer Choice</span>'+
'</div>'+
'<input type="text" class="form-control" name="answer" value="'+data[i].answer+'" aria-describedby="inputGroup-sizing-sm" required>'+
'</div>'+
'</form>'+
'</div>'+
'</div>';
}
$('#showdata').html(html);
},
error: function(){
alert('Could not get Data from Database');
}
});
}
And to show, I enclosed it on a div tag
<div id="showdata"></div>

Add a null check where you add the variables to your string. null being a falsy value, you will have an empty value if the variable is null:
'<input type="text" class="form-control" value="'+(data[i].choice1 ? data[i].choice1 : "")+'" name="choice1" aria-describedby="inputGroup-sizing-sm" required>'

Bootstrap Datepicker not working while append using javascript for Dynamic Elements

I'm using bootstrap datepicker on a form element that is appended to a div. after appending into the div it isn't work.
$('#bp').on('click', function(){
$('.wraper').empty();
var data ='<form role="form" method="get" action="" class="has-validation-callback">'+
'<h5 class="center" style="padding-right: 189px;">Serach Booking & Placement Report</h5><br>'+
'<input type="hidden" name="type" id="type" class="col-xs-12 " value="bp" data-validation="required" placeholder="Range From" />'+
'<div class="col-sm-4">\n'+
'<label class="col-sm-4 control-label no-padding-right" for="unit">From </label>'+
'<input type="text" name="range_from" id="range_from" class="datepicker col-xs-12 " value="" data-validation="required" placeholder="Range From" />'+
'</div>'+
'<div class="col-sm-4">'+
'<label class="col-sm-4 control-label no-padding-right" for="unit">To </label>'+
'<input type="text" name="range_to" id="range_to" class="datepicker col-xs-12 " value="" data-validation="required" placeholder="Range to" />'+
'</div>'+
'<div class="col-sm-2">'+
'<label class="col-sm-2 control-label no-padding-right" for="unit"> </label>'+
'<br><button type="submit" class="btn btn-primary btn-sm">'+
'<i class="fa fa-search"></i>'+
'Search'+
'</button>'+
'</div>'+
'</form>';
$('.order-wraper').append(data);
$('.datepicker').datepicker();
});

Initialize your picker like this
$('body').on('focus',".datepicker ", function(){
$(this).datepicker();
});​
See http://api.jquery.com/on/ and especially the section about "delegated events"

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