5

Iam printing some content using php code inside html but, when i tried to click on that div its not calling the function in onClick ??

Here is my php code

 echo '<div class="col-sm-12 col-xs-12 " ><div class="row ">';
echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';
echo $myarray['Job']['title']."</h3></div></div></div>";

this is resulting html code in "view source" of browser

<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
 <div class="col-sm-10 " onClick="openUrlInNewTab("www.example.com");" >
 <h3>Can you Code? </h3>
 </div>
 </div>
</div>

and here is my function in html page

 function openUrlInNewTab(url) {
// div click is not reaching here
 alert(url); 
 window.open(url, "_blank");
}
asked Jul 16, 2014 at 11:15
3
  • but why? is there any other way? Commented Jul 16, 2014 at 11:17
  • 5
    Replace "www.example.com" with 'www.example.com' (single quotes) Commented Jul 16, 2014 at 11:18
  • I came here because the question was the first search result for "onclick not working", but found the solution in this question. Commented May 31, 2021 at 8:22

4 Answers 4

9

You should use single quotes.

Instead of

<div class="col-sm-10 " onClick="openUrlInNewTab("www.example.com");" >

you should have

<div class="col-sm-10 " onClick="openUrlInNewTab('www.example.com');" >

If you put double quotes inside double quotes it simple won't work.

So in PHP you should change:

 echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';

into

echo '<div class="col-sm-10" onclick="openUrlInNewTab(\''.$myarray['Job']['link'].'\');"><h3>';

EDIT

One extra thing. If you want this url open in your browser, you should rather add http:// before www.example.com

Sample working HTML code:

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
</head>
<body>
<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
 <div class="col-sm-10 " onclick="openUrlInNewTab('http://www.example.com');" >
 <h3>Can you Code? </h3>
 </div>
 </div>
</div>
 <script>
 function openUrlInNewTab(url) {
// div click is not reaching here
 alert(url); 
 window.open(url, "_blank");
}
</script>
</body>
</html>
answered Jul 16, 2014 at 11:18
Sign up to request clarification or add additional context in comments.

1 Comment

@user3755198 I've added full sample HTML code. Just save it as html file and click on this file to open in browser
2

onClick="openUrlInNewTab("www.example.com");"

should be

onClick="openUrlInNewTab('http://www.example.com');"

Use single quotes inside the function for the url.

answered Jul 16, 2014 at 11:22

Comments

2
onClick="openUrlInNewTab("www.example.com");"

should be

onclick="openUrlInNewTab('http://www.example.com');"

the rest is fine

answered Jul 16, 2014 at 11:23

Comments

0

You know how to use jQuery, right?

$(document).ready(function()
{
 $('div').on('click', function()
 {
 alert('clicked!');
 });
});

You can put onclick on div, but it most likely won't work like you're currently doing it because how javascript and php works. (I don't think those noclicks ever get bound)

answered Jul 16, 2014 at 11:20

5 Comments

jQuery is great; but, it isn't always the best solution. There’s overhead to download the library and sometimes the added benefit isn't worth the extra network data cost (especially when targeting mobile devices).
for this it is not worth. I like to use it though for ajax or some nice UI features.
@Jim What's with this overhead-talk almost every time jQuery is mentioned? It's not that bad, even if you are on mobile. You can download the library so it doesn't have to be fetched from CDN either.
@Piwwoli: My approach to software development is to "respect the user". They may be paying for their data usage on mobile; why force them to download the jQuery library just so I can add an onClick event? But, that just my style.
@Jim Guess it depends on the setting too. I'm making software for facilities and facility personnel, so data costs don't really matter to them using their company equipment and all. I find your approach somewhat interesting to be honest, because mine is probably something along the lines of making my job easier by sacrificing some, if any user experience. Besides the clients will never know and if they do, you can pretty much claim that jQuery is an industry standard library for web development.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.