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.
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 am using a simple form that was taken from one of the Netlify related docs:
<form name="contact" action="/" method="post" data-netlify="true">
<div className="field">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value="dave"/>
</div>
<div className="field">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value="email#email.com" />
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
<input type="submit" value="Send Message" className="" />
</form>
In using gatsby develop and working with/submitting the form, things seem to work fine. I get no errors and get redirected to the home page as expected.
After deploying the site with Netlify and trying to submit the form, I get the following page error:
In my Netlify backend, the form appears in the console but I cannot/do not receive submissions.
I am using a barebones gatsby-config.js, only incorporating gatsby-source-wordpress and gatsby-plugin-google-analytics.
I also tried adding /no-cache=1 to form action.
Can anybody advise?
It might also be worth noting that I have coded my form as a component and am importing it into my footer as such. In that way, it may be imported multiple times on different pages as mentioned in point 3 of this StackOverflow answer.
Thanks.
I learned that because I'm using Gatsbyjs, and Gatsby + Netlify = javascript forms, I needed to add another input type="hidden" to my form:
<form name="my-form" ... >
<input type="hidden" name="form-name" value="my-form" />
The documentation for this wasn't immediately clear but below are some links that address this:
Here's a link to an article that pointed me to the answer: How to
Integrate Netlify’s Form Handling in a React App
Here's another one if you're building in Vue: How to Integrate
Netlify Forms in a Vue App
And all about Netlify Forms
If you are using any redirect method then you have to add _redirects file in your root folder and add paths to it so that redirect can work.
It's may be confusing but you can visit this link for more help.
I'm not sure what to put in for href:\ Should I reference a mailhandler.php or use a mailto: command? Or is there something better?
<h3 class="margin-bot">Newsletter!</h3>
<form id="subscribe-form" name="sibscribe" method="post">
<label><input class="subscribetext" type="text" onFocus="if(this.value =='Enter E-mail:' ) this.value=''" onBlur="if(this.value=='') this.value='Enter E-mail:'" value="Enter E-mail:" name="keyword" /></label>
<a onClick="document.getElementById('subscribe-form').submit()" class="button" href="#">subscribe</a>
</form>
I think it is meant for the site to which you get after pressing the subscribe button. Preferably the page the form was implemented in (for example to return to the index.html).
You can try it by testing it here on jsfiddle (http://jsfiddle.net). Just put an URL in the field where now is the # and after pressing subscribe you will see that you'll be redirected to that page.
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.
I am trying to build an facebook-iframe application, where you can select friends to send them some information.
So i build a form method="post", put in some input fields, and a friend selector.
The fb:friend input field is renderd .. works fine.. but it doesn't pass over the selected friends.
Do i have to fix it by javascript?
Is there a simpler solution?
thx sven
Code:
<form action="http://xxx.net/index.php" method="post" target="_top">
<input id="sometext" name="sometext" type="text" size="30" maxlength="30">
<br/>
<fb:serverFbml>
<script type="text/fbml">
<fb:fbml>
<fb:friend-selector uid="$user" name="$user" idname="friendselector"/>
</fb:fbml>
</script>
</fb:serverFbml><input type="submit" name="submit" value="Send">
</form>
Actually, to my knowledge you can't fix it with Javascript.
I need more details (!), but it sounds like you may be attempting to use the FBML implementation of fb-friend-selector, without fb-request-form.
If so, try this: https://developers.facebook.com/docs/reference/fbml/request-form/
(!) Can you post your HTML code here? It's likely an implementation issue that we can figure out through your code.
Ok, i am not alone, so here is an other way to cope with it.
Facebook-like styled Multifriendselector.
http://mike.brevoort.com/2010/08/10/introducing-the-jquery-facebook-multi-friend-selector-plugin/