Javascript: Print multiple form inputs to a textarea - javascript

I'm very new to javascript but I'm trying to create a simple program that makes formatting sources for the blog I edit very easy. I want the information that users type into the form to be printed out into one textarea. This is what I have so far:
<html>
<head>
<script type="text/javascript">
function writeCode() {
var src1 = document.getElementById('src1').value,
src2 = document.getElementById('src2').value,
src3 = document.getElementById('src3').value,
var lnk1 = document.getElementById('lnk1').value,
lnk2 = document.getElementById('lnk2').value,
lnk3 = document.getElementById('lnk3').value,
outputValue = '<span style="color: #888888; font-size: xx-small;">Sources: </span>' + '<span style="color: #2200fc; font-size: xx-small;">' + src1 + '</span>' + ', ' + '<span style="color: #2200fc; font-size: xx-small;">' + src2 + '</span>'
document.getElementById('outputArea').value = outputValue;
if (src3.length + lnk3.length != 0){
outputValue2 = ', ' + '<span style="color: #2200fc; font-size: xx-small;">' + src3 + '</span>'
document.getElementById('outputArea2').value = outputValue2;
}
else {
document.getElementById('outputArea2').value = ' '
}
console.log(writeCode);
</script>
</head>
<body>
<form name="sources">
Source 1 <input type="text" id="src1"/>
Link 1 <input type="text" id="lnk1"/></br>
Source 2 <input type="text" id="src2"/>
Link 2 <input type="text" id="lnk2"/></br>
Source 3 <input type="text" id="src3"/>
Link 3 <input type="text" id="lnk3"/></br>
<input type="button" value="Write my code!" onclick="writeCode();"/>
<input type="button" value="Cite another article!" onClick="window.location.reload()"/></br>
<textarea style="width:600px;height:100px;" name="outputForm">
<p id="outputArea"></p>
<p id="outputArea2"><p>
<p id="outputArea3"></p>
</textarea>
</form>
</div>
</body>
Now, I got it working with multiple textareas by assigning them each a separate ID. But my goal is to have all the inputs that have been entered print out in one area. I've also tried assigning the ID outputArea to the textarea, and then having them all print out to outputArea, but it returns an error like 'Cannot assign value null.' Any advice on how to go about this?
Thanks!

I've come up with this:
HTML:
<form name="sources">Source 1
<input type="text" id="src1" />Link 1
<input type="text" id="lnk1" />
</br>Source 2
<input type="text" id="src2" />Link 2
<input type="text" id="lnk2" />
</br>Source 3
<input type="text" id="src3" />Link 3
<input type="text" id="lnk3" />
</br>
<input type="button" value="Write my code!" onclick="writeCode();" />
<input type="button" value="Cite another article!" onClick="window.location.reload()" />
</br>
<textarea style="width:600px;height:100px;" name="outputForm" id="outputForm"> </textarea>
</form>
JS:
function writeCode() {
var src1 = document.getElementById('src1').value,
src2 = document.getElementById('src2').value,
src3 = document.getElementById('src3').value,
lnk1 = document.getElementById('lnk1').value,
lnk2 = document.getElementById('lnk2').value,
lnk3 = document.getElementById('lnk3').value,
outputValue = '<span style="color: #888888; font-size: xx-small;">Sources: </span>' + '<span style="color: #2200fc; font-size: xx-small;">' + src1 + '</span>' + ', ' + '<span style="color: #2200fc; font-size: xx-small;">' + src2 + '</span>';
if (src3.length != 0 && lnk3.length != 0) {
outputValue += ', ' + '<span style="color: #2200fc; font-size: xx-small;">' + src3 + '</span>';
}
document.getElementById('outputForm').value = outputValue;
}
You need to be careful with the errors being displayed in the console, there were a few which might not have been crashing the page but definitely causing issues with what you were attempting to do.
Fiddle: http://jsfiddle.net/KyleMuir/kRRBR/1/

Related

How to Remove dynamically added controls in the view

I am adding controls dynamically in the below div when you click a button like this:
<div class="column" id="addkey" style="width: 200px">
</div>
<div class="column" id="main1" style="width: 150px">
</div>
<div class="column" id="docmanindex" style="width: 150px">
</div>
</div>
function AddPrimaryClick() {
var selectedprimarykey = $("#ddlprimarykey :selected").text();
var one = chkkeyId + i;
var two = radioId + i;
var three = chkindxid + i;
$('#addkey').append('<input type="checkbox"' + ' id = ' + one + '/> ' + selectedprimarykey + '<br />' + '<br />');
$('#main1').append('<input type="radio" ' + ' id = ' + two + '/> ' + '<br />' + '<br />');
$('#docmanindex').append('<input type="checkbox" ' + ' id = ' + three + '/> ' + '<br />' + '<br />');
i = i + 1;
};
How do i remove above controls which are checked on a button click event?
You can do it like this:
$("#button").on("click", function() {
$("input:checked").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="radio" name="test" />
<input type="radio" name="test" />
<button id="button">
Remove
</button>
You can loop through all the checked check boxes and checked radio buttons and remove it using jquery remove() function
$("input[type='checkbox']:checked, input[type='radio']:checked").each(function(){
$(this).remove();
});

How to get the Sum of Lowest values in 3 rows each added dynamically

The following code will get the lowest value entered in first 3 columns, it is running fine. But after adding the row (Add Row) i am unable to get the lowest value from next 3 columns. Also i want to get the sum of all 3 lowest values from as much columns as user will add. Your kind help is required in this regard.
$(document).ready(function() {
var i = 1;
$("#Add_BDSP").click(function() {
$('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");
$('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
i++;
});
$("#Delete_BDSP").click(function() {
if (i > 1) {
$("#BDSP" + (i - 1)).html('');
i--;
}
});
});
var input = $('[name="QuotedAmount1[0]"],[name="QuotedAmount2[0]"],[name="QuotedAmount3[0]"]'),
QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),
MulRes = $('[name="ServiceTotalCost"]');
input.change(function() {
var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val());
var Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val());
var Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());
MulRes.val(Math.min(Qoute1, Qoute2, Qoute3));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<table class="table table-bordered table-hover" id="Tab_BDSP">
<thead>
<tr>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr id='BDSP0'>
<td>
<input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
</td>
</tr>
<tr id='BDSP1'></tr>
</tbody>
</table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="col-md-4">
<div class="input-group form-group">
<span class="input-group-addon">
<i class="material-icons">business_center</i>
</span>
<div class="form-line">
<input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
</div>
</div>
</div>
But after adding the row (Add Row) i am unable to get the lowest value
from next 3 columns
Your main problem is:
QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),
Because you just select QuotedAmount1[0] to QuotedAmount3[0], after you append row new input has QuotedAmount1[1] .. , also you used change and for new row you need to use change with document selector, to get live change. And you should move your variable inside of change event. Important things is, you should select your input without name, here is working snippet:
$(document).ready(function() {
var i = 1;
$("#Add_BDSP").click(function() {
$('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");
$('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
i++;
});
$("#Delete_BDSP").click(function() {
if (i > 1) {
$("#BDSP" + (i - 1)).html('');
i--;
}
});
});
$(document).on('change', '#Tab_BDSP tbody tr td input[type="text"]', function() {
let result = 0;
var MulRes = $('input#ServiceTotalCost');
var QuotedAmount1 = $(this).parent().find('input[type="text"]').eq(0),
QuotedAmount2 = $(this).parent().find('input[type="text"]').eq(1),
QuotedAmount3 = $(this).parent().find('input[type="text"]').eq(2);
var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val()),
Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val()),
Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());
var min = Math.min(Qoute1, Qoute2, Qoute3);
$(this).parent().attr('data-lowest', min)
$('#Tab_BDSP tbody tr td').each(function() {
result += +$(this).attr('data-lowest')
});
MulRes.val(result)
});
Thank you for kind response,
the code is running perfect,
but the issue is if i change the value in additional rows,
it adds the lowest into the sum,
e.g. 1st row have 300000 400000 500000 and second row have 600000 700000 800000 The total sum will be 900000 which is perfect. but if i change the value from 600000 to 200000 it should shows 700000 but it gives value of 1100000. Your kind help is needed to rectify this issue in the given code. – ADIL I.T 8 mins ago
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<table class="table table-bordered table-hover" id="Tab_BDSP">
<thead>
<tr>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr id='BDSP0'>
<td>
<input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
</td>
</tr>
<tr id='BDSP1'></tr>
</tbody>
</table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="col-md-4">
<div class="input-group form-group">
<span class="input-group-addon">
<i class="material-icons">business_center</i>
</span>
<div class="form-line">
<input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
</div>
</div>
</div>
Also i want to get the sum of all 3 lowest values from as much columns
as user will add
For get sum you need to get min and also old lowest value
This code works. I just made all of the script run separately so it worked.
$(".input0").keyup(function() {
var val10 = $("[name='a1[0]']").val();
var val20 = $("[name='a2[0]']").val();
var val30 = $("[name='a3[0]']").val();
var lowestValue0 = Math.min(val10, val20, val30);
$("[name='answer[0]']").val(lowestValue0);
$("[name='total']").val(lowestValue0);
});
$(document).keyup(function() {
var sum = "";
$('.inputClass').each(function() {
sum += this.value;
});
$("[name='total']").val(sum);
});
$(document).ready(function() {
var a = "1";
$(".add").click(function() {
$('<div class="valueDiv' + a + '"><input name="a1[' + a + ']" class="input' + a + '" placeholder="Value 1"><input name="a2[' + a + ']" class="input' + a + '" placeholder="Value 2"><input name="a3[' + a + ']" class="input' + a + '" placeholder="Value 3"><br><h5>Lowest Value = <\/h5><input name="answer[' + a + ']" class="inputClass" readonly placeholder="Lowest Value"><hr><\/div>').appendTo("#mainDiv");
$('#scripts').append('<script type="text/javascript" id="script' + a + '">$(".input' + a + '").keyup(function() { var val1' + a + ' = $("[name=\'a1[' + a + ']\']").val(); var val2' + a + ' = $("[name=\'a2[' + a + ']\']").val(); var val3' + a + ' = $("[name=\'a3[' + a + ']\']").val(); var lowestValue' + a + ' = Math.min(val1' + a + ', val2' + a + ', val3' + a + '); $("[name=\'answer[' + a + ']\']").val(lowestValue' + a + '); });<\/script>');
a++;
});
$(".delete").click(function() {
if (a > 1) {
$(".valueDiv" + (a - 1)).remove();
$("script" + (a - 1)).remove();
a--;
}
var sum = "";
$('.inputClass').each(function() {
sum += this.value;
});
$("[name='total']").val(sum);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div id="mainDiv" style="width: 100%; height: 100%; padding: 50px;">
<div class="valueDiv0">
<hr>
<input name="a1[0]" class="input0" placeholder="Value 1">
<input name="a2[0]" class="input0" placeholder="Value 2">
<input name="a3[0]" class="input0" placeholder="Value 3">
<br>
<h5>Lowest Value = </h5>
<input name="answer[0]" class="inputClass" readonly placeholder="Lowest Value">
<hr>
</div>
</div>
<div style="width: 100%; height: 100%; padding: 0px 50px;">
<h5>Sum of All Lowest Values</h5>
<input style="width: 230px;" name="total" readonly placeholder="Total Value of All Lowest Values">
</div>
<div id="scripts">
</div>
<br>
<div>
<button class="btn btn-primary add">Add Row</button>
<button class="btn btn-danger delete">Delete Row</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Dynamic append DIV and calculate data inside the div using class name in JQuery

I want to create a div to add the input field using the class name and display the value, and also create a button to add more field that has the same class as above, but only the first field can be used to add the input, I know how I tried is incorrect. I don't want to use ID, increase ID or related to ID. It may be better to increase the class name also but is there any way to keep the same class name and function working. Thanks in advance
Edited: My question part and my snippet part is not same for better understanding.
function addMoreSchedule8WDV() {
// alert('yeah');
$("#sch8_wdv").append('<div style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-2">' +
'<label for="assetName">Name</label><br>' +
'<input type="text" id="assetName" class="form-control">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDOP">DOP</label><br>' +
'<input type="date" id="assetDOP" class="form-control date_of_purchase">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetOC">OC</label><br>' +
'<input type="number" min="0" id="assetOC" class="form-control originalCost">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetWDV">WDV</label><br>' +
'<input type="number" min="0" id="assetWDV" class="form-control assWDV">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetADD">ADD</label><br>' +
'<input type="number" min="0" id="assetADD" class="form-control addition">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetEUL">EUL</label><br>' +
'<input type="number" min="0" id="assetEUL" class="form-control no_of_year">' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-12" style="padding-bottom: 10px;">' +
'<div class="row">' +
'<div class="col-md-2">' +
'<label for="assetBDA">BDA</label><br>' +
'<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDays">Day Used</label><br>' +
'<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetRateofDep">Rate of Dep.</label><br>' +
'<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDepAmount">Dep. Amount</label><br>' +
'<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetNetBlock">Net Block</label><br>' +
'<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="removeWDV">Remove</label><br>' +
'Remove Content' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$("#sch8_wdv").on("click", ".removeSch8", function() {
$(this).parent().parent().parent().parent().remove();
});
}
// trigger for Fixed Assets WDV
$(document).on('change', '#yearEnd, .date_of_purchase, .no_of_year, .addition, .originalCost, .assWDV', function() {
calculateWDVFixedAssets();
});
// end triggered
function calculateWDVFixedAssets() {
var current_year_input = $("#yearEnd").val()
var current_year = new Date(current_year_input + '-03-31');
var last_year = current_year_input - 1;
var last_year_correct = new Date(last_year + '-04-01');
var date_of_purchase = new Date($(".date_of_purchase").val());
var no_of_year = $('.no_of_year').val();
var original_cost = $('.originalCost').val();
var addition = $('.addition').val();
var wdv = $('.assWDV').val();
var bda, dayUsed;
if (last_year_correct < date_of_purchase) {
$(".originalCost").prop('disabled', true);
} else {
$(".originalCost").prop('disabled', false);
}
// below code is for calculate Day Used
if (date_of_purchase != '') {
if (date_of_purchase < last_year_correct) {
dayUsed = 365;
$(".dayUsed").val(dayUsed);
} else if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
dayUsed = Math.round(Math.abs((current_year.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
$(".dayUsed").val(dayUsed);
} else {
$(".dayUsed").val('');
$(".originalCost").val('');
console.log('error');
}
}
// below is for calculate BDA
if (no_of_year != '') {
if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
bda = (no_of_year * 365);
$(".bdaValue").val(bda);
} else if (date_of_purchase < last_year_correct) {
var bda2 = (no_of_year * 365);
var year_minus = Math.round(Math.abs((last_year_correct.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
var total = (+bda2 - +year_minus);
$('.bdaValue').val(total + 1);
} else {
$(".originalCost").val('');
console.log('error');
}
}
// rate of depreciation
if (original_cost != '' || addition != '' || wdv != '') {
var bdaPass = $('.bdaValue').val();
var s = ((+original_cost + +addition) * (5 / 100));
var c = (+wdv + +addition);
var n = (bdaPass / 365);
var xy = (s / c);
var yz = (1 / n);
var power = Math.pow(xy, yz);
var power_new = parseFloat(power.toFixed(2));
var new_total = (1 - +power) * 100;
$('.rateOfDep').val(parseFloat(new_total.toFixed(4)));
// rate of depreciation
var rate_of_dep = $('.rateOfDep').val();
var f_rod = ((+wdv + +addition) * (rate_of_dep / 100));
var day_used_rod = $(".dayUsed").val();
var s_rod = (day_used_rod / 365);
var total_rod = (f_rod * s_rod);
var round_total = Math.round(total_rod);
$('.depAmount').val(round_total);
// net block
var f_netBlock = (+wdv + +addition);
var dep_net = $('.depAmount').val();
var net_block = (+f_netBlock - +dep_net);
$('.netBlock').val(parseFloat(net_block.toFixed(2)));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<p> Try inserting Year Ended = 2018, Name = Test, DOP = 1st April, 2010, OC = 1250000, wdv = 686931, add = null(no need to enter), eul = 15 then it will give the output bda=2919, day used = 365, rate of dep = 25.8986, dep amt = 177906, net block = 509025..</p>
<p>Ignore the console error</p>
<div class="form-group">
<label for="yearEnd">Year Ended in</label>
<input type="number" min="0" name="yearEnded" id="yearEnd" class="form-control" placeholder="Eg:- 2001" required>
</div>
<div style="border-style: dotted; border-radius: 10px; border-width: thin;">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<label for="assetName">Name</label><br>
<input type="text" id="assetName" class="form-control">
</div>
<div class="col-md-2">
<label for="assetDOP">DOP</label><br>
<input type="date" id="assetDOP" class="form-control date_of_purchase">
</div>
<div class="col-md-2">
<label for="assetOC">OC</label><br>
<input type="number" min="0" id="assetOC" class="form-control originalCost">
</div>
<div class="col-md-2">
<label for="assetWDV">WDV</label><br>
<input type="number" min="0" id="assetWDV" class="form-control assWDV">
</div>
<div class="col-md-2">
<label for="assetADD">ADD</label><br>
<input type="number" min="0" id="assetADD" class="form-control addition">
</div>
<div class="col-md-2">
<label for="assetEUL">EUL</label><br>
<input type="number" min="0" id="assetEUL" class="form-control no_of_year">
</div>
</div>
</div>
<div class="col-md-12" style="padding-bottom: 10px;">
<div class="row">
<div class="col-md-2">
<label for="assetBDA">BDA</label><br>
<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">
</div>
<div class="col-md-2">
<label for="assetDays">Day Used</label><br>
<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">
</div>
<div class="col-md-2">
<label for="assetRateofDep">Rate of Dep.</label><br>
<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">
</div>
<div class="col-md-2">
<label for="assetDepAmount">Dep. Amount</label><br>
<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">
</div>
<div class="col-md-2">
<label for="assetNetBlock">Net Block</label><br>
<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">
</div>
</div>
</div>
</div>
<div id="sch8_wdv"></div>
Add More
Working fiddle.
You could attach the input event to both inputs at the same time as:
$(document).on('input', '.first_no, .second_no', function() {
var parent = $(this).parent();
var first_no = parent.find('.first_no').val();
var second_no = parent.find('.second_no').val();
var total = parent.find('.total');
if (!isNaN(first_no) && !isNaN(second_no)) {
total.val(+first_no + +second_no);
}
});
function addMoreField() {
$('#expanded').append(
'<div><br>' +
'<input type="number" class="first_no">' +
' plus ' +
'<input type="number" class="second_no">' +
' is equal ' +
'<input type="number" class="total">' +
'</div>'
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="number" class="first_no"> plus
<input type="number" class="second_no"> is equal
<input type="number" class="total">
</div>
<div id="expanded"></div>
<br>
<button onclick="addMoreField()">Add More</button>
Made a bit shorter version.
$(document).on('input', '.a, .b, .c', function() {
var i = $(this).parent().find('input');
i[2].value = parseInt(i[0].value) + parseInt(i[1].value);
});
$('#add').on('click', function() {
$('.main').append('\
<div class="computation">\
<input type="number" class="a"> + \
<input type="number" class="b"> = \
<input type="number" class="c">\
</div>\
');
});
.computation {
padding: 15px;
padding-bottom: 0;
}
button {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="computation">
<input type="number" class="a"> +
<input type="number" class="b"> =
<input type="number" class="c">
</div>
</div>
<button id="add">Add more</button>
var addFields = function() {
var container = $(".dynamic-section");
var newFields = $(".row:first").clone();
$(newFields).find("input").val("");
container.append(newFields);
};
var add = function(num1, num2) {
num1 = (num1.length > 0 && !isNaN(num1)) ? parseInt(num1) : 0;
num2 = (num2.length > 0 && !isNaN(num2)) ? parseInt(num2) : 0;
return num1 + num2;
}
$(document).on("keyup", ".first,.second", function(e) {
var currentRow = $(e.target.parentElement);
var first = currentRow.find(".first").val();
var second = currentRow.find(".second").val();
var result = currentRow.find(".result");
result.val(add(first, second));
});
body {
padding: 10px;
}
.row {
padding: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" >
<input type="number" class="first" placeholder="first"/> +
<input type="number" class="second" placeholder="second"/> =
<input type="number" class="result" placeholder="result"/>
</div>
<div class="dynamic-section"></div>
<button type="button" name="addFields" onclick="addFields()">Add fields</button>

Javascript DIV not updating on change

I am attempting to make a page where the usere can chose between two products and enter some text in two fields which will append on the end of a link. My page works If I enter the text first and then chose the option however if I select the product option first the text doesn't append and if I try to update the text in the fields once the link is shown, it remains the same. I'm a bit of a beginner to JavaScript so any suggestions as to where I am going wrong would be greatly appreciated?
<html>
<head>
<script type="text/javascript">
function productChange(product) {
var val = product.value
var idTag = document.getElementById("idTag");
var trackingTag = document.getElementById("trackingTag");
if (val == 'Movies') {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag.value + '&omniture=' + trackingTag.value;
} else {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag.value + '&omniture=' + trackingTag.value;
}
}
</script>
</head>
<body>
Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange(this)' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange(this)' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
</body>
</html>
In your method, when onChange event occurs for input text, then val is undefined, because you are not passing anything, so in productChange() method, you can get radio button values directly, I have made some changes in your code, please check fiddle -
HTML -
Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange()' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange()' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
Javascript -
function productChange() {
var val = document.querySelector('input[type="radio"][name="ProductRadio"]:checked').value;
var idTag = document.getElementById("idTag").value;
var trackingTag = document.getElementById("trackingTag").value;
if (val == 'Movies' && idTag && trackingTag) {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag + '&omniture=' + trackingTag;
} else if(val=='Entertainment' && idTag && trackingTag){
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag + '&omniture=' + trackingTag;
}
}
Now, if radio button is selected and both inputs have some value then only link will be shown
Hey the above code is working , but you to also set one condition to check atleast one radio button then fill the input values else on direct filling those input text fields it is giving error.
So one radio button needs to be checked.
<html>
<head>
<script type="text/javascript">
function productChange(product) {
var val = document.querySelector('input[type="radio"][name="ProductRadio"]:checked').value;
var idTag = document.getElementById("idTag");
var trackingTag = document.getElementById("trackingTag");
if (val == 'Movies') {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag.value + '&omniture=' + trackingTag.value;
} else {
document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag.value + '&omniture=' + trackingTag.value;
}
}
</script>
</head>
<body>
Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange(this)' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange(this)' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
</body>
</html>
You need to pass value while calling productChange function.

Javascript function: dynamically created div layout issue

http://jsfiddle.net/3Sd4W/
Reference: The above js fiddle provided by greener.
If the new Entry Button is clicked, there is an layout issue for that new added object.
The text box style is:
file.setAttribute("style", "margin-top: 60px;");
But I want the text box to be in the middle and not at the bottom. I tried myself but it doesn't works for me. Anybody could help me to solve this problem?
Your code is extremely complicated to read, so this may help:
HTML:
<form name="addpoll">
<div id="choices">
</div>
<input id="addchoice" type="button" value="Add New Entry">
</form>
JS:
function addnewDiv(counterAppended) {
counterAppended = parseInt(counterAppended) + 1;
var text = document.createElement("div");
text.innerHTML = '<input type="hidden" class="choicecount" name="choicecount" id="choicecount" value="' + counterAppended + '">\
<input type="file" name="choiceimg' + counterAppended + '" value ="Select" onchange="readURL(this)" style="display:none;">\
<div>\
<div style="width:400px;height:85px;">\
<div id="imgbg" style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;">\
<input type="button" onclick="HandFileButtonClick();" value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">\
</div>\
<div style="float:right;margin-top: 30px;">\
<input type=text name="choicename' + counterAppended + '" id="firstremove2">\
<input type="button" value="Remove" class="remove" id="firstremove3" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">\
</div>\
</div>\
<img src="#" name="viewimg' + counterAppended + '" class="addmultiple" id="viewimg' + counterAppended + '" height="70px" width="85px" style="display:none"/>\
<br>\
</div>\
<span id="file"></span>';
text.id = 'choice' + counterAppended;
document.getElementById("choices").appendChild(text);
document.getElementsByClassName("remove")[document.getElementsByClassName("remove").length - 1].addEventListener("click", function() {
this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);
});
}
function HandFileButtonClick() {
document.addpoll.choiceimg1.click();
}
function HandleFileButtonClick(val) {
var ss = val.name;
document.forms["addpoll"]
var n = ss.split("choiceimgs");
document.forms["addpoll"]["choiceimg" + n[1]].click();
}
document.getElementById("addchoice").addEventListener("click", function() {
var choicecounts = document.getElementsByClassName('choicecount');
addnewDiv(choicecounts[choicecounts.length - 1].value);
});
addnewDiv(0);
JsFiddle: http://jsfiddle.net/99vhF/1/
The first row uses a wrapper div for the input field with a style attribute containing float: right. The generated row (after clicking 'add new entry' button) does not have a div wrapper with the same attribute around the input.
You add elements to incorrect nodes. Review you "add" part. All of variables take "file" element. It looks odd:
var addfile = document.getElementById("file");
var view = document.getElementById("file");
var remove1 = document.getElementById("file");
var br2 = document.getElementById("file");
var textf1 = document.getElementById("file");
var myimgdiv = document.getElementById("file");

Categories