current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
1  
onchange looks right to me: jsfiddle.net/NYJUm. Where are you adding the getIt function? –  João Silva Aug 30 '12 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> –  Travis Aug 30 '12 at 4:01
add comment

3 Answers

up vote 1 down vote accepted

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>
share|improve this answer
    
So my task now is to figure out a way to get my php code into fruits, right? –  Travis Aug 30 '12 at 23:03
    
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 –  Grzegorz Aug 30 '12 at 23:04
    
alright, I'll have at it. –  Travis Aug 30 '12 at 23:15
    
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,....? –  Travis Aug 31 '12 at 0:44
    
@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. –  Grzegorz Aug 31 '12 at 15:10
add comment
up vote 1 down vote 
<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>
share|improve this answer
    
This returns the last option value no matter what the user selects in the drop down. the alert shows the last possible selection regardless of choosing option 1, 4, or 10 in the drop down. So no 'update' onchange. –  Travis Aug 30 '12 at 3:14
    
Edited it above, try something like that? –  Tynarus Aug 30 '12 at 3:20
    
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. –  Travis Aug 30 '12 at 4:31
add comment
up vote 1 down vote

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.

share|improve this answer
    
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. –  Travis Aug 30 '12 at 3:49
    
Turns out I am way over my head. Any help on how to start this? –  Travis Aug 30 '12 at 7:15
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.