The HTML code the JSON array is populated from:
<table>
<tr>
<td> <label> Did you like this presentation?</label> </td>
<td>
<select id="Q181" onchange="window.parent.addDataFromElement(this[this.selectedIndex])">
<option id="R201" value="R201">Yes</option>
<option id="R202" value="R202">No</option>
</select>
</td>
</tr>
<tr>
<td> <label>Could you please give us your opinion?</label> </td>
<td> <input type="text" id="Q183" onchange="window.parent.addData(this.id,this.value)"/> </td>
</tr>
<tr>
<td> <label id="Q184">Are you satisfied?</label> </td>
<td>
<input type="checkbox" id="R203" value="R203" onclick="window.parent.addDataFromElement(this)">Yes</input><br>
<input type="checkbox" id="R204" value="R204" onclick="window.parent.addDataFromElement(this)">No</input>
</td>
</tr>
<tr>
<td> <label>Give a rating from 1 to 5</label> </td>
<td> <input type="number" max="5" min="1" id="Q185" onchange="window.parent.addDataFromElement(this)"/> </td>
</tr>
</table>
The code that obtains data :
<span class='template' data-template='${context.presentations[0].sequences[6].data[0].value}'></span>
The error message is :
error during template : TypeError: context.presentations[0].sequences[6] is undefined
How do I access the sequences?
Related
I have a table which has two separate checkbox inputs. When selecting the first input there is a cumulative amount which calculates. If you select the second checkbox, the function errors (because of the duplicate input).
Function
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
What I need to do is separate the inputs, maybe using a class. I cant seem to get the syntax, or may be barking up the wrong tree. Something like...
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll ('.input').check:checked,(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
I would add this as an jsfiddle example, but the table is in a Salesforce Visualforce Page, using apex fields.
Thanks in advance
UPDATE
Added HTML
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>
Add class first to first checkbox in <tr> and add class second to second checkbox in <tr>.
updateTotals only query checkbox which has class first to avoid second.
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check.first:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>
In my program I am trying to auto calculate total price when user enter quantity in input box. For that I performed below script. but due to some error my script doesn't working as per expectation and when I enter quantity, total price doesn't get updated. Can anyone tell me what's wrong in my code. I want to perform this script without jquery.
code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="" method="POST" name="myForm" id="myForm">
<table bgcolor="pink" align="center" border="2px">
<tbody>
<tr>
<th> Category </th>
<th> Description </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Total Price</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td> Paneer </td>
<td name="priceQ1"> $10 </td>
<td> <input type="text" size="4" id="q1" name="qty1" onkeyup="calculate()"> </td>
<td> <input type="text" id="total1" name="total1"> </td>
</tr>
<tr>
<td> Rice </td>
<td name="priceQ2"> $30 </td>
<td> <input type="text" size="4" id="q2" name="qty2" onkeyup="calculate()"> </td>
<td> <input type="text" id="total2" name="total2"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total" name="sub_total"> </td>
</tr>
<tr>
<td rowspan="2">2</td>
<td> Chicken Palak </td>
<td name="priceQ3"> $20 </td>
<td> <input type="text" size="4" id="q3" name="qty3" onkeyup="calculate()"> </td>
<td> <input type="text" id="total3" name="total3"> </td>
</tr>
<tr>
<td> Aloo Tikki </td>
<td name="priceQ4 "> $14 </td>
<td> <input type="text" size="4" id="q4" name="qty4" onkeyup="calculate()"> </td>
<td> <input type="text" id="total4" name="total4"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total2" name="sub_total2"> </td>
</tr>
</tbody>
</table>
<p align="center">
<input type="submit" value="Submit">
<input type="reset">
</p>
</form>
<script>
function calculate() {
var f = document.forms['myForm'];
for(var i=0;i<4;i++){
var qty = document.getElementByName('qty'+i);
document.getElementById('total'+i).value = newValue;
}
}
</script>
</body>
</html>
There is no document.getElementsById, you should name your different quantities and total price fields with distinct names and traverse thru them using document.getElementById('qty'+i);
Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.
You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/
$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
I want to add a row to my table to allow to the user to add data which will be inserted then into the data base.
I have imbricated tables (the coed given present just first row to simplify but it’s a long form given as a table).
My first problem is when I add the select to my getElementById it won’t work?
My second problem I don’t know if I can recuperate the fields added by the user and inserted them to my database?
I found the example that I have followed in ( Add table row in jQuery )
<html>
<head>
<script type="text/javascript">
function displayResult() {
document.getElementById("tabsalaire").insertRow(-1).innerHTML = '<td><input name="salaireparstatut4" id="salaireparstatut4" /></td>';
document.getElementById("tabtitulaire").insertRow(-1).innerHTML = '<td><input name="nbtitulaire4" id="nbtitulaire4" /></td>';
document.getElementById("tabfemale").insertRow(-1).innerHTML = '<td><input name="nbfemale4" id="nbfemale4" /></td>';
document.getElementById("tabsommeparstatut").insertRow(-1).innerHTML = '<td><input name="sommeparstatut4" id="sommeparstatut4" /></td>';
document.getElementById("selectstatus").insertRow(-1).innerHTML = '<td><select name="statutselect4" required> < option value = "" > choisir < /option> < option value = "Professeur" > Professeur < /option> < option value = "Assistant" > Assistant < /option> < /select> < input type = "hidden"
name = "EnseignementSuperieur"
value = "EnseignementSuperieur" / > < /td>';
}
</script>
</head>
<body>
<form method="post" action="processform.php">
<table border="1">
<tr>
<th>Add</th>
<th>Salaire annuel</th>
<th>nombre titulaire</th>
<th>Nombre femme</th>
<th>Somme</th>
<th>Statut</th>
<th>Type</th>
</tr>
<td>
<table>
<tr>
<td>
<button type="button" onClick="displayResult()">Insert new row</button>
</td>
</tr>
</table>
</td>
<td>
<table id="tabsalaire">
<tr>
<td>
<input name="salaireparstatut1" id="salaireparstatut1" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut2" id="salaireparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut3" id="salaireparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabtitulaire">
<tr>
<td>
<input name="nbtitulaire1" id="nbtitulaire1" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire2" id="nbtitulaire2" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire3" id="nbtitulaire3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabfemale">
<tr>
<td>
<input name="nbfemale1" id="nbfemale1" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale2" id="nbfemale2" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale3" id="nbfemale3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabsommeparstatut">
<tr>
<td>
<input name="sommeparstatut1" id="sommeparstatut1" /> </td>
</tr>
<tr>
<td>
<input name="sommeparstatut2" id="sommeparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="sommeparstatut3" id="sommeparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="selectstatus">
<tr>
<td>
<select name="statutselect1" required>
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre1" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect2">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre2" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect3">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="ProfesseurConf">ProfesseurConf</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre3" value="EnseignementSuperieur" /> </td>
</tr>
<tr></tr>
</table>
</td>
<th>
EnseignementSuperieur </th>
</tr>
<td> </td>
<td>
<input name="SubSommenbTitulaireTypeCadre" id="SubSommenbTitulaireProfChercheur" />
</td>
<td>
<input name="SubSommenbFemaleTypeCadre" id="SubSommenbFemaleProfChercheur" />
</td>
<td>
<input name="SubSommeNbProfTypeCadre" id="SubSommeNbProfChercheur" />
</td>
<td>
<input name="SubSommeSalaireAnnuelTypeCadre" id="SubSommeSalaireAnnuelProfChercheur" />
</td>
<th>Somme SUB</th>
<tr>
</tr>
<tr>
<td>
<input type="submit" name="Validate" value="Validate" />
</td>
</tr>
</table>
</body>
</html>
I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together
You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons
First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.