OnClick event not working in google chrome and safari

Question

I have used the onclick() javascript event in my cake app. but that not work in google chrome and safari. here is the my code

<select name="ovwear" >
            <option>--Select Category--</option>
            <?php
            $i = 1; 

            foreach($styleDetail as $key=>$val) { ?>


            <option onClick="catDetail(<?php echo $val['shop_style_categories']['cat_id'].",".$val['shop_style_categories']['parent_id'] ?>);" value="<?php echo $i;?>">Category <?php echo $i;?></option>

            <?php $i++; } ?>

            </select>

here is the function:

<script type="text/javascript">
    function catDetail(cat_id,parent_id){
        //alert("called here");
        var cat_id = cat_id;
        var parent_id = parent_id;
            jQuery.ajax({
                          type: "POST",
                          url: "/admin/shop/styledata",
                          data:"cat_id=" + cat_id,
                          dataType: "html",
                          success: function(data) {
                            $("#alertt").html(data);
                         } 
            });
    }
</script>

score 3 · Answer 1 · answered Jun 05 '12 at 04:57

3

onclick has to be on `<select` instead of `<option`

<select name="ovwear"  onClick=.....

answered Jun 05 '12 at 04:57

Raab

34,778
4
50
65

So i am use only – Jun 05 '12 at 05:02
I understand. you need to change your approach. Define onchange on select and pass you required value, which has been set in the loop – Raab Jun 05 '12 at 05:04

score 1 · Answer 2 · edited May 23 '17 at 10:26

1

I think you can't attach an onclick on <option>. Better use onchange on <select> instead.

And since you are using jQuery, take advantage of using .on() to attach handlers. Also, use data-* attributes for custom data on tags. More details in this answer.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 05 '12 at 04:55

Joseph

117,725
30
181
234

score 0 · Answer 3 · answered Jun 05 '12 at 04:56

0

You should put onclick event on the select element and not on the options.

answered Jun 05 '12 at 04:56

Subir Kumar Sao

8,171
3
26
47

Sampson · Answer 4 · 2012-06-05T05:58:22.523

You're using jQuery, therefore, you should use jQuery. You should be binding to the change event of the select element itself, and storing these relevant values as data attributes:

<?php
    $o =  "";
    for ( $i = 0; $i < count( $styleDetail ); $i++ ) {
        $o .= sprintf("<option data-cat-id='%s' data-parent-id='%s'>%s</option>",
                       $styleDetail[$i]['shop_style_categories']['cat_id'],
                       $styleDetail[$i]['shop_style_categories']['parent_id'],
                       "Category " . $i+1 );
    }
?>
<select name="ovwear"><?php echo $o; ?></select>

Next, we need to bind the data up:

<script>
    $(function(){
        $("select[name='ovwear']").on("change", function(){
            var selected = $("option:selected", this);
            $.ajax({
                type: "POST",
                url: "/admin/shop/styledata",
                data: { 'cat_id':$(selected).data("cat-id") },
                dataType: "html",
                success: function(data) {
                    $("#alert").html(data);
                }
            });
        });
    });
</script>

thansk for your awesome reply, but this show only 1,1,1,... in dropdown — , Jun 05 '12 at 05:44
@user1436533 If this solved your problem, please consider accepting as by clicking the check-mark next to the answer. — Sampson, Jun 05 '12 at 05:57

OnClick event not working in google chrome and safari

4 Answers4