CODEWITHSUNDEEP
javascriptphphtml-select
tora0515
tora0515

Reputation: 2547

Pass and update php variable into javascript

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>

Upvotes: 0

Views: 2343

Answers (3)

Grzegorz
Grzegorz

Reputation: 3355

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

  1. 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.
  2. 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>

Upvotes: 1

Grzegorz
Grzegorz

Reputation: 3355

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.

Upvotes: 1

Tynarus
Tynarus

Reputation: 141

<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>

Upvotes: 1

Related Questions