Image OnClick to Javascript function

Question

I am making a registration page that allows you to register an account to a mysql database for my uni project.

In this page you can also 'select' your avatar picture. Here is the code below:

                        <u>Select your avatar:</u><br>
                        <?php

                            // open this directory 
                            $image_dir = opendir("images/avatars");

                            // get each entry
                            while( $image = readdir( $image_dir ) )
                            {
                                $dirArray[] = $image;
                            }

                            // close directory
                            closedir($image_dir);

                            //  count elements in array
                            $indexCount = count($dirArray);

                            // loop through the array of files and print them all in a list
                            for($index=0; $index < $indexCount; $index++)
                            {
                                $extension = substr($dirArray[$index], -3);

                                if( $extension == "jpg" || $extension == "gif" )
                                {
                                    //echo("<a href='#'>");
                                    echo("<img id='$index' onClick='SetAvatar($index)' img src='images/avatars/$dirArray[$index]' class='o'> ");
                                    //echo("</a>");
                                }
                            }
                        ?>

                        <script>
                            function SetAvatar(id) {
                            var image = document.getElementById(id);

                                if( CurSelectedImage != null && id != CurSelectedImage )
                                {
                                    var image_to_unselect = document.getElementById(CurSelectedImage);
                                    image_to_unselect.Selected = false;
                                    image_to_unselect.style.border = null;
                                }

                                if( image.Selected != true )
                                {
                                    image.style.border = 'medium solid blue';
                                    image.Selected = true;
                                    SelectedImage = id;
                                }
                                else
                                {
                                    image.style.border = null;
                                    image.Selected = false;
                                    SelectedImage = null;
                                }


                            }
                        </script>

This selects the avatar picture, makes the border blue and stores the selected image id in a variable but how would I pass the variable with the selected image id back to php so I can save it??

Thanks

Considering this is a school project, I'd highly suggest that you stick with using stuff you have learned. Ajax might be a good solution, but if it wasn't taught to you in your course work, your teacher is going to know something is up. And if you have used code supplied in answers here, chances are a cursory google search will turn up this page. — Michael, Apr 20 '16 at 19:28

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

can you show your CSS codes too ?

or you can find here jQuery select and unselect image your answer

edited May 23 '17 at 12:23

Community

1
1

answered Apr 20 '16 at 17:19

Malyar Farahee

3
1
4

The css I dont think has anything to do with it – Zack Antony Bucci Apr 20 '16 at 17:34

score 0 · Answer 2 · answered Apr 20 '16 at 17:45

0

You have to think about your application design. Mixing PHP and Javascript isn't the best idea. Use a API instead of mixing code. You can call this API with Ajax. I think this is a good design choice:

Create a getImages API in PHP: You output the data in a json array.
You calling this api with javascript and generating the DOM with the json
You creating a click handler in javascript and calling again a API in PHP
You getting the json data in PHP and saving it in your db

:)

answered Apr 20 '16 at 17:45

Citrullin

2,269
14
29

I kind of know what youre saying but I dont know what you mean cause im a newb at this. I dont know what API is yet. – Zack Antony Bucci Apr 20 '16 at 17:50
If there is a way to do it like im im up for it even if its not the best way. – Zack Antony Bucci Apr 20 '16 at 17:50
API: https://www.leaseweb.com/labs/2015/10/creating-a-simple-rest-api-in-php/ and ajax: http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery – Citrullin Apr 20 '16 at 17:53

Michael · Answer 3 · 2016-04-22T01:51:55.663

My suggestion would be to use a CSS class. Remove any existing instances of the class then add the class to the selected image.

function SetAvatar(id) {
  //remove existing border(s) a while loop is used since elements is a live node list which causes issues with a traditional for loop
  var elements = document.getElementsByClassName("selected-avatar");
  while (elements.length > 0) {
    var element = elements.item(0);
    element.className = element.className.replace(/(?:^|\s)selected-avatar(?!\S)/g , '');
  }

  var image = document.getElementById(id);
  image.className += " selected-avatar";
}

To pass the avatar value, I'd suggest using a form to pass all of your registration data to process_register (if you are not already). You can add an input of type hidden to your form and populate the value through javascript on submit.

html:

<form id="registration-form" action="process_register.php" method="put">
  <input id="registration-avatar" type="hidden" />
  <button id="registration-submit">Submit</button>
</form>

javascript:

document.getElementById("registration-submit").onclick = function(){
    var avatarValue; //you'll need to write some code to populate the avatarValue based on the selected avatar image
    document.getElementById("registration-avatar").value = avatarValue;
    document.getElementById('registration-form').submit();
};

Then in php you can get the values using $_POST http://php.net/manual/en/reserved.variables.post.php

Seems the question has changed since I answered. I would assume you have a single registration page where the user inputs their registration details and selects an avatar? If so I would include all of it as inputs to a form. The form action is a .php that handles the form inputs and adds them to the db. The selected id can be added to a hidden input in the js function you have there. — Michael, Apr 20 '16 at 19:21
That it what I am thinking i have already included the images in the
so how would I make it so the variable will pass over the the process_register page? i might use cookies — Zack Antony Bucci, Apr 20 '16 at 20:46
@ZackAntonyBucci No need, also not good design to pass around data through cookies. I will add to my answer an example of what I am talking about. — Michael, Apr 22 '16 at 01:34

Image OnClick to Javascript function

3 Answers3

can you show your CSS codes too ?