We Keep Coding

Dynamically appended text field value not geting printed through id in javascript

it is working for first row and after adding second row it is not running please help me to resolve the issue
i Want to use dynamically added text field value in java script
Form
<tr>
<td>
<select required id="itemname-1" name="itemname[]" class="form-control" onchange='showUser(this)'>
<option selected="true" disabled="disabled">Select Item Code</option>
</select>;</td>
<td>
<input type="text" class="form-control col-xs-2" id="quantity-1" placeholder="Quantity" name="quantity[]" style='float:left' onchange="getdetails(this);">
<p id="parameterr-1" style='float:left'></p><input type="hidden" name='parameter[]' id='parameter-1'>
</td>
<td>
<input type="text" class="form-control col-xs-2" id="bp-1" placeholder="Basic Price" name="price[]" onchange="getdetails(this);">
</td>
<td>
<input type="text" class="form-control col-xs-2" id="gst-1" placeholder="GST" name="gst[]" readonly='readonly'>
</td>
<td>
<input type="text" class="form-control col-xs-2" id="tbp-1" placeholder="Total Basic Price" name="tbp[]" readonly='readonly'>
</td>
<td>
<input type="text" class="form-control col-xs-2" id="tgst-1" placeholder="Total GST" name="tgst[]" readonly='readonly'>
</td>
<td>
<input type="text" diasabled class="form-control col-xs-2" id="tot-1" placeholder="Total" name="grand[]" readonly='readonly'>
</td>
<td>
<a href="javascript:void(0);" id="addCF">
<button class="btn-primary btn">Add</button>
</a>
</td>
</tr>
Add Button
<td>
<a href="javascript:void(0);" id="addCF">
<button class="btn-primary btn">Add</button>
</a>
</td>
ADD Form Script
var i = 2;
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append("<tr><td><select required id='itemname-" + i + "' name='itemname[]' class='form-control' onchange='showUser(this);'><option value=''>Select Item Code</option><?php $q='SELECT * FROM items where category="
Raw Material "';$res=mysqli_query($con,$q);while($row=mysqli_fetch_assoc($res)) {echo " < option value = '". $row['
itemid ']."' > " .$row['item_code'] ." < /option>" ;}echo "</select > " ;?></td><td><input type='text' class='form-control col-xs-2' id='quantity-" + i + "' placeholder='Quantity' name='quantity[]' value='0' onchange='getdetails(this);'><p id='parameterr-" + i + "' style='float:left'></p><input type='hidden'name='parameter[]' id='parameter-" + i + "'></td><td><input type='text' class='form-control col-xs-2' id='bp-" + i + " ' placeholder='Basic Price' value='0' name='price[]' onchange='getdetails(this);'></td><td><input type='text' class='form-control col-xs-2' id='gst-" + i + "' placeholder='GST' readonly='readonly' name='gst[]' onblur='tax()'></td><td><input type='text' class='form-control col-xs-2' id='tbp-" + i + "' readonly='readonly' placeholder='Total Basic Price' name='tbp[]'></td><td><input type='text' class='form-control col-xs-2' id='tgst-" + i + "' placeholder='Total GST' name='tgst[]' readonly='readonly'></td><td><input type='text' readonly='readonly' class='form-control col-xs-2' id='tot-" + i + "' placeholder='Total' name='grand[]'></td><td><a href='javascript:void(0);'' id='remCF'><button class='btn-default btn'>Remove</button></a></td></tr>");
i++;
});
$("#customFields").on('click', '#remCF', function() {
$(this).parent().parent().remove();
});
});
I am facing issue while running this function
function getdetails(str) {
var name = str.id;
var res = name.split("-");
var b = res[1];
var qtyid = "quantity-" + b;
var priceid = "bp-" + b;
var tbpid = "tbp-" + b;
var tgstid = "tgst-" + b;
var gstid = "gst-" + b;
var totid = "tot-" + b;
alert(priceid);
var qty = document.getElementById(qtyid).value;
var price = document.getElementById(priceid).value;
var gst = document.getElementById(gstid).value;
if (qty == 0) {
alert("Please Enter Quantity");
} else if (price == 0) {
alert("Please Enter Price");
} else if (price == 0) {
alert("Please Enter Price");
} else if (gst == 0) {
alert("Please Select Item to place purchase Id");
} else {
document.getElementById(tbpid).value = qty * price;
var tbp = document.getElementById(tbpid).value;
var gst = document.getElementById(gstid).value;
document.getElementById(tgstid).value = tbp * (gst / 100);
var tgst = document.getElementById(tgstid).value;
document.getElementById(totid).value = tgst + tbp;
}
}
it is working for first row and after adding second row it is not running please help me to resolve the issue
i Want to use dynamically added text field value in java script

Please check the append string again. Easy solution is to replace :
THIS
$("#customFields").append("<tr><td><select required id='itemname-" + i + "' name='itemname[]' class='form-control' onchange='showUser(this);'><option value=''>Select Item Code</option><?php $q='SELECT * FROM items where category="
Raw Material "';$res=mysqli_query($con,$q);while($row=mysqli_fetch_assoc($res)) {echo " < option value = '". $row['
itemid ']."' > " .$row['item_code'] ." < /option>" ;}echo "</select > " ;?></td><td><input type='text' class='form-control col-xs-2' id='quantity-" + i + "' placeholder='Quantity' name='quantity[]' value='0' onchange='getdetails(this);'><p id='parameterr-" + i + "' style='float:left'></p><input type='hidden'name='parameter[]' id='parameter-" + i + "'></td><td><input type='text' class='form-control col-xs-2' id='bp-" + i + " ' placeholder='Basic Price' value='0' name='price[]' onchange='getdetails(this);'></td><td><input type='text' class='form-control col-xs-2' id='gst-" + i + "' placeholder='GST' readonly='readonly' name='gst[]' onblur='tax()'></td><td><input type='text' class='form-control col-xs-2' id='tbp-" + i + "' readonly='readonly' placeholder='Total Basic Price' name='tbp[]'></td><td><input type='text' class='form-control col-xs-2' id='tgst-" + i + "' placeholder='Total GST' name='tgst[]' readonly='readonly'></td><td><input type='text' readonly='readonly' class='form-control col-xs-2' id='tot-" + i + "' placeholder='Total' name='grand[]'></td><td><a href='javascript:void(0);'' id='remCF'><button class='btn-default btn'>Remove</button></a></td></tr>");
WITH
$("#customFields").append(`<tr><td><select required id='itemname-" + i + "' name='itemname[]' class='form-control' onchange='showUser(this);'><option value=''>Select Item Code</option><?php $q='SELECT * FROM items where category="
Raw Material "';$res=mysqli_query($con,$q);while($row=mysqli_fetch_assoc($res)) {echo " < option value = '". $row['
itemid ']."' > " .$row['item_code'] ." < /option>" ;}echo "</select > " ;?></td><td><input type='text' class='form-control col-xs-2' id='quantity-" + i + "' placeholder='Quantity' name='quantity[]' value='0' onchange='getdetails(this);'><p id='parameterr-" + i + "' style='float:left'></p><input type='hidden'name='parameter[]' id='parameter-" + i + "'></td><td><input type='text' class='form-control col-xs-2' id='bp-" + i + " ' placeholder='Basic Price' value='0' name='price[]' onchange='getdetails(this);'></td><td><input type='text' class='form-control col-xs-2' id='gst-" + i + "' placeholder='GST' readonly='readonly' name='gst[]' onblur='tax()'></td><td><input type='text' class='form-control col-xs-2' id='tbp-" + i + "' readonly='readonly' placeholder='Total Basic Price' name='tbp[]'></td><td><input type='text' class='form-control col-xs-2' id='tgst-" + i + "' placeholder='Total GST' name='tgst[]' readonly='readonly'></td><td><input type='text' readonly='readonly' class='form-control col-xs-2' id='tot-" + i + "' placeholder='Total' name='grand[]'></td><td><a href='javascript:void(0);'' id='remCF'><button class='btn-default btn'>Remove</button></a></td></tr>`);

Uncaught TypeError: Cannot read property 'value' of null at value change

DEMO PictureI am making a dynamic add row and dynamic selectbox option with using increment 'x' and 'i' value in two javascript function as the code below.Is working when select to option 0.5 but when change it to 1 it come out Uncaught TypeError: Cannot read property 'value' of null.Error Message
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control' id='slct" + x + "' name='Branch' onchange='change();'><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
var i = 0;
function change() {
i++;
var select = document.getElementById("slct" + i);
var divv = document.getElementById("container" + i);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="div">
<button onclick="appendRow()" value="Add Row">Add row</button>

I found out what went wrong. in your function called change() you are incrementing i. It increments every time you run it. This results into references to an id that does not exist, resulting in the error you got.
I made up a solution where you enter the relevant referential number in your function. just retrieve the number before you run the function. In this case after you made a change.
You should be able to figure it out from here. I also entered some comments in the code explaining the changes.
JS-Fiddle
html
<div id="div">
<button value="Add Row" id="button">Add row</button>
</div>
js/jQuery
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
// I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
function changeIt(rowIndex) {
//i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
var select = document.getElementById("slct" + rowIndex);
var divv = document.getElementById("container" + rowIndex);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
$("#button").click(function(){
appendRow();
});
$("#div").on("change",".input", function(){
//EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
changeIt(rowIndex);
});

Put your 'return' outside of your if and before your final closing bracket.
if (value== 1) {
toAppend = "";
divv.innerHTML = toAppend;
}
return;

Vue.js dynamically appending HTML when clicking on a button

So basically what I am trying to achieve is allowing the user to be able to add to an existing set of information that will be passed on to Vue from JSON.
So the following code is my HTML code which comprises of the div element with the id objectiveArea that vue will render to and a hard coded button for the users to add more entries.
<div class="form-group" id="objectiveArea"></div>
<div><input type="button" value="Add Objective" id="addButton" /></div>
And here is my Javascript where I pass the JSON into vue for it to render as well as having an onclick event when the add button is triggered. The function addNewObjectiveRow serves as a template to append when the user clicks add and the objectiveElements is a template for vue to render the existing JSON to the HTML.
function addNewObjectiveRow(value) {
var $divElements = "<div class='row'>"
+ "<div class='form-inline'>"
+ "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' /></div></div>"
+ " "
+ "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
+ " "
+ "<div class='form-group'><label class='control-label'></label><div><input type='button' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
+ "</div>"
+ "<br />"
+ "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...'></textarea></div></div><hr />"
+ "</div>"
return $divElements;
}
var objectiveElements = "<div class='row'><div v-for='(objective, index) in objectivesData'>"
+ "<div class='form-inline'>"
+ "<br /><div class='form-group'><label class='control-label'>Title</label><div class=''><input type='text' class='form-control objectivetitle' placeholder='Title' v-model='decodeData(objective.Title)' /></div></div>"
+ " "
+ "<div class='form-group input-group'><label class='control-label'>Target Completion Date</label><div class=''><input readonly type='text' class='form-control targetdateinput' placeholder='Select Date' v-formatdate='objective.TargetDate' /><span class='input-group-addon'><i class='glyphicon glyphicon-calendar'></i></span></div></div>"
+ " "
+ "<div class='form-group'><label class='control-label'></label><div><input type='button' v-if='(index > 0)' value='Remove Goal' class='btn-remove btn-danger deleteButton' /></div></div>"
+ "</div>"
+ "<br />"
+ "<div class='form-group'><label class='control-label'> Details</label><div><textarea class='form-control text-area-width goaldetails' rows='4' placeholder='Enter details here...' v-model='decodeData(objective.Details)'></textarea></div></div><hr />"
+ "</div></div>";
var data = JSON.parse('[{"Title":"Title One","TargetDate":"21 June 2017","Details":"Details One"},{"Title":"Title Two","TargetDate":"22 June 2017","Details":"Details Two"}]');
var Objectives = Vue.extend({
template: objectiveElements,
data: function () {
return {
objectivesData: data
}
}
})
new Objectives().$mount('#objectiveArea');
$('#addButton').on('click', function () {
$('#objectiveArea').append(addNewObjectiveRow(""));
});//end addButton on click
However, the above code renders the existing information from the JSON just fine in the HTML but when I click on the add button, nothing happens at all. Am I missing something or getting it all wrong?

https://v2.vuejs.org/v2/guide/list.html
HTML
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<button #click="addItem()">Add new item</button>
JS
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
methods: {
addItem(){
this.items.push({message: 'new message'})
}
}
})
Clicking the button will execute addItem() method which will add a new item into data items and it will automatically render new li

there are many mistakes
the function addNewObjectiveRow(value)you don't use the parameter value.
Vue is data-driven, you should change the objectivesData, not simply append the string. Read the document

Function doesn't work in Javascript (increase/decrease button)

I want to make increase/decrease button work when I click the button. I put the section in JavaScript(using as part of a function to insert into HTML file), but it doesn't work. The code in JavaScript is as below:
string ="<img class='minubtn' src='images/delete.png' onclick='javascript:
document.getElementById('countNo1').value--;' />"+
"<input type='text' id='countNo1' class='txtCount' value='0' placeholder='0'/>"+
"<img class='addbtn' src='images/add.png' onclick='javascript:
document.getElementById('countNo1').value++;'/>"
I find the reason why it's not working. In nested string, I need to use \' \' instead of '' to quote the id. So the code should like this:
string ="<img class='minubtn' src='images/delete.png' onclick='javascript:
document.getElementById(\'countNo1\').value--;' />"+
"<input type='text' id='countNo1' class='txtCount' value='0' placeholder='0'/>"+
"<img class='addbtn' src='images/add.png' onclick='javascript:
document.getElementById(\'countNo1\').value++;'/>"

Here:
This might help you
HTML:
<input type="text" name="count" value="0" id="count">
<input type="button" value="+1" onclick="operate('add')">
<input type="button" value="-1" onclick="operate('dec')">
Script:
<script>
function operate(val){
if(val == "add"){
var val = document.getElementById('count').value;
val++;
document.getElementById('count').value = val;
} else{
var val = document.getElementById('count').value;
val--;
document.getElementById('count').value = val;
}
}
</script>

How to put html into js loop

Today I need help about How can I do a loop with html code and put the (i) value on the input name:
<label>
<input type='radio' class='parts' value='5' /> 5
</label>
<script>
$(function(){
jQuery('.parts').on('click', function(){
var html = '';
for(i=1; i <= $(this).val(); i++ ){
html += "<input type='text' name='cars[i]' /> car number i";
}
$('#result').html(html);
});
});
</script>
<div id='result'></div>
If you dont undertand pls ask.

You can use string concatenation:
html += "<input type='text' name='cars[" + i + "]' /> car number " + i;
$(function(){
jQuery('.parts').on('click', function(){
var html = '';
for(i=1; i <= $(this).val(); i++ ){
html += "<input type='text' name='cars[" + i + "]' /> car number " + i + "<br>";
}
$('#result').html(html);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type='radio' class='parts' value='5' /> 5
</label>
<div id='result'></div>