I have a frameset with an iFrame with a form in it.
When I submit the form IE8 does not send the form values. Firefox does.
Without the ambient frameset it works.
This is my code:
form.php:
<form method="post" action="doit.php" name="myForm" id="myForm" target="myFrame">
<input type="hidden" id="customer__csrf_token" name="customer[_csrf_token]" value="0136dba17fc1a81dc2c3b44dcb513712" />
...
<a onClick="document.myForm.submit();">Send</a>
</form>
site.html:
<iframe id="myFrame" name="myFrame" src="form.php" frameborder="0" >foo</iframe>
index.html:
<html>
<head></head>
<frameset rows='100%,*'>
<frame name='target' src='site.html'>
<noframes>foo</noframes>
</frameset>
</html>
I also tried to submit the form with these calls:
$('#myForm').submit();
document.forms['myForm'].submit();
parent.frames['myFrame'].document.forms['myForm'].submit();
<input type="submit" value="send" name="send" id="send" />
Can you help me?
EDIT:
I found the problem. I use the symfony framework. symfony uses a hidden csrf token in combination with a cookie value to secure the form trasmission. For some reason in my case IE8 is not able to store this cookie. Now I removed the csrf token from the form to get it working correctly.
CSRF was not the main problem. The problem in my case was caused by the IE security settings. IE does not allow a.o. cookies from domains with an underscore in it.
My domain was foo_bar.dev.domain.com, after chaning it to foo-bar.dev.domain.com it worked, also with enabled CSRF.
Related
We implemented a simple nuxt app with a basic form and deployed it to netlify.
When pressing the "Submit" Button of the Form, we receive a 404.
Here you can find the link to the deployed netlify app:
EDIT -> Removed Link
After looking through the troubleshoot guide, they listed that the added "netlify" or "data-netlify="true" attributes should not be visible if netlify recognized your form, but they are.
Plus the form can't be found in the "form" configuration tab of the netlify backend.
Nuxt config:
SPA
Tailwind
We tried to add the necessary attributes for netlify:
netlify or
data-netlify="true" & netlify-honeypot="bot-field"
We also added a "pre-render" library called prerender-spa-plugin.
Here you can find the contact.vue page content.
Simple form with "name" attributes set according to netlify documentation.
<template>
<div>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<p class="hidden">
<label
>Don’t fill this out if you're human: <input name="bot-field"
/></label>
</p>
<p>
<label
>Name
<input
type="text"
name="name"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<label
>Email
<input
type="email"
name="email"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<button
type="submit"
name="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Send
</button>
</p>
</form>
</div>
</template>
<script>
export default {};
</script>
<style>
.hidden {
display: none;
}
</style>
It would be great if we can manage to fix this, so that netlify finally recognizes our form.
Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.
The form is required to be in the rendered files at deploy time. The problem with SPA mode is that none of your pages are actually rendered as HTML. You can check this by right clicking the page, and clicking "View Page Source". You won't be able to find the form.
Netlify addresses this problem here in their docs.
They have a specific post for fixing this for a Vue app here
A little more digging on the the issue and we find a Nuxt solution here:
Place the following in static/form-dummy/index.html:
<form name="MYFORM" action="/form/success" netlify>
<!-- form controls here -->
</form>
Place the following in pages/form/index.vue (Or whenever you've named your Vue file)
<form name="MYFORM" action="/form/success" method="post">
<input type="hidden" name="form-name" value="MYFORM" />
<!-- form controls here -->
</form>
From the post:
You just need to make sure you add that hidden in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.
I'm using ASP.NET web forms and i need to post data to an iframe, the problem is that in web forms I have the main form tag(form1), so i need another form tag(form2), to post data to the iframe that is in the main form1.
Basically i have this:
<form method="post" id="form2" action="http://localhost:58903/WebForm1.aspx" target="webApp">
<input type="hidden" name="ValidationUserName" value="david" />
<input type="hidden" name="ValidationTokenId" value="13123132132" />
<button type="submit">Send info to inner iframe</button>
</form>
<form id="form1" runat="server">
<iframe id="webApp" name="webApp" src="http://localhost:58903/WebForm1.aspx" style="width: 800px; height: 800px;"></iframe>
</form>
With this approach in open a new tab, if i put the iframe outside it works ok, but if i do this the layout is changed and i don't want this.
Is this possible?
If all the forms are in the same domain you should not work with iframes.
What exactly are you trying to get here? didn't realize completely
Done it, it was missing the "name" attribute in the <form> tags.
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>
I'm having a bit of trouble with my form submission, and I'm afraid I need some advice.
I have a form where I want a user to submit some text, and when they press submit it will take them to an action page where the input will be processed. I wrote some code, only to figure out when I test it in Dreamweaver the submit button isn't working correctly.
Code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Test Page</title>
</head>
<cfinclude template="head.cfm">
<cfform name="select_action" action="testaction.cfm" method="post">
Enter some text here
<input type="text" size="50" value="Enter some text here" maxlength="150" name="someText"><br>
<INPUT TYPE="RESET" NAME="reset" VALUE="Reset Form">
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit Form">
</cfform>
<cfinclude template="foot.cfm">
I have Dreamweaver correctly configured for testing, because I can reset the form and it shows up properly etc. Just the submit button doesn't take me to anywhere.
I feel that there's something extremely obvious I'm missing, any advice?
Thanks for your time,
Jordan
While testing in Dreamweaver may seem like a good idea, I haven't found it helpful at all. You should have your page open in several browsers at once, such as Firefox and Chrome. Test the behavior of your pages in real browsers, not Dreamweaver.
Also, I would use CFFORM only if you need CFFORM. From the looks of your elements, you don't need it.
I have a login form written in PHP and each time I start the browser and go to the respective page, the first field of the form is this:
<input type="hidden" name="PHPSESSID" value="session_id_code" />
If I close the window, but I don't restart the browser, this doesn't happen. Any idea what's happening and why?
Thanks!
Form's code:
<?php
if (condition) {
?>
<form method="post" action="">
<dl>
<dt>Email:</dt>
<dd><input type="text" name="useremail" /></dd>
<dt>Password:</dt>
<dd>
<input type="password" name="userpass" /></dd>
<dt class="dt-buttons"><input type="submit" name="button_login" value="Login" class="button" /></dt>
</dl>
<input type="hidden" name="formkey" id="formkey" value="224ca00155w2fcda8906e1e40af03a71" />
</form>
<?php
}
?>
The form is simple HTML and is not dynamically generated.
EDIT2:
As I was saying, when I access the page for the first time after I started the browser, this thing happens. If I refresh the page afterwards, the hidden field doesn't show up.
Is it possible to have something to do with the SSL certificate? And if yes, why some pages/forms behave like this and some don't?
Sounds like you've got trans_sid enabled (transparent session id). Using trans_sid can be a security issue, especially if your site links to external content, or you allow link sharing - it lets a user's session ID leak out as part of the URL, meaning the session is highly vulnerable to hijacking.