Why onClick() is not working on Chrome Browser?

Question

I'm using onClick() method to call a function when html select option is change. It's working fine in Mozila Firefox but why it's not working on Chrome Broser ?

<select name="project_list" class="project_list">
    <option>--Select Project--</option>        
    <?php 
    $getProjectList = mysqli_query($link, "SELECT p_id, p_name FROM projects WHERE p_owner_id = '$logged_user_id' ");
    while($list=mysqli_fetch_array($getProjectList)){
        $list_p_id = $list['p_id'];
        $list_p_name = $list['p_name'];
      ?>
        <option onclick="showProjectDetails(<?php echo $list_p_id; ?>);"><?php echo $list_p_name; ?></option>";
    <?php
    }
    ?>

Note : This onclick() method get the id value from html option change and pass to showProjectDetails()

Update :

<table border="0" cellpadding="0" cellspacing="0" width="570">
<tr>
  <td width="142">Project</td> 
  <td><input type="text" id="project_name" name="p_name" value="<?php echo $p_name; ?>" /></td>
    <td colspan="1" align="right">
    <select name="project_list" class="project_list">
      <option>--Select Project--</option>  
      <?php 
      $getProjectList = mysqli_query($link, "SELECT p_id, p_name FROM projects WHERE p_owner_id = '$logged_user_id' ");
      while($list=mysqli_fetch_array($getProjectList)){
          $list_p_id = $list['p_id'];
          $list_p_name = $list['p_name'];
          ?>
          <option onclick="showProjectDetails(<?php echo $list_p_id; ?>);"><?php echo $list_p_name; ?></option>";
          <?php
      }
      ?> 
    </select>
    </td>
    <td>
      <a href="#" class="normalSearch">Normal Search</a> <br> <a href="#" class="advanceSearch">Advanced search</a>
    </td>
</tr>
<tr>  
  <td width="142">For</td> 
  <td colspan=""><input type="text" id="project_company" name="company_name" value="<?php echo $p_c_name; ?>" /></td>
  <td></td>  
</tr>
</table>

Update 2 :

function showProjectDetails(e){
var id = $(e).val();
$.ajax({
type:"post",
url:"showProjectDetails.php",
data:"id="+id,
    success:function(res){        
        $('#showProjectForm').html(res);        
    }
}); 
}

Any errors in the console? Have you tried wrapping the php echo in quotes? — tymeJV, Feb 13 '15 at 15:29
the option can not receive clicks, you need to attach the event to the `select` element — CodeGodie, Feb 13 '15 at 15:36

score 3 · Answer 1 · answered Feb 13 '15 at 15:33

3

I don't think <option> elements can receive clicks. See this fiddle. Clicking the options doesn't make anything.

You want to watch changes on the <select> element:

$('select.project_list').on('change', function() {
  alert( this.value ); // or $(this).val()
});

answered Feb 13 '15 at 15:33

Jeremy Thille

26,047
12
43
63

1

Ya, chrome doesn't support click event on ` – A. Wolff Feb 13 '15 at 15:34
I can't get the alert for testing purpose – Shibbir Feb 13 '15 at 15:40
Yet it works : http://jsfiddle.net/tq56jz0a/1/ – Jeremy Thille Feb 13 '15 at 15:41

score 1 · Accepted Answer · answered Feb 13 '15 at 15:40

1

You need to attach the function to your select tag rather than to your option tag . Try this:

<select name="project_list" class="project_list" onchange="showProjectDetails(this);">
    <option>--Select Project--</option>        
    <?php
    $getProjectList = mysqli_query($link, "SELECT p_id, p_name FROM projects WHERE p_owner_id = '$logged_user_id' ");
    while ($list = mysqli_fetch_array($getProjectList)) {
        $list_p_id = $list['p_id'];
        $list_p_name = $list['p_name'];
        ?>
        <option value="<?php echo $list_p_id; ?>"><?php echo $list_p_name; ?></option>";
        <?php
    }
    ?> 
</select>
<script>
    function showProjectDetails(e) {
        var val = $(e).val();
        alert(val);
    }
</script>

answered Feb 13 '15 at 15:40

CodeGodie

12,116
6
37
66

hey, when I change first option it;s working but when change second option i see following error in console log : `TypeError: e.nodeName is undefined ..."value")||(this.value=e))});if(e)return b=m.valHooks[e.type]||m.valHooks[e.nodeN... ` – Shibbir Feb 13 '15 at 15:51
I mean second time it's not call the function. – Shibbir Feb 13 '15 at 15:53
ok let me check it out again – CodeGodie Feb 13 '15 at 15:55
can you add the contents of your `showProjectDetails` function in your main question? – CodeGodie Feb 13 '15 at 15:56
I added it check it. – Shibbir Feb 13 '15 at 15:57
hmm.. thats weird.. it should work. on Chrome, when you inspect your HTML elements. Are all your values from the database parsed correctly? Do all the `select` options have the correct values set? – CodeGodie Feb 13 '15 at 16:04
Yes all value from db is parsed correctly. – Shibbir Feb 13 '15 at 16:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70862/discussion-between-codegodie-and-creativeartbd). – CodeGodie Feb 13 '15 at 16:07
Really a 100% helpful person - CodeGodie – Shibbir Feb 13 '15 at 17:20

Why onClick() is not working on Chrome Browser?

2 Answers2