Firefox HTTP Form Action doesn't fire - javascript

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...

Related

Redirect not happening After button click but same code works from Dev Tools Console

I have the following JS function:
function cancelClick() {
location.replace('Employers_Welcome.aspx');
return false;
};
And then I have the following htmllocated within an ASP.NET WebForms page:
<div class="divTableCell-2">
<div class="field-container">
<button id="CancelBtn" class="ViewLogButton buttonStyle" onclick="cancelClick()">Cancel</button>
</div>
</div>
When I click on the button the cancelClick() function is reached ( I can see this in the Debugger). However the redirection does not occur and instead the page just reloads.
However, if I instead call cancelCick() directly from the IE11 Dev Tools Console on that same page the redirect works.
What am I missing? For what it is worth I have tried different variations of the actual JS redirect code (document.href, location.href etc) and I got the same outcome with all of them.
This button may be in a form. Given that the default type of a button is sumbit the form is being submitted and the page reloads. Adding a type=button will remove the default submit behavior from the button.

Page transition on form button?

I'm trying this on my site
http://www.fasw.ws/demos/transitions1/slide1.html
everything is working good but not when i add data-ftrans="slide" to a form button.
example:
<form action"http://google.com"> <button data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
What does i need to change to get this working ?
I think you must change your button to a depend on the context.
And must have 2 attribute 'href' and 'data-ftrans'. It'll run function slideTo(href, effect, pushstate) in the context.
href: one html page
data-ftrans: transition type
Maybe, you want to submit then change to another page (but not submit page)
<form action="your server script" method="post">
<button click="ajax_submit"></button>
Hide
</form>
<script>
function ajax_submit(){
//do some ajax code
//when success
//a.click();
}
</script>

onsubmit property fails to open new window

A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!
The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.
<form id='testForm' action='another.jsp' target='_blank'>
I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>​
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};​
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/

How to show a hidden div with javascript when submitting a form?

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>

Display confirmation popup with JavaScript upon clicking on a link

How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.

Categories