Javascript: Using multiple forms to return a single output

Question

The page I'm currently working is a dashboard for an online publisher. The way it works is that it uses a foreach loop to create an instance of an editor form for each article. What I'm trying to do is add checkboxes to each instance that can add a value to a subtotal at the bottom of the page. I can only get it to work if the output is contained within the same form.

So my question actually is: Is there a way to to use inputs from multiple forms and return a single output?

Simplified PHP code for each instance:

foreach ($Articles as $idx => $Article){
    echo <form action='/gatekeeper.php' method='POST' target='_SAVE{$Article["ID"]}' onchange='submit()'>
    echo <input type="checkbox" onClick="checkTotal()" />
}

And here is the JavaScript code.

function checkTotal() {
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.choice.length;i++) {
  if (document.listForm.choice[i].checked) {
    sum = sum + parseInt(document.listForm.choice[i].value);
  }
}
document.listForm.total.value = sum;

}

"getElementsByName" - elements in the plural. Several elements don't have a single `.value`... — Niet the Dark Absol, Jun 14 '16 at 18:54
I think you're confusing `getElementsByName` with `getElementById`. `document.getElementsByName("inches")` returns the same list of checkboxes as `document.articleAdd.inches`. — Barmar, Jun 14 '16 at 18:58
I think I don't get what you want to do but anyway here are some errors to fix for you. `document.getElementsByName("inches").value` is undefined. If you want to get the array then just do `document.getElementsByName("inches")`. If you want to set `document.articleAdd.inches.value` then you have to do `document.articleAdd["inches"] = inches;`. Thats also how you access the inputs with name inches in your for loop: `for (i=0;i — KRONWALLED, Jun 14 '16 at 19:01
So you're trying to get the value form a form input named `inches`, and set it to a form input named `inches` and then loop all the form inputs named `inches` to see if they're checked? Seems like you have too many inputs with the same name. — , Jun 14 '16 at 19:02

score 0 · Answer 1 · answered Jun 14 '16 at 19:02

Try this

function addToTotal(){
var sum = 0;
var inches = document.articleAdd.inches.attributes['value'].value;
document.articleAdd.inches.value = inches;
for (i=0;i<document.articleAdd.inches.length;i++) {
  if (document.articleAdd.inches[i].checked) {
    sum = sum + parseInt(document.articleAdd.inches[i].value);
  }
}
document.articleAdd.inches.value = sum;
}

Javascript: Using multiple forms to return a single output

1 Answers1