I have a page with two forms. One of them is not visible and contains input type="file". I am uploading file with the hidden form(target of the form is an iframe element). My question is how to stop/cancel uploading of the file with javascript under IE. I have tried to remove the hidden form with JQuery and the file is still uploading.
Thanks in advance.
OK. I found this site looking for the same thing but these solutions did not work for my scenario. I too have an iframe target for my form and wanted to cancel the upload. These solutions did not work for some reason (IE7). I hope the following helps.
The issue was that the response sent from the servlet indicating 'file too big' was not triggering the target iframe onload event.
Try:
targetIframe.contentWindow.document.open()
targetIframe.contentWindow.document.close()
This fooled the iframe onload event into triggering and cancelled the upload automatically.
You probably want something along the lines of window.stop() (applied to the iframe).
This old thread reports that while window.stop() doesn't work in IE, the undocumented window.document.execCommand("Stop") does (at least in IE5).
You might also consult this StackOverflow page, which has basically the same answer, although a few other tricks are proposed.
Thanks for the replies.
As far as I debugged that case I got the following result :) - it is not possible to cancel upload. The methods above cancelled the page to receive the response and the file is uploading to the server side.
Here is the mark up of my prototype:
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<input type="button" id="button1" value="stopUpload" onclick="stopUpload()"/>
<script type="text/javascript">
function stopUpload() {
var frame = $get("iframe1");
frame.contentWindow.document.execCommand("Stop");
}
</script>
</div>
</form>
<form id="form2" enctype="multipart/form-data" action="http://localhost/TestingSite/Default.aspx"
method="POST" target="iframe1">
<input type="submit" />
<input type="file" name="FileUploadTest" id="FileUploadTest"/>
</form>
<iframe id="iframe1" name="iframe1" width="500px" height="500px" ></iframe>
Related
I am loading two scripts on my websites:
<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
Where my_site.js looks like this:
... many other functions, not nested
function captachaCallback() {
console.log("Captcha");
}
... other functions
Then in my form I am using:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.
I am using the latest Chrome.
Thanks in advance
The problem was that I had a CSS setting affecting all divs on my website.
div { overflow: hidden; }
Apparently this makes the popup window with the captcha test invisible.
Removing this setting solved the problem.
I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>
Hope this helps.
You're not rendering the captcha.
The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.
The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.
Instead of:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Render it like:
<div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
Wrap it up inside a form. You already have it, so just modify it.
Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.
The structure should look something like this:
<form action="?" method="POST">
/// The other elements in your form
/// ...
<div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
<br/>
<input id="btnSubmit" type="submit" value="Submit">
</form>
Also be sure to look up the documentation ;)
https://developers.google.com/recaptcha/docs/display
I'm trying to create a button with an onclick function that activates the imggrabscreen php function. Problem is, I've done several codes and so far the only function that I was able to use was a submit input type in which this refreshes the page. I tried using button as an input type but unfortunately, it does not save any screenshots upon clicking the button. Here's the code that I'm using so far.
if(isset($_POST['btnscreen']))
{
$im = imagegrabscreen();
imagepng($im, "screenshot.png");
}
ob_end_flush();
?>
<form method="post" action="" enctype="multipart/form-data">
<br>
<input type="submit" value="Click to Screenshot" id="btnscreen" name="btnscreen"></center>
<br><br>
</form>
php is parsed and executed server side (pre-processing) so you cannot call any php functions after the page has been sent to the browser. The only way to do this is to make a new request to the server (ajax).
I can't quite grasp what your function does (php cannot make a screenshot of what your browser is displaying as it has no information of how it has been rendered - please note different browsers may display the page differently).
I would try reading up on html5 canvas element which can achieve that (e.g. https://html2canvas.hertzen.com/).
Hope this helps
I have a problem with my code. I want to change the iframe url when the submit button is clicked, but it isn't working. I have found some questions about this, and I found GoToGoogle function where it must forward to google. So that's all of my code for the page.
<script>
function sendMeToGoogle(){
document.getElementId('changeme').src="http://google.com/";
}
</script>
this is test
<iframe src="test" ID="changeme" ></iframe>
<input type="submit" onclick="sendMeToGoogle();" />
Can someone help me?
Your problem is that you are not calling the right Javascript function. You should be calling
document.getElementById but instead you are calling document.getElementId which doesn't exist.
In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...
I have a jquery fancyzoom box. In that box ,I have a contact form which sends an email on submission. But I am not able to call form submit function due to fancyzoom.
Code is like :
("req_quote.php")
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popup1_link').fancyZoom({width:610});
$("#submit").css('cursor', 'pointer');
$('.reqfrm').submit( function(){
alert("hell");
});
});
</script>
<body>
<form class="reqfrm" id="frm">
<input type="text" name="name" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Above file is included in "index.php" which contains the actual link to open the form in fancyzoom box.
(index.php)
< a href="#popup1" id="popup1_link">< div class="blink">Request a Quote< /a>"
If I remove $('#popup1_link').fancyZoom({width:610}); then i get alert on submission otherwise it goes on form action directly.
Are you getting any JavaScript errors with the fancyZoom call in? Are you including the script file you need to use it? It's hard to say without seeing some more data, or a jsbin / jsfiddle.
The form is submitted in the fancybox js file.
As mentioned by Raul, you need to provide more info for us to help out. You could try any of these things:
See if you can reproduce this issue within a simple html file, that doesn't have any of the extra stuff that your current page may have. If the issue still persists, put it into jsFiddle and post the link here.
If you haven't already, install the Firebug addon for Firefox, and use it's console to check for any JS errors.
Have a look at the jsFiddle that I've created. Is this similar to what you are doing? Mine works wihtout any issues.