change src of image from a php page through js - javascript

I have an image generated from another php page
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
a captcha image is created each time.On each refresh a different image is generated.
But what I want is to put a button there which changes the image without refreshing the whole page.
<input type="button" value="refresh" onclick="refresh();">
and the my js code is
function refresh(){
document.getElementById("imagid").src="sample.php";
}
It doesn't work,how to change the image src by js

In your JS code you're trying to change the "src" attribute of the button, you need to apply the id to the image, not the button.
What you need to do is have the following :
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
<input type="button" value="refresh" id="imagid" onclick="refresh();">
<script>
function refresh() {
document.getElementById("imagid").src = "sample2.php";
}
</script>

try this
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
<input type="button" value="refresh" id="buttonid" onclick="refresh();">
<script>
$('#buttonid').click(function()
{
$('#imageid').attr('src','sample2.php');
}
</script>

The problem could be that image has been cached by browser because of its MIME type.
there are various ways to tackle it,
1)use different page name altogether,sample1.php,sample2.php.....
But you cannot create infinite number of page.
2)Use salting in URL, ie sample.php?rand=1,sample.php?rand?=2....
This rand parameter will keep updating all the time and on each request to server you will generate new image.
There are other advanced ways also ,but this are the one to get started.

Your error is here.You have not assigned id to your image tag and in your js code you are trying by button id.
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
function refresh(){
document.getElementById("imagid").src="sample.php";
}
Note :
Make sure you the IDs for button and image tag.No two elements should have same Ids.
Hope this helps...

Related

Need to change the javascript to link up with my button, but make the button get widgets from a RESTapi

I have a button on my html code:
<input type="button" id="myBtn" value="Next Widget" onclick="next()">
and on my javascript I have:
images = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg'];
page = 0;
function next()
{
page++;
page %= images.length;
document.getElementById('myImg').src = images[page];
}
Also on HTML code:
<div>
<img id="myImg" width="auto" height="auto" src="img/1.jpg" alt="1">
<br>
</div>
Basically I need to change it from the saved images source to a RESTapi Url, which is sorted by id (1 to 10).
Not sure how I do this. Can anyone give me an idea.
Do I have to declare the RESTapi Url first on the javascript?
I have tried just pasted the URL in the src="My URL here". But this only shows me a broken link.
If you have direct image url you can just copy paste in your images array. If it is not the case then you will have to load your images or data first through rest api call.

Show Loading Gif On Click Submit Button

i am using upload picture plugin for my website and when users click on submit on mobile devices they can't see any progress so they click submit button again and again and i get too many same posts, i want to show loading gif image when they click on submit button , this is the plugin form
<form id="usp_form" method="post" enctype="multipart/form-data" action="">
\\rest code here
<input type="submit" class="usp-submit" id="user-submitted-post" name="user-submitted-post" value="<?php esc_attr_e('Submit Post', 'usp'); ?>">
</form>
and i have tried this found on stack but it didn't work
<img src="https://www.punjabidharti.com/wp-content/plugins/wp-email/images/loading.gif" id="img" style="display:none"/ >
<script type="text/javascript">
$('#usp_form').submit(function() {
$('#img').css('visibility', 'visible');
});</script>
and here is my upload pictures url
https://www.punjabidharti.com/upload-pictures/
hope you can help me out
Use a div with display: none inside your layout file and make it display:block when needed
<div style="z-index: 5000; display:none;" id="loadingDiv">
<table style="margin: 0px auto;">
<tr>
<td style="padding-top:200px;" align="center"><img src="https://www.punjabidharti.com/wp-content/plugins/wp-email/images/loading.gif" alt="loading image"/></td>
</tr>
</table>
</div>
$('#usp_form').submit(function() {
// javascript way
document.getElementById("loadingDiv").style.display = 'block';
// jquery way
$('#loadingDiv').show();
});
Update
layout level files can be any of following:
layout.html
index.html
header.html
footer.html
You may try another gif image for example https://i.stack.imgur.com/rBLb3.gif
You've added 'style="display:none"' in your img but in code you're doing:
$('#img').css('visibility', 'visible');
You should do:
$('#img').css('display', 'inline-block');

Clear form after submit image in Meteor

I’m using CFS for files upload in my Meteor App, almost everything works fine, except because when I try to upload another image, I see my previous sended image in the form, so I need to clear that form after submit the image. I've tried with .reset but it doesn't work. This is my code right now. Thanks for the help.
NewImage.html
<template name="newImage">
<div align="center">
<form align="center">
<div>
<div>
<span class="btn btn-success btn-file">
<input type="file" accept=".gif,.jpg,.png" class="myFileInputimagepub" id="image"/>
</span>
</div>
<div>
<img src="{{currentUser.profile.image}}" alt="Image" width="60px" height="60px" class="img-circle avatar-upload" value=''/>
</div>
</div>
</form>
</div>
</template>
NewImage.js
import './newImage.html';
Template.NewImage.events({
'change .myFileInputimagepub':function(evt,tmpl){
FS.Utility.eachFile(event,function(file){
fileImagespub.insert(file,function(err,fileObj){
if(!err){
var userId = Meteor.userId();
var imageurl = {
'profile.image':'/cfs/files/fileimages/' + fileObj._id
};
setTimeout(function(){
Meteor.users.update(userId,{$set:imageurl});
},2000);
}
})
})
},
'submit form':function(event,template){
event.preventDefault();
template.find("form").reset();
}
});
If the image in question is the one with class .img-circle, the issue is that its src attribute is being dynamically provided. Currently it is currentUser.profile.image. This won't clear just by resetting the form and manually clearing the image's src value would be fighting the framework.
Option 1 (Not Ideal):
If you don't want to keep the image, unset the database change made after the file upload by running something like this:
Meteor.users.update(userId, { $set: { 'profile.image': null }});
This is not ideal as it enables you to continue modifying the database with an image which may not be needed long-term.
Additionally, I'm assuming you're currently using the autopublish/insecure packages. You'll want to remove these before going public with your app as they allow any user to change the database without restriction.
Option 2:
You could save the returned value from your 'change .myFileInputimagepub' event as a ReactiveVar, then only actually run Meteor.users.update (preferably on the server using a Method) when your user submits the form. At that point you could clear the reactive variable.
Using a ReactiveVar will allow you to provide the saved URL to the src attribute via a helper, and then change the ReactiveVar's value when you wish to clear the form.
There's a simple example of manipulating ReactiveVars here: https://gist.github.com/ahoereth/a75d2d6528b1844ad503

Store image canvas to database php local storage

I've been stuck for so many days on this.
I'm seeing a lot of the same problem like this, but some of the codes from them won't work on me. To be precise, I'm not using php 5 nor 7. But this is what I've got so far.
(Assuming there are drawings in this canvas) my html:
<canvas id="displaycanvas" height="400px" width="700px" style="position:absolute; background-image:url('images/canvas_pattern.jpg');background-attachment:fixed;"> </canvas>
<canvas id="display_text" height="400px" width="700px" style="position:absolute;" > </canvas>
<input type="button" name="btn" id="submitBtn" value="display" class="btn btn-primary" />
And I successfully converted my canvas to image and displays it!
$(function () {
$("#submitBtn").bind("click", function () {
var display01 = $('#displaycanvas')[0].toDataURL();
$("#show_canvas").attr("src", display01);
$("#show_canvas").show();
});
});
display part of the image: (works fine)
<img id="show_canvas" name="show_canvas" height="400px" width="700px"/>
now after displaying, I have a button "save" which means to store the image or canvas in my database and it executes at the "submit.php".
but I'm stuck on how am I going to store it in my database...
right now I only have a primary key on my "Image_table", not sure what are the right attributes to add.
Thank you in advance!!

AutoIt Clicking a onClick Javascript button with no name or id only class in IE

Trying to script a button click on a button on the amazon website that looks like this:
<span class="action-go" onclick="MYO.JS.handle_action($(this).parent().find('.action option:selected').attr('value'),
$(this).parent().find('.action option:selected').attr('url'));">
<input width="21" height="21" align="absmiddle" type="image" src="https://images-na.ssl-images-amazon.com/images/G/01/abis-ui/buttons/go._V187564664_.gif" border="0">
</span>
<input width="21" height="21" align="absmiddle" type="image" src="https://images-na.ssl-images-amazon.com/images/G/01/abis-ui/buttons/go._V187564664_.gif" border="0">
This is what I have tried:
Func GetButtons()
Local $oBtns = _IETagNameGetCollection($g_oIE, "span")
For $oBtn In $oBtns
If String($oBtn.classname) = "action-go" Then
_IEAction($oBtn, "click")
EndIf
ExitLoop
Next
EndFunc
Solution that Worked
Func ClickButton()
$HWND = _IEPropertyGet($g_oIE, 'HWnd')
WinSetState($HWND, "", #SW_MAXIMIZE)
_IEAction($g_oIE,"visible")
_IELoadWait($g_oIE)
MouseClick($MOUSE_CLICK_LEFT, 290, 354, 2)
EndFunc ;==>GetButtons
I don't have the time to script you a solution, but i can tell you how I would do it. The trick is to not click on the button, but its position.
This only works if the GUI allways has the same proportionalities.
You detect the position of the window. As long as it has a name this should work.
You detect the position of the button relative to the window, by useing AutoIt Window Info.
You add both values and click on that position.
You can click on a position by useing MouseClick.

Categories