Jump to content

Onclick in php loop


sigmahokies

Recommended Posts

Hi everyone,

I want to know, will Javascript's onclick on button work in PHP while loop? I mean, If I out "onclick" with function inside html tag, then put html inside echo under while loop. Will JavaScript's onclick work? Like this script below:

	$i = 0;
	while( $i < 5) {
	echo "<button id='btn' onclick='test()'>Hello</button>";
	$i++;
	}
	

This loop will create 4 times loop with same echo with onclick, so will onclick call Javascript programming?

Link to comment
Share on other sites

It is not clear what you are asking. Keep in mind that javascript is client side and php is server side. The two do not know about each other. Your code will produce 5 buttons on the displayed page. Each one will execute the javascript function 'test' when clicked by the user.

Link to comment
Share on other sites

Read gw1500se's post a couple times.  Not necessarily the part about not being clear but the part about each operating in their own environment.  Draw two circles and put Client (HTML/JavaScript) in one and Server (PHP) in the other.  Then make an arrow from the client circle to the server circle and label it "request for HTML page" and then a return arrow and label it "HTML page".  Then maybe make an arrow from the client to the server and label it "form submission" and an arrow back labeled "form results".  You can do this for Ajax request as well.  For all of these, the client initiates a request and the server responds.  Do it until it is 100% clear in your head.

Link to comment
Share on other sites

Hi gw1500se,

I'm trying to create the loop that which read directory from folder with Javascript inside echo by loop like this -

	$file = opendir("htdocs/site/");
	 while($files = readdir($file)) {
	echo "<button onclick='test()'>".$files."</button><br />";
	}
	

it will create few button that will have text on buttons which list in folder.

Right now, I'm trying to make function in JavaScript when someone click one of several buttons, then JavaScript should response to change file or video or image. like you saw some website has several button, then you click on one of those button to see switch image on website.

Of course, i will use document.getElementByTagName("button") to retrieve text, but seem it didn't get text, even, i tried to add like .value and .textContent in JavaScript...still not work.

If you want, I can put my original script in next time.

Link to comment
Share on other sites

Please do include the original code, not something edited for your post.

If the Javascript isn't working then that would be a Javascript problem, right? So what is that code?

And have you done a View Source of your page to make sure that the HTML is correct?

Link to comment
Share on other sites

All right, here my original code -

	<!doctype html>
<html>
<head>
    <title>Stimulation Video Home Alone</title>
    <link href="css/grammar.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="images/sigma.png">
    <script type="text/javascript" src="js/checkbox.js"></script>
    <script>
        function clickvideo() {
            let x = document.getElementById("btn");
	                document.getElementById("display").innerHTML = "<video width='430' controls style='border-radius: 5px;' height='240' type='mp4'>" +
                    "<source src='UPLOADS/Breakfast/" + x + "'></video>";
            }
	    </script>
</head>
<form>
    <?php
    $video = opendir("UPLOADS/Breakfast/");
	    while(($listvideo = readdir($video)) !== FALSE) {
        if (preg_match("/^[^\.].*$/", $listvideo)) {
            echo "<input type='button' id='btn' value='".$listvideo."' onclick='clickvideo()'>&nbsp;";
        } $videoList = $listvideo;
    }
	    ?>
</form>
<body>
<table class="table" border="1">
    <tr>
        <td><a href="index.html"><img src="images/logo_new_final.jpeg" align="left" width="250"
                                      alt="Research"></a></td>
        <td rowspan="4">
            <iframe height="650" width="800" src="--------------.php" frameborder="0"></iframe>
        </td>
    </tr>
    <tr>
        <td>
            <video width="450" controls style="border-radius: 5px;">
                <source src="video/Ha_Demo.mp4">
            </video>
        </td>
    </tr>
    <tr>
        <td>
            <div id='display'>
                <video width='450' controls style='border-radius: 5px;'>
                    <source src="UPLOADS/Breakfast/<?php echo $videoList ?>">
                </video>
            </div>
        </td>
    </tr>
</table>
</body>
</html>
	

That's my original script...loop in php works, it show have a name on button from files' name in folder, but I can't figure why javascript won't do onclick when I'm asking for which video i want to see, like you can push button to have other video source appear on page. I tried to use .value and .textContent to retrieve text on button to make a switch video source on current page.

Link to comment
Share on other sites

IDs must be unique. You cannot reference multiple buttons by "btn" (which is a poor ID anyways).

Change your onclick to

clickvideo(this)

then give your clickvideo a parameter with some descriptive name. That parameter will be the same as the "x" that you have there right now, so you don't have to try to get it some other way.

The parameter is also going to be the HTML element as a whole. If you want its value then you can get it using .value.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.