CODEWITHSUNDEEP
phpjavascriptinnerhtmlgetelementbyid
tora0515
tora0515

Reputation: 2547

I can't update prices using .innerHTML

I can not get prices to auto update.

To make unique id's; for the price I use:

id="target_1_<?php echo $product['product_id']; ?>"

and for the select menu I use:

id="select_<?php echo $product['product_id']; ?>"

Here is the html/php

<?php foreach ($products as $product) { ?>
   <span id="target_1_<?php echo $product['product_id']; ?>"><?php echo $product['price']; ?></span>
 <?php } ?>


<?php if ($product['options']) { ?>
  <?php foreach ($product['options'] as $option) { ?>
  <?php if ($option['type'] == 'select') { ?>

  <select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this);">

  <?php foreach ($option['option_value'] as $option_value) { ?>
    <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

     <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><span id="newPrice"><?php echo $option_value['price']; ?></span>)
    <?php } ?>
    </option>
    <?php } ?>
  </select>
<?php } ?>

........
<?php } ?>

Then for the onchange function I use this: 

function getIt(el) {
var a = el.options[el.selectedIndex].text;
var position1 = a.indexOf("(");
var position2 = a.indexOf(")");
var position1 = position1+2
var finalA = a.substring(position1, position2); 
document.getElementById("target_1_<?php echo $product['product_id']; ?>").innerHTML = "$"+finalA;
}

alert(finalA) gives the value I need, I just can't seem to get it back into the DOM

Upvotes: 0

Views: 245

Answers (3)

Justin John
Justin John

Reputation: 9616

Add an additional data attribute for product id like data-product-id in select tag 

<select name="option[<?php echo $option['product_option_id']; ?>]"  
  data-product-id = "target_1_<?php echo $product['product_id']; ?>" 
  class="select_options" id="select_<?php echo $product['product_id']; ?>" 
   onchange="getIt(this);">

In Javascript 

function getIt(e) {
    //Your part
    document.getElementById(e.getAttribute("data-product-id")).innerHTML = "$"+finalA;
}

Upvotes: 0

Ofir Baruch
Ofir Baruch

Reputation: 10346

Try this one:

function getIt(el) {
var a = el.options[el.selectedIndex].text;
var position1 = a.indexOf("(");
var position2 = a.indexOf(")");
var position1 = position1+2; //BTW , Your forgot ; over here
var product_id = <?php echo $product['product_id']; ?>;
//You always can use: console.log(product_id);
//Then check your browser's console to see this variable value
//In this case , just View Source and make sure that instead of the php line there's a valid
// number (the product's id)
var finalA = a.substring(position1, position2); 
document.getElementById("target_1_"+product_id).innerHTML = "$"+finalA;
}

Upvotes: 0

XMen
XMen

Reputation: 30238

change these two : pass product_id in getIt function

  <select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this,<?php echo $product['product_id']; ?>);">

use id with productid argument concanate instead of using php 

function getIt(el, productid) {
var a = el.options[el.selectedIndex].text;
var position1 = a.indexOf("(");
var position2 = a.indexOf(")");
var position1 = position1+2
var finalA = a.substring(position1, position2); 
document.getElementById("target_1_"+productid).innerHTML = "$"+finalA;
}

Upvotes: 1

Related Questions