Image OnClick to Javascript function

Image OnClick to Javascript function - javascript

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

can you show your CSS codes too ?
or you can find here jQuery select and unselect image
your answer

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
:)

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

Related

define a herf link based on if/else scenario in JS file

So basically I'm a beginner in JavaScript and HTML and trying to play with functions call on JS that will edit my HTML file.
Now, I'm trying to redirect users to different pages based on their type.
I want to use "onload" function in order to determine the user type and edit the link according to the result.
HTML:
<body onload="what_user()">
<div id="result">zone</div>
</body>
JS file:
function what_user() {
var d = document.getElementById("result");
var user = ""; // get the user type
if (user == "") d.outerHTML = "" + "";
else d.outerHTML = "" + "";
}
I have some problems understanding how to call a function from HTML and use it on JS as well as return values.
Thanks in advance!!!

Don't play with elements as string. Create an element and put it where you want.
function what_user() {
var d = document.getElementById("result");
let a = document.createElement('a')
a.text = 'zone'
var user = ""; // get the user type
if (user == "") a.href = 'admin_index.html'
else {
a.href = 'admin_user.html'
}
d.parentNode.removeChild(d);
document.body.appendChild(a)
}
<body onload="what_user()">
<div id="result">zone</div>
</body>

How can I grab a div in PHP that's in a loop within a javascript function

Below is the code.
under the function there is a resultContainer.innerHTML that populates a list of QR codes scanned. How can $_POST the values in PHP so that I can send it in an email format? I tried adding a name within the div (<div **name="qrOutput"**>[${countResults}] - ${qrCodeMessage}</div>) but PHP does not pick it up. Only returns an empty string.
I also tried giving the <div id="qr-reader-results"></div> element a name but because the output is within another div inside this div I also got an empty result.
Thanks a lot for any help.
<!-- start -->
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
<div id="root"></div>
<script>
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" ||
document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
function onScanSuccess(qrCodeMessage) {
if (qrCodeMessage !== lastResult) {
++countResults;
lastResult = qrCodeMessage;
resultContainer.innerHTML += ***`<div">[${countResults}] - ${qrCodeMessage}</div>`;***
}
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", {
fps: 10,
qrbox: 250
});
html5QrcodeScanner.render(onScanSuccess);
});
</script>
<p id="QRout"></p>

You can store your results in an other variable when you add it to the DOM.
Declare a variable to store your results
var myResults = [];
When you add the result to the DOM add also the results in array variable
// ...
resultContainer.innerHTML += `<div>[${countResults}] - ${qrCodeMessage}</div>`;
myResults.push({count: countResults, message: qrCodeMessage})
Then you can use myResult var on a POST request
myCustomPostFunction('/yourUrl/', myResult);
The "myCustomPostFunction" will depend on the way you want to send the data
Check this codepen: https://codepen.io/zecka/pen/VwKNpze
Post request like a form submit
If you want to send the data to the current page like a form post, you can find an example here: https://stackoverflow.com/a/133997/2838586
Post request to a rest api
Fetch: POST json data

i have problem with multiple form with the same id with google tag manager

Hi i have many forms inside multiple pages all of them the with the same id (success message) after submitted and same class names when i'm sending the form which e.g inside home page i put element selector through id with Page PATH with match regex something like that \/(en|es)\/ it works good without problem ... but when i'm going to page www.something.com/send-something/233?search=profile the form submitted through old id which was for home page i tried to inject custom javascript something like :
function() {
var els = document.querySelectorAll('#sendReqSurgyForm1');
for (var i = 0; i < els.length; i += 1) {
if (els[i] === {{Page URL}}) {
return i;
}
}
return '(nothing sent)';
}
with adding matching Page URL with match regex something like that to https:\/\/www\.something\.com\/(ar|en)\/send-something\/[0-9]+\?source=[a-zA-Z]+\_?[a-zA-Z]+
to matching the url: www.something.com/send-something/233?search=profile
the trigger always works with home page but trigger which located in www.something.com/send-something/233?search=profile not success and the result of javascript always returns nothing sent .. please help to fix this problem

Hi the Answer is SPA Angular using SPA so it can be multiple form with the same component so i solved this problem through setting id for every form with different urls
for example if you have multiple forms in angular inside multiple routing page as i explained in the main topic question .. to fix this problem you can setting id for every form submissions through js by setting new id for every form submission by setting Attribute for id based different urls.
main_id = exampleForm
function(){
var ids = document.getElementById("exampleForm");//main id
var current_url = window.location.href;//current url of visitor
var dir_match = location.pathname+location.search;//the path of website after .com
var send_req = 'https://www.example.com/'+dir_match.match(/[ar][r]|[en]n/)+'/surgery-request/'+dir_match.match(/[0-9]+/)+'?source=profile';//link1 which have form1
var send_req2 = 'https://www.example.com/'+dir_match.match(/[ar][r]|[en]n/)+'/surgery-request/'+dir_match.match(/[0-9]+/)+'?source=profile2';//link2 which have form2
var home_url = 'https://www.example.com/'+dir_match.match(/[ar][r]|[en][n]/)+'/';//link3 which have form3
if(current_url == send_req){
/* if current_url equal to link1 set new id e.g = `forms_req_surgery` */
last_send_req = ids.setAttribute("id", "forms_req_surgery");
var elm = document.getElementById('forms_req_surgery');
var last_var = elm.id;/* get the name of id */
return last_var; // return the name of id after changed set
}else if(current_url == home_url){
last_home_url = ids.setAttribute("id", "home_req");
var elm2 = document.getElementById('home_req');
var last2_var = elm2.id;
return last2_var;
}else if(current_url == send_req2){
last_send_req2 = ids.setAttribute("id", "forms_req_surgery2");
var elm3 = document.getElementById('forms_req_surgery2');
var last3_var = elm3.id;
return last3_var;
}
}

Multiple Instances of Ajax Uploader on the Same Page

I developed an ajax file uploader and it works great if the one instance is on the page. I'm trying to convert it to allow multiple instances, and it almost works, EXCEPT, when I'm uploading multiple files in one form, it uploads the first file fine, but then for all subsequent files, for some reason it points forward to the next file reader from the second form instance. If I upload using the last (second) instance of the upload form, multiple files upload fine. But if I try uploading with the first instance, it will upload the first file, but all subsequent files get sent to the empty file input from the second instance. I can't understand why. I'm using unique id names throughout the upload form and referencing that unique id throughout the javascript functions. I'll try to include all the necessary bits of code below.
The forms are generated by PHP. The php var $uid is a randomly generated unique id that I use throughout. First, the initialization of the upload function is output to the page in a <script> tag:
'<script> '.
'jQuery(document).ready(function($){ '.
'var myup_'.$uid.' = new MyUp({ '.
'form_id: "myup_form_'.$uid.'", '.
'uid: '.$uid.', '.
'container: "'.$name.'", '.
'table: "'.$style.'", '.
'iconcolor: "'.$iconcolor.'", '.
'maxsize: '.$maxsize.', '.
'permitted: '.$permitted.', '.
'prohibited: '.$prohibited.', '.
'fixed: '.$fixedsetting.', '.
'pathcheck: "'.$pathcheck.'", '.
'uploader: '.$uploader.', '.
'loading: "'.my_url.'/lib/img/ajax.gif" '.
}); '.
'}); '.
'</script>';
Obviously all those variables for my settings are defined earlier. With multiple instances on the page, it reads the settings correctly for each different instance. They are successfully showing up with different styles, icon colors, file type permissions, max file size settings, etc. All that works with multiple instances.
Now the form:
'<div class="myup_container" style="'.$inlinestyle.'">'.
'<form name="myup_form_'.$uid.'" id="myup_form_'.$uid.'" action="javascript:void(0);" enctype="multipart/form-data">'.
'<input type="hidden" id="upload-actionpath-'.$uid.'" value="'.$fixed.'" data-basename="'.$basename.'" data-start="'.$start.'" />'.
'<div class="myup_buttons_container" style="text-align:right;">'.
'<span class="myup_wrapper" style="text-align:left;">'.
'<input type="file" name="myup_files_'.$uid.'[]" id="myup_files_'.$uid.'" class="hidden_browse"'.$multiple.' />'.
'<span class="add_files">'.$addfiles.'</span>'.
'<span id="submit_upload_'.$uid.'">'.$uploadlabel.'</span>'.
'</span>'.
'</div>'.
'</form>'.
'<div id="myup_files_container_'.$uid.'" class="myup_files_container"></div>'.
'<span id="my_removedfiles_'.$uid.'" style="display:none;"></span>'.
'</div>';
So that's a pared down version of it. The instance in the script tag, containing the settings, and the html form, are output by a shortcode. So multiple shortcodes on the page will output multiple instances of the MyUp function.
Here's what I hope are all the pertinent bits of the javascript functions (it's long, sorry, but I removed a ton of stuff):
jQuery(document).ready(function($)
{
// throughout, the var fuid will refer
// to the php var $uid from the html form and instance settings
function myupRemove(id, filename, fuid)
{
// handle files the user removes from the input field
// before submitting the upload
}
function MyUp(config)
{
this.settings = config;
this.fuid = this.settings.uid;
this.file = "";
this.browsed_files = [];
var self = this;
MyUp.prototype.myupDisplay = function(value)
{
this.file = value;
if(this.file.length > 0)
{
/* this is a really long bit of code
* that i'll spare you, but basically I iterate
* through all the files in the input field
* and put them dynamically into a table
* and drop the table onto the page
* so the user can rename them, remove them before upload,
* and then watch the status bar for each file as it uploads.
* This portion of the code works fine with multiple instances.
*/
}
}
// Create Unique ID
MyUp.prototype.uid = function(name)
{
// Here I generate a unique ID for each file,
// and prepend it with the Instance's unique id (i.e., this.fuid)
return this.fuid+'_'+name.replace(/[^a-z0-9\s]/gi, '_').replace(/[_\s]/g, '_');
}
// Get File Extension
MyUp.prototype.ext = function(file, lowercase)
{
return (/[.]/.exec(file)) ? (lowercase ? /[^.]+$/.exec(file.toLowerCase()) : /[^.]+$/.exec(file)) : '';
}
// Format File Size
MyUp.prototype.nicesize = function(fileSize)
{
// a bunch of code to format the file size then...
return niceSize;
}
// Attribute FileType Icons
MyUp.prototype.icon = function(icon_ext, color)
{
// a bunch of arrays to determine
// which file type icon to display in the table
}
//File Reader
MyUp.prototype.read = function(e)
{
if(e.target.files)
{
// references the myupDisplay function
// where I add the files to a table
self.myupDisplay(e.target.files);
self.browsed_files.push(e.target.files);
}
}
function addEvent(type, el, fn)
{
if(window.addEventListener)
{
el.addEventListener(type, fn, false);
}
else if(window.attachEvent)
{
var f = function()
{
fn.call(el, window.event);
};
el.attachEvent('on' + type, f)
}
}
// Collect File IDs and Initiate Upload for Submit
MyUp.prototype.starter = function()
{
if(window.File && window.FileReader && window.FileList && window.Blob)
{
var browsed_file_id = $("#"+this.settings.form_id).find("input[type='file']").eq(0).attr("id");
document.getElementById(browsed_file_id).addEventListener('change', this.read, false);
document.getElementById('submit_upload_'+this.fuid).addEventListener('click', this.submit, true);
}
else alert(browser_cant_read_message);
}
// Begin Upload on Click
MyUp.prototype.submit = function()
{
self.begin();
}
// Initiate Upload Iterator
MyUp.prototype.begin = function()
{
if(this.browsed_files.length > 0)
{
for(var k=0; k<this.browsed_files.length; k++)
{
var file = this.browsed_files[k];
this.myupAjax(file,k);
}
this.browsed_files = [];
}
else alert(no_files_chosen_message);
}
// Ajax Upload
MyUp.prototype.myupAjax = function(file,i)
{
if(file[i]!== undefined)
{
var id = file_id = self.uid(file[i].name),
rawname = file[i].name.substr(0, file[i].name.lastIndexOf('.')) || file[i].name,
extension = self.ext(file[i].name, false),
browsed_file_id = $("#"+this.settings.form_id).find("input[type='file']").eq(0).attr("id");
path = this.settings.fixed ? this.settings.fixed : String($('input#upload-actionpath-'+this.fuid).val()),
pathcheck = String(this.settings.pathcheck),
removed_file = $("#"+id).val(),
newname = String($('input#rename_upfile_id_'+id).val()),
new_name = newname === '' || newname === 'undefined' || newname === undefined ? file[i].name : newname+'.'+extension,
removed = this.settings.removed,
loading = this.settings.loading,
fixedchars = this.settings.fixed;
// if the file is removes, skip to the next file
if(removed_file !== '' && removed_file !== undefined && removed_file == id) self.myupAjax(file,i+1);
else
{
var myupData = new FormData();
myupData.append('upload_file',file[i]);
myupData.append('upload_file_id',id);
myupData.append('max_file_size',this.settings.maxsize);
myupData.append('upload_path',path);
myupData.append('new_name',new_name);
myupData.append('extension',extension);
myupData.append('uploader',this.settings.uploader);
myupData.append('act','upload');
myupData.append('nonce',myup.nonce);
$.ajax(
{
type : 'POST',
url : myup.ajaxurl+'?action=myup-uploads',
data : myupData,
id : id,
fuid : this.fuid,
new_name : new_name,
rawname : rawname,
extension : extension,
path : path,
pathcheck : pathcheck,
removed : removed,
loading : loading,
fixedchars : fixedchars,
cache : false,
contentType : false,
processData : false,
beforeSend : function(xhr, settings)
{
// I added this alert because it shows me that when I'm using the first instance
// after the first file uploads, it starts looking to the file input field
// from the second instance
alert('path: '+settings.path+' pathcheck: '+settings.pathcheck);
// in here I do a bunch of security stuff before uploading
},
xhr: function()
{
// my progress bar function here
},
success : function(response)
{
setTimeout(function()
{
if(response.indexOf(id) != -1)
{
// do success stuff, like green checkmark, remove table row, etc.
}
else
{
// do failure stuff, like red x and error message
}
// AND HERE IS THE IMPORTANT PART
// THIS SAYS TO GO ON TO THE NEXT FILE IN THE ARRAY
// BUT WHEN USING THE FIRST INSTANCE
// IT SENDS US TO THE SECOND INSTANCE'S FILE READER
// if I'm uploading with the second form it's fine
if(i+1 < file.length) self.myupAjax(file,i+1);
},500);
}
});
}
}
}
this.starter();
}
window.MyUp = MyUp;
window.myupRemove = myupRemove;
});
Note the comment block toward the end of the above code snippet, where the comment is in all caps. That's where it completes the ajax upload for a file, then sends us back to do the next one.
So, basically, to reiterate, if I have two forms on the page, when I use the second form, everything works fine. When I use the first form, the first file will upload fine, but then it starts looking for the next file in the input field from the second instance.
Is there a relatively simple solution for this?

In the posted code, the constructor function declares all prototype methods. This causes them to be overridden each time a new MyUp object is created, and they will use the configuration from the last one.
function MyUp(config) {
/// ...
var self = this;
MyUp.prototype.foo = function() {
// use `self`
};
}
Instead, you should declare the methods once and use the this reference to obtain any attached objects:
function MyUp(config) {
/// ...
}
MyUp.prototype.foo = function() {
// use `this`
};
If you need static members for the class (methods or variables that are not attached to any instance), you can declare them as fields of the function, if they are to be used publicly - MyUp.begin = function() {}. Or inside the module, if they are private:
(function() {
var uploadsInProgress = 0;
// declare MyUp and use uploadsInProgress; it will be hidden from customer code
window.MyUp = MyUp;
})();
I am not completely sure if this will resolve the upload issues, but it will definitely let you keep your sanity when instantiating multiple objects.

Well I couldn't get it to work the way Alex Gyoshev suggested (deficiency on my part no doubt), so I decided to get rid of the object/prototype route altogether. Instead of creating instances in the form, I declare a MyUpConfig variable in the global space, as an empty array. Then in each html form, I add MyUpConfig['.$uid.'] = and then my array of settings.
Then in the js file I bind each form's file input and submit events to the unique id, and store each input field's file data in an array like this: TheFiles[uid] = files. So when the upload submit occurs, it gets the uid from the upload button element, and only attempts to upload the files stored in the array matching that unique id.
I now have it working with multiple upload forms on the same page. They can each be running simultaneously without interference.

Drupal 6 javascript in module block for front page

I'm trying to create a simple image slider on the front page of my drupal website. I wrote a module with the basic outline as follows
<?php
function slider_init(){
drupal_add_js(drupal_get_path('module', 'slider') .'/slider.js');
}
function slider_block($op = 'list', $delta = 0, $edit = array()) {
$block = array();
switch ($op) {
case "list":
// Generate listing of blocks from this module, for the admin/block page
$block[0]["info"] = t("slider");
break;
case "view":
// Generate content for blocks from this module
$block_content = "";
$block_content .= "hello";
//Query for the projects
$icons = db_query("SELECT * FROM {alumni_frontpage_projects}");
//Initiation arrays from each table column: title, description, url, icon link
$links = array();
$title = array();
$description = array();
$url = array();
//Generate arrays from each table column: title, description, url, icon link
while($icon_data = db_fetch_array($icons)){
$links[] = $icon_data['slider_image_location'];
$title[] = $icon_data['title'];
$description[]= $icon_data['description'];
$url[] = $icon_data['url'];
}
//Count elements in array and randomly choose one
$res = count($links)-1;
$seed = rand(0,$res);
//Generate HTML and Javascript of Slider
//Check that content isn't empty
if ($block_content == "") {
$block_content = t("Sorry No Content");
}
$block["content"] = $block_content;
break;
case "save":
break;
case "configure":
break;
}
return $block;
}
Now, everything is fine. I generate a block and I can place it wherever I want. Great. But I would really like to use javascript in this block so that I can pass the arrays and use onclick events to slide through some images from the arrays i queried. So I found out that I will have to pass the variables into javascript and I'll have to identify the javascript file i want to use in the module.
//add variable to the Javascript
drupal_add_js(array('slider_settings' => array('variable_name' => $variable_name)), 'setting');
//add Javascript file to module
drupal_add_js(drupal_get_path('module', 'slider') .'/slider.js');<br>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I put these in the hook_init BUT NOTHING HAPPENS!!!!! I tested to see basic alerts. If I put hard code into the _block, such as:
$block_content .= '
<script type="text/javascript">
var x
x = 50;
document.write(x); //prints the value of x
</script>';
Then I see '50' prints.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If I try to pass a variable to the hard coded script. That DOES NOT WORK either.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If I try to write 50 through the previous code, but from a separate file called slider.js which is in the same folder using "drupal_add_js(drupal_get_path('module', 'slider') .'/slider.js');", That DOES NOT WORK either (even though I'm not passing a variable)
So what the heck is going on!! Is it possible I'm missing some important core drupal files? Is there a way to trouble shoot this further?
Thanks!

drupal_add_js should work in hook_init().First Check whether your hook function is correctly named as ModuleName_init() or not.

We Keep Coding

JavaScript is the programming language of the Web.

Image OnClick to Javascript function - javascript

can you show your CSS codes too ? or you can find here jQuery select and unselect image your answer

Related

define a herf link based on if/else scenario in JS file

How can I grab a div in PHP that's in a loop within a javascript function

i have problem with multiple form with the same id with google tag manager

Multiple Instances of Ajax Uploader on the Same Page

Drupal 6 javascript in module block for front page

Categories

Resources