Pass and update php variable into javascript

Question

Is there a way I can pass the php option value variable $option_value['price'] into javascript as a string, then each time a different option is chosen, the javascript 'updates' the string with the new value. I have tried with onchange() but must be doing something wrong. I am sure my mistake is because php is server side and javascript is client side, but I have no idea how to get the two to act how I want.

<?php if ($options) { ?>
    <?php foreach ($options as $option) { ?>
    <?php if ($option['type'] == 'select') { ?>
    <span id="option-<?php echo $option['product_option_id']; ?>" class="option">

<select name="option[<?php echo $option['product_option_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 $option_value['price']; ?>
        <?php } ?>
        </option>
        <?php } ?>
      </select>
</span>

I have tried:

<script type="text/javascript"> 
function getIt(elm) {
var val = elm.options[elm.selectedIndex].text;
window.alert(val);
}
</script>

and

<script type="text/javascript">
function getIt() {
var val = "<?php $option_value['price']; ?>";
window.alert(val);
}
</script>

onchange looks right to me: jsfiddle.net/NYJUm. Where are you adding the getIt function? — João Silva
– João Silva, Commented Aug 30, 2012 at 3:11
at the bottom of the code. I am having problems because the php variable is in an array. I can understand <option>A</option> <option>B</option> <option>C</option>, but I can't understand <option><?php $arrayVariable ?></option> — Itsme23
– Itsme23, Commented Aug 30, 2012 at 4:01

Grzegorz · Accepted Answer · 2012-08-30 21:09:48Z

1

Here is an example how you can do it. What you have to do are:

Analyze the code (notice that I use jquery from google's account. You will need to at some point install jquery on your web site and use this one instead of the google's one.
Build your fruits array so it looks like the one in the example.

I have prepared page that will show you this working here: http://jsfiddle.net/7uudp/

Below is what it contains. Notice that this example does not use your variables. You will need to use them the way you want/need. I have also defined entry_fruit to show you how to chose the default one to be selected. Hope it will help.

<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">

fruits = [{n:"apple",p:1},{"n":"strawbery",p:3}];
entry_fruit="strawbery";

function build_select(select,list,which)
{
    $.each( list, function(i,v){
         var selopt="" ;
         if ( v.n == which ) selopt="selected" ;
         $(select).append("<option "+selopt+" value="+i+">"+v.n+" - $"+v.p+"</option>");
     }) ;
}

$(document).ready(function(){
    build_select($("select[name=fruits]"),fruits,entry_fruit);
     $("select[name=fruits]").change(function(){
         alert("Price is $" + fruits[$(this).val()].p);
     }) ;
})

</script>
</head>
<body>
<select name="fruits"></select>
</body>
</html>

answered Aug 30, 2012 at 21:09

Grzegorz

3,3753 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Itsme23 Over a year ago

So my task now is to figure out a way to get my php code into fruits, right?

Grzegorz Over a year ago

Yes. That would be something like ( I cannot format it ;(, so I put NL after each new line ) fruits=[ NL <?php NL your code NL ?> NL ]; NL

Itsme23 Over a year ago

Is this correct: $option_value['product_option_value_id'] is the same as n. $option_value['name'] is the same as apple/strawberry. and $option_value['price'] is the same as p:1,2,....?

Grzegorz Over a year ago

@Travis: That I cannot really know. You don't need to keep structure of object in the array. You can change fields 'n', 'p', and so on. In general you have there at least four types of data - id (product_option_value_id), price (price), and name (name). There is also product_option_id which is different thant product_option_value_id. They may be that each product, represented by product_option_id can have different values represented by product_option_value_id. Or you have a typo in your code.

Tynarus · Accepted Answer · 2012-08-30 03:19:49Z

1

<script type="text/javascript">
function getIt() {
var val = "<?php echo $option_value['price']; ?>";
window.alert(val);
}
</script>

Like so? Looks to me like you just forgot the "echo".

EDIT-

<script type="text/javascript">
var val = "<?php echo $option_value['price']; ?>"; 
function getIt(elm) {
    val = elm.options[elm.selectedIndex].text;
    window.alert(val);
}
</script>

edited Aug 30, 2012 at 3:19

answered Aug 30, 2012 at 3:09

Tynarus

1417 bronze badges

2 Comments

Tynarus Over a year ago

Edited it above, try something like that?

Itsme23 Over a year ago

This alerts $option_value['product_option_value_id']. .text grabs what is echoed. since option_value['price'] is not echoed, it doesn't do anything with that.

Grzegorz · Accepted Answer · 2012-08-30 03:28:29Z

1

Okay, Revoking my previous entry.

What you need to do is to add selected keyword to your <option> element when you match your option_value['price']

Now yuou need to arrange your data in a little bit different way. In your javascript, prepare an array that will map $option_value['product_option_value_id'] to $option_value['price'];. When you build your <select>, for each $option_value['product_option_value_id'] check if its price matches the one that came in initially from php.

Your getIt will simply take the <option value="___"> value, find it in that map, and show it to the user using the alert() window.

edited Aug 30, 2012 at 3:28

answered Aug 30, 2012 at 3:14

Grzegorz

3,3753 gold badges27 silver badges45 bronze badges

2 Comments

Itsme23 Over a year ago

way past me. I am altering opencart code... so most of what you said is greek to me... anyway, it seems I need to start by trying to find a way to have an option selected to start with. I'll see what I can do then I'll be back for more. Thanks.

Itsme23 Over a year ago

Turns out I am way over my head. Any help on how to start this?

Collectives™ on Stack Overflow

Pass and update php variable into javascript

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related