We Keep Coding

javascript get element by ID within ID

I would like to calculate the total price of the if check box is checked by using JavaScript
I'm not allow to separate the id to 2 section of by adding div
for example.
<form id="bookingForm">
<section id = "checkcost">
<h2>Total cost</h2>
Total <input type="text" name="total" value="$0.00" size="10" readonly />
</section>
</form>
First, i use this method get the id
var frm = document.getElementById('bookingForm')
i m trying to do by using the following code but this is not the correct method
frm.checkcost.total = calculate()
Since the input area to shows the total cost is inside the id="bookingForm", how should i display the total cost once the check box is checked??
ps: here is the link i had try but it didn't work, and now i'm trying other method
onclick in php echo with error invalid unexpected token

If there's only one field named total in the form, you don't need to worry about the section at all:
var frm = document.getElementById('bookingForm');
frm.total = calculate();
or
document.querySelector("#bookingForm [name=total]").value = calculate();
If you have multiple fields named total, then you just use the ID of the section:
document.querySelector("#checkcost [name=total]").value = calculate();
// ----------------------^
document.querySelector finds the first element that matches a given CSS selector. You can use the full power of CSS to find elements in the document. There's also document.querySelectorAll which finds a list of matching elements. Finally, individual elements also have both methods, which look only within those elements. So for instance, we could also do this:
var frm = document.getElementById('bookingForm');
frm.querySelector("#checkcost [name=total]").value = calculate();
(But that's just an example, not a suggestion; it's more round-about than necessary.)

Javascript function in PHP generated Table only works in Row 1

I have a PHP generated table that shows x number of rows based upon the number of product that is expected for that particular order. The idea is that a user can input an order number and the script will validate the input text against what is expected a return a Pass or Fail status.
This works for row 1, but after that it will not validate any of the other rows.
Reading about I am pretty sure it is due to duplicate id's, so i created a auto increment row field in the database to serve as the id. However it is beyond my skill to set the id as the row number and then validate against the order number.
Table Code:
if (sqlsrv_num_rows($getres) > 0) {
echo '<table cellpadding="0" cellspacing="0" class="db-table">';
echo '<tr><th>Row</th><th>Works Order</th><th>Scan</th></tr>';
echo 'T-Clip Scan: <br/>';
echo '<br/>';
while ($add_info = sqlsrv_fetch_array($getres)){
$row = ($add_info['row']);
$worksorder = ($add_info['id']);
print ("<tr> <td/> $row <td/> $worksorder
<td/>
<input id= 'worksorder' value='' />
<p id='TR'></p>
<script>
document.getElementById('worksorder').onblur = function() {myFunction()};
function myFunction() {
var worksorder, test;
worksorder = document.getElementById('worksorder').value;
test = (worksorder == '".$_SESSION["worksorder"]."') ? 'PASS':'FAIL';
document.getElementById('TR').innerHTML = test;
}
</script>
</tr>");
}
Screenshot of issue
Any help it getting it to work for all rows is appreciated,
Thanks

The problem is likely because you're using creating <input id='worksorder'> and using document.getElementById('worksorder') to reference it within a loop.
HTML IDs are supposed to be unique on the page, so getElementById will only ever return a single element, that being the first element in the code that has the named ID.
If you want to do this in a loop, then you need to make sure that the ID for each element you generate is unique. Typically this would be done by adding the row ID to the generated HTML ID.
eg <input id= 'worksorder_{$add_info['id']}'> or similar, and then reference that in the JS code.
Alternatively, use an HTML class instead of an ID, since class names do not need to be unique, and then write your JS code to use document.querySelector() to query by classname instead of getElemenetById(). If you do it that way, then the JS code doesn't need to be in the loop, as it will be run once and apply to all the matching elements in one go.

You don't have to use a separate script for every row. You can create a single script to hande all the rows.
Firstly, provide ids to the <tr> tag and the <input> tag to receive the values and add an onblur listener. You can use the autoincrementing column value for the ids that you get from database.
e.g.
echo "<tr> <td/> $row<td/> $worksorder <td/>
<input id='".$id."' value='' /><p id='TR_'".$id."' onblur='myFunction(this)'></p>";
Also, add the onblur listener and pass the object to myFunction().
Then add a single myFunction() at the end.
<script>
function myFunction(param) {
var worksorder, test, id;
worksorder = param.value;
id = param.id;
console.log("order " +worksorder + ' '+id);
test = (worksorder == '".$_SESSION["worksorder"]."') ? 'PASS':'FAIL';
document.getElementById('TR_'+id).innerHTML = test;
};
</script>
This will handle all the rows for you. I hope it helps you.
Working JS fiddle

You are setting all the input fields with the same id. Html cannot handle same ids. You should either use incremental ids or use classes instead of ids, and adapt the JS function to use parameters, so not to have a JS function in every row. One function is enough and you can call it with the row number as parameter

Can I use jquery .each() to calculate each row in a form?

I am creating a form that will calculate the total of each row of an item.
I have used a piece of javascript already to calculate each row individually but i want to know if i can use .each() to calculate every row with the same classes rather than having a piece of script for each row with a unique ID.
The script should be: (the price in the p element with class "price1")*(value in the input element with class "qty1"). The result needs to go into the input element with the class "total1"
My page is http://www.catering-equipment.co.uk/portal1/
I have created a JSFiddle here --> https://jsfiddle.net/1y7kudtv/4/
$(".qty1").on('keyup', function () {
// alert('pressed')
var total = $(".price1").html() * $(this).val()
$(".total1").val(total);
})
You can see my attempt at the javascript code but it will only work if i use it with unique ID's rather than a class.
Thank you in advance.

Use .closest():
$(this).closest('.itemrow').find('.total1').val(total);
DEMO

Yes, you can do that. Use find to only look for elements in the current selector:
$('.itemrow').each(function() {
var price = $(this).find('.price1').html();
var quantity = $(this).find('.qty1').val();
var total = price * quantity;
$(this).find('.total1').val(total);
});
Also notice that you're dealing with float arithmetics here, so it's better to round the total, to avoid it displaying something like 10.99999999:
var total = (price * quantity).toFixed(2);

dynamically created form depending on <select> does not work

I'm developing a website which must display particular forms for various products depending on the value that the user selects (in <select>) - so a number various forms are created dynamically in a loop by means of a javascript function (buildform() ). The code does not work, e.g. the forms are not created/appended to the wrappers. I narrowed down the problem where i think the problem relates to a different values for the jquery selectors/div-id's (#ecorpproductwrapper"+ecorp_eprodselectid).
When I use (just as a test) #ecorpproductwrapper" (without the variable ecorp_eprodselectid; see also in code below under ALTERNATIVE WORKS) the code works fine, e.g. the forms are built. I checked by means of the console that the ecorpproductwrapper"+ecorp_eprodselectid values are the same for the div-id's and jquery selectors, so I dont understand what goes wrong?
Pls see the simplified code below:
for(var i=0;i<5;i==){
var ecorp_eprodselectid; //will have various values
//function to build form depending on selected value in <select class= eprodtype"+ecorp_eprodselectid >
$(".eprodtype"+ecorp_eprodselectid).focus(function () {
var previous;
// Store the current value on focus and on change
previous = this.value; //old select value
}).change(function() {
var optionsform = buildform(this.value);
console.log('append form'+optionsform);
//NEXT 2 lines doe NOT WORK
$("#ecorpproductwrapper"+ecorp_eprodselectid).children().remove(); //remove previous form
$("#ecorpproductwrapper"+ecorp_eprodselectid).append(optionsform);
//ALTERNATIVE works: $('#ecorpproductwrapper').children().remove(); //remove previous tariif struct form
//ALTERNATIVE works: $('#ecorpproductwrapper').append(optionsform);
var str = "#ecorpproductwrapper"+ecorp_eprodselectid;
console.log('STRING ECORP PRODUCT APPEND: '+str);
console.log('change eprod val: '+this.value);
previous = this.value;
});//$("").focus(function () {
}//for i
//function to build form
var buildform = function(ecorp_eproductid) {
//some code here
//NEXT LINE does not work:
form += '<td> <div id="ecorpproductwrapper'+ ecorp_eprodselectid+'"> </div> </td> </tr>'; //cell with wrapper for ecorp product info
//ALTERNATIVE WORKS: form += '<td> <div id="ecorpproductwrapper"> </div> </td> </tr>'; //cell with wrapper for ecorp product info
//some code here; returns form
}//function buildform

I think you forgot to add ecorp_eprodselectid in your function.
var buildform = function(ecorp_eprodselectid ) {

Few things we assume concerning given text above:
You know this.value works
console.log shows optionsform have HTML that it should have. Not said in OP but if not, the function does not work. function seems to be missing already var buildform = function(someVar) as noted by buysDB
As I cannot see your code, I would try first clear everything 100% by chaning this:
$("#ecorpproductwrapper"+ecorp_eprodselectid).children().remove();
to:
$("#ecorpproductwrapper"+ecorp_eprodselectid).html("");
Then:
$("#ecorpproductwrapper"+ecorp_eprodselectid).html(optionsform);
No need for append if you have no intention to keep anything in DIV.
If you have text also in (#ecorpproductwrapper"+ecorp_eprodselectid) which is why you use children(), consider selecting the DIV that can be cleared.
If that still does not work, something is left out that needs consideration.

Totalling checked checkboxes amidst changes

I have a page with many checkboxes, each of which are tied to a product with a price. I'm trying to use jQuery to give a real-time readout of the 1) number of products, and 2) total price of the user's selections.
This should be very easy: I would have done something like:
$(input).change( function(){
var sum = $(input:checked).length
var price_total = $(input:checked).length * 1.99
})
The Complication
The element or elements being changed are NOT counted in the above code. It seems that when clicking a blank checkbox to check it, jQuery will consider the current element 'not checked' rather than 'checked', i.e. it reflects the checkbox before the change. As a result, my code gets significantly more complicated to accept the changed items.
Is there an elegant and simple way to get around this?

Not sure if the code you posted is what you're actually running, but among other things, your code is missing quotes in your $ selectors. However, this is working for me:
$(':checkbox').change( function(){
var sum = $(':checked').length;
var price_total = sum*1.99;
})​​
jsFiddle DEMO

Without out your html i can only guess it.
My solution would be to use a data entity like data-price.
HTML
​<input type="checkbox" data-price="1.99" />
<input type="checkbox" data-price="1.95" />
<input type="checkbox" data-price="3.60" />
<input type="checkbox" data-price="2.10" />
<div id="total"></div>
​
JQuery
​$('input').change(function() {
recalcTotal();
});
function recalcTotal() {
var total = 0;
$('input:checked').each(function() {
total += $(this).data('price');
});
$('#total').html(total);
}
​
fiddle
Note: I made the assumption the price may vary between different products unsure if this would be correct

You can select checked boxes like this:
$(input).change( function(){
var sum = $('input[type=checkbox]:checked').length
var price_total = sum * 1.99
})
I also used your value of sum for the second calculation. Why not - it makes it faster and more readable. And it works.