CODEWITHSUNDEEP
javascripthtml
kh67
kh67

Reputation: 81

How to put a function's result into and html form element

I am trying to put a function's result into an html form field so that it can be passed on via Post method. The function works nicely, however, I cannot seem to get the value over to the next page. How can I get the value from the function into the <span name=total-price-view> so that I can retrieve it after the file redirects? I have looked and looked.

UPDATE: I changed the <span> to a hidden input field. Did not work. So I wrapped in a LABEL and the function works. However, I still cannot get the value. What am I doing wrong?

UPDATE FINAL: I made the changes, per Barmar, below, and works perfectly. See answer checked as best answer.

HTML:

<dl>
 <dt>
  <div label id="mustcheck"><label for="cat1">1</label>
  <input type="checkbox" name="cat1" id="cat1" class="categories" value="checkbox" onclick="get1()" />
 </dt>

 <dt>
  <label for="cat2">2</label>
  <input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" />
 </dt>

 <dt>
  <label for="cat3">3</label>
  <input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" />
 </dt>

 <dt>
  <label for="cat4">4</label>
  <input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" />
 </dt>

 <dt>
  <label for="cat5">5</label>
  <input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" />
 </dt>  

Price: <strong>$<span name="total-price" id="total-price">0</span></strong>

<input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick=""/>

The Script:

<script>
 var pacs = document.getElementsByClassName("categories");

 function attachEventListeners() {
    for (var i = 0; i < pacs.length; i++) {
       console.log('looping');
       pacs[i].addEventListener('change', function (e) {
          var totalPrice = calculatePrice();
          document.getElementById('total-price').innerHTML = totalPrice;
       });
    }
 }

 function calculatePrice() {
    var pricePerCheckbox = 3.00;  // $3.00
    var totalChecked = 0;
    for (var i = 0; i < pacs.length; i++) {
       if (pacs[i].checked) {
           totalChecked++;
       }
    }

    var Totals = totalChecked * pricePerCheckbox;
       return Totals;
    }

     attachEventListeners();
</script>

I have tried:

<body onload="calculatePrice()">
Price: <strong>$<input name="total-price-view" id="total-price-view" 
value="return calculatePrice()"></strong></span>

I have also tried:

document.getElementById('total-price-view').value = Totals;

Upvotes: 0

Views: 689

Answers (2)

kristina
kristina

Reputation: 182

Do two elements. One hidden and one span.

HTML change:

 Price: <strong>$<span name="total-price" id="total-price">0</span></strong>
    <input type="hidden" name="total-price-view" id="total-price-view" value="">

JavaScript change:

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
  for (var i = 0; i < pacs.length; i++) {
    console.log('looping');
    pacs[i].addEventListener('change', function(e) {
      var totalPrice = calculatePrice();
      document.getElementById('total-price').innerHTML = totalPrice
    document.getElementById("total-price-view").value = totalPrice;
    });
  }
}

Upvotes: 0

Barmar
Barmar

Reputation: 780889

When you assign to document.getElementById('total-price').innerHTML = totalPrice; you're removing the hidden input. You don't need a <label> if it's not associated with a visible input field. You should make that a <span>, but take the hidden input out of it.

Then you also need to assign to the hidden input's value.

You also had incorrect HTML element nesting. You had <strong><label> but ended it with </strong></label> instead of </label></strong>

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
  for (var i = 0; i < pacs.length; i++) {
    console.log('looping');
    pacs[i].addEventListener('change', function(e) {
      var totalPrice = calculatePrice();
      document.getElementById('total-price').innerHTML = document.getElementById("total-price-view").value = totalPrice;
    });
  }
}

function calculatePrice() {
  var pricePerCheckbox = 3.00; // $3.00
  var totalChecked = 0;
  for (var i = 0; i < pacs.length; i++) {
    if (pacs[i].checked) {
      totalChecked++;
    }
  }
  var Totals = totalChecked * pricePerCheckbox;
  return Totals;
}

attachEventListeners();
<dl>
  <dt><label for="cat2">2</label><input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" /></dt>
  <dt><label for="cat3">3</label><input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" /></dt>
  <dt><label for="cat4">4</label><input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" /></dt>
  <dt><label for="cat5">5<input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" /></div></dt>
</dl>

Price: <strong>$<span name="total-price" id="total-price">0</span></strong>
<input type="hidden" name="total-price-view" id="total-price-view" value="">

<input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick="" />

Upvotes: 1

Related Questions