I'm using the following html beginning form code:
<form id="uploadpic" method="post" target="uppic" name="upform" action="/cgi-bin/inpost.cgi" enctype="multipart/form-data">
to try and load a page, however the page opens in a new tab.
I don't think this is part of the problem, but I'll include this anyways. This is the submit button code in the form:
<input name="filename" id="filename" type="file" onchange="submitFormAfterImageCheck();" />
And this is the function it calls:
function submitFormAfterImageCheck()
{
if(/(\.jpeg|\.jpg|\.JPG|\.gif|\.png|\.tiff)$/.test(document.getElementById("filename").value))
{
nogo = "go";
document.getElementById("uploadpic").submit();
$("#upload").html("<center>LOADING...</center>");
$('#link').hide();
$('#update_post').hide();
}
else
{
alert("You can only upload an image.");
}
}
iFrame code:
<iframe id="uppic" name="uppic"></iframe>
Why isn't this submitting to the iframe?
I also faced the same problem and found a work around.
When you set the target attribute of a form statically (as you are doing), even if the target iframe is in the same window, response is received in a new tab/window.
You can override this by setting the target attribute of form dynamically using javascript/jQuery.
javascript:
document.getElementById(formId).target = iframeId;
jQuery:
$("#formId").attr('target', iframeId);
Hope this helps.
If you are not having issues with your DOM elements (as #johndoe noted in his answer) and you are still having the problem when setting the target using Javascript (as #naren noted in his answer) then this should solve the problem:
Give your iFrame a name attribute and set your form target to that value:
<iframe name="myTarget"></iframe>
<form target="myTarget" method="post" ...></form>
The placement of the DIV element seemed to be the problem. While it was placed within the form tags, it never redirected once the form submitted. When removed from the form tags, it redirected fine.
Related
I've created a form on my website using Google Forms, and through a couple of tutorials I've prevent the page from navigating to the Google Forms thank you page and instead using my own thank you page.
The way this has been done is using a hidden iframe as a target on the form and then the iFrame checks if the form has been submitted successfully before switching the window to my thank you page.
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted == true)
{window.location='https://www.normadorothy.com/sample-thanks';}">
</iframe>
This works fine and submits the form before showing the thank you page, however if the user then clicks the back button, the form is submitted again.
I've tried console.log(submitted) which returns false so not sure why this is being submitted twice.
Just for clarity, the form code is:
<form id="sample-form" class="validate" action="google-url" method="post" target="hidden_iframe" onsubmit="return validate();">
The validate function checks all the fields, sets submitted to true and then submits the form.
Any help would be great, I've been banging my head against a wall with this!
I would guess this is happening because the back button tries to take you back to the iFrame's last known state (which is the form POST URL) and not the "raw" state you expect. You could try writing the iFrame using JS on the parent page to work around this:
var iframe = document.createElement('iframe');
iframe.onload = function() { if(submitted == true) {window.location='https://www.normadorothy.com/sample-thanks';}};
iframe.style.display = 'none';
document.body.appendChild(iframe);
I am trying to submit a mailchimp form from within my DNN (DotNetNuke) site. Typically, you just remove the form tags and put some javascript in the onclick event of the submit button...like here. This works and you can see as such here.
But, I am using this popup module, as I want this form to pop up when someone comes to the site. And in this configuration it does not work. It will submit the form to the designated URL, but no form data is passed. This page is here.
A couple of observations:
When you view the page source, the popup form is within the form tags, yet a this.form returns null in the script.
When you inspect the submit button element in Chrome, you see that the html form is then OUTSIDE the form tags.
So maybe there is some javascript with this popup module that is moving the DOM element on page load???
I created a js function to call on the input button submit; code is as follows:
function submitSubscription(clickedElement){
$form = $('body').find('form');
$form.attr('action', 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4');
$form.submit();
}
Note: in this function clickedElement.form is returning null.
Because your content is not in a <form>, you're going to put it inside a <form> in order for your script to work. You can either dynamically create a <form> element, or move your content back inside the main <form> when you submit. Try something like this:
function submitSubscription(clickedElement){
var $form = $('<form></form>', { action: 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4' });
$('#mc_embed_signup').wrap($form);
$form.submit();
}
There are several variations of this question already out there but I don't see the solution to this one specifically. Although I don't actually need this functionality it is killing me that I CAN'T make it work!
I have a field that allows the visitor to type in a URL and it will take them there.
<form name="urlField" onsubmit="return submitURLFieldForm();">
<input type="text" name="address" id="addressfield" />
</form>
The JS that handles this so that the necessary protocol is not left off is (special thanks to #h2ooooooo ):
function submitURLFieldForm() {
var url = document.getElementById('addressfield').value;
if (!url.match(/^[a-zA-Z]+:\/\//)) {
url = 'http://' + url;
}
window.location.href = url;
return false;
}
If I add a target="_blank" to my opening form tag it doesn't work. Why? And where should I add it?
You are never submitting the form.
You have an event handler that, when the form starts to submit, sets location and prevents the normal form submission.
Use window.open(url) instead of that if you want to open a new window.
var win=window.open(url, '_blank');
win.focus();
You can try this :)
happy coding :)
I have a link which when clicked I open a window with window.open like below.
window.open("edit.jsp?clientId=" + clientId + "&eventId=" + eventId , 'height=600,width=800,scrollbars=1,location:no,menubar:no,resizable=1,status:no,toolbar:no');
I dont want the parameter to pass here instead I want to something like post so people cant copy url .
You cannot trigger a javascript popup and then force a post request.
Three options:
Trigger a POST form with target="_blank" using javascript (but this doesn't allow you to disable interface elements such as the menu bar).
Open a popup locally, but don't specify a url. Use the result of window.open to alter the document to generate a form, which you'd then post.
var myWindow = window.open("", "", "height=600,width=800,scrollbars=1,location=no,menubar=no,resizable=1,status=no,toolbar=no");
myWindow.document.write("Write a form here and then later on trigger it");
You really shouldn't do any of this. If it's bad for users to copy urls, there's a flaw in your application design.
Added after edit: Use the 'empty window' approach, but instead of writing a form and triggering it, do a an XMLHTTPRequest (with POST) in the parent. The result of this request can be used to populate the child-window.
Beside AJAX (jquery.load()), which I would use myself - how about the following approach:
<form method="post" action="edit.jsp" target="_blank">
<input type="hidden" name="clientId" value="88"/>
<input type="hidden" name="eventId" value="2"/>
</form>
target = _blank will actually open a new window /tab the posted data will be processed in.
Unfortunatelly you can hardly control the new windows appearance.
How about implementing a model popup window using a div? You can make an http post call to load the content of that div/model popup. You can use jQuery load() method to load the content of the div as well.
http://api.jquery.com/load/
Some other model popup plugins are here
http://jquery.com/demo/thickbox/
http://colorpowered.com/colorbox/
http://fancybox.net/
I have a form with a submit button and it works fine, but I now have a user request to make the form get saved (posted to save action) if a link on the page is clicked and the form is "dirty".
I've got the logic in place by having an isDirty JavaScript variable, now I would like to post the form from the JavaScript function when it is dirty.
My form declaration is as follows:
<form id="formSmart" action="<%= ResolveUrl("~/SmartForm/Proceed") %>"
method="post" enctype="multipart/form-data">
and my JavaScript is:
function checkLink() {
if (isDirty) {
$("#formSmart").submit();
}
}
The proceed action doesn't get called, yet when I click the submit button on the form it works fine. What am I doing wrong in the JavaScript?
Note: The call to checkLink() works fine, the ultimate problem is that $("#formSmart").submit(); is not posting to the Proceed action.
You have the correct way of submitting the form based on what you have posted and the names match up.
Are you sure you are calling checkLink and is isDirty equal to true?
Put and alert('Test'); right before you submit and in the if scope.
EDIT: To hookup your event you need to do the following:
$('#yourLinkID').click(checkLink(); return false;);
Note the return false which will cause your link to not execute a navigate. If you want the link to navigate, you can just remove that part.
Sounds like the requirement is that 'a link on the page is clicked'.
Perhaps attach this event to all the <a> tags on the page.
$(document).ready(function() {
// all <a> tags get the checkLink attached to them
$("a").click(checkLink());
});
your problem is that the browser navigate before the page performs your submit.
the solution is suspending the navigation till you save the form.
The UGLY solution:
you could do it buy saving the clicked url at a hidden field,
returning false to stop the navigation,
and after submit check for a value there and if it exists do navigation
A better solution:
post the form via ajax and after the ajax call completes(no need to check for success or error) perform the navigation(to make it really easy just use ajaxForm ajaxForm plugin)
the only problem with this solution is if the link has target="_blank" because then you have to use window.open which might be blocked by popup blockers
you can play with a simple jsbin sample i prepared showing this
this example post some values to an older version of this page + navigate to google, open fiddler and see that it first post and then navigate.
If you went to the jsbin page stop reading here
here is the Html:
<form id="formSmart" action="http://jsbin.com/oletu4/edit" method="post">
<input type="text" name="someLie" />
<input type="text" name="someLie2" />
<input type="submit" value="submit" />
<a id="lnkNavOut" href="http://www.google.com">www.google.com</a>
here is the JS:
$(document).ready(function(){
$("#lnkNavOut").click(function(){
var jqFormSmart = $("#formSmart");
//check here if the form is dirty and needs to be saved
var jqClickedLink = $(this);
$.ajax({
url: jqFormSmart.attr("action"),
type: "POST",
data:jqFormSmart.serialize(),
complete:function(){
location = jqClickedLink.attr("href");
}
});
return false;//stop navigation
});
});