Sorry if this one has been answered somewhere else but couldn't quite find the fool proof answer I need.
I have a update form page that contains a number of iframes, each iframe contains another form. I need to be able to hit submit on the parent page and as well as submitting the parents form fields but also the iframes form fields all to the same php script.
Looks like javascript is the way to go but I am a complete beginner with javascript so need some extremely dumbed down help and how to.
Related
I am modifying an existing plugin, and it has a form. The perfect place for me to add my code is at the end of the form but before the submit button. I want to add a form that will allow users to enter their credit card info, but nesting my form within the plugin's form is causing problems.
I was wondering if it would be possible for my form nesting to somehow work with AJAX. So basically, I just need 4 input areas (CC#, Exp date, CCV, amount) to be submitted that to Braintree's servers. I need to maintain PCI compliance with anything I do, so is this possible? Is it recommended? If not, what is?
EDIT - I found a question on here that made me wonder if it would be possible to separate the 2 forms but use CSS to make it look like my screenshot. Below is a quote from one of the question's answers.
Why not place the input inside the form, but use CSS to position it elsewhere on the page?
Update - I'm still confused...
It is against the standards to do nested forms like you are thinking. (See this question for more about that: Can you nest html forms?)
That doesn't mean that you can't have the form send data to multiple locations on submit. Register a submit handler for the form with two ajax methods. The first takes the four pieces of data and sends them to your server. The second grabs the rest of the data and sends it to the location specified by the form.
I have several forms on a page. The forms are actually PayPal "add to cart" buttons. When a user clicks on a button, an alert box asks for their zip code. If the zip code in in the array of okZips, I want to programmatically follow the link through the submit button to the cart, but I just can't quite get the correct element to attach .submit() to.
$(this).add("div.check-zip").add("form:first").submit();//this submits the first form on the page
$(this).add("div.check-zip").add("form").submit();//this submits the last form on the page
$(event.target).add("form").submit();//this doesn't submit anything
$(myEvent).add("form").submit();//this submits the last form where myEvent is a global variable
The pen can be found here:
http://codepen.io/enielsen0001/pen/KwEbzz
How do I select the correct element to apply the .submit()? Am I going about this all the wrong way?
You are not going all the wrong way but it is definitely the baddest and dirtiest way. It seems like you don't know what you are doing. Your classes are messed up, you are mixing jQuery and plain js, you are using while and for. It seems like you have deliberately copy pasted code with no idea what it is. Please have atleast beginner's js/jQuery knowledge before posting questions.
However, here is the updated pen http://codepen.io/anon/pen/NPJJwJ.
You would need the actual form object for submit to work.
// myEvent is event itself not element
$(myEvent.target).parent("form").submit();
I have refactored stuffs involving while and for loops you used. Compare your code with updated code. Hope it helps:
I have a multi-step form for capturing leads and generating potential client estimates. I modified a framework that I found elsewhere on the web. The form looks and works beautifully now, but I need to pass the values from the form through PHP to email. I'm not a stranger to this process, but I believe that something in the Javascript required to make the form beautiful and interactive is voiding the values that should be passing from the form to the email.
What I have done to test (trust me, I hate to bother people, but this is driving me nuts):
I eliminated the fieldsets and any other extra form-formatting, all links to CSS and Javascript. I tested the form and it worked as expected. I took the name in the name="name" field and emailed it to me no problems.
I systematically reconstructed the form until it was complete with fieldsets and CSS. I tested at every step and the form continued to pass the name into the email.
Finally, I added the javascript used for transitions and calculations to the bottom of the page and it no longer performs as expected. It triggers the PHP, but it doesn't redirect as I want it to. and it sends the labels in the email, but doesn't pass the values from the form. If I move the Javascript links to the head, the transitions don't occur making it impossible to navigate to the submit button. Any clues?
Here is the link to the form: http://bigislandwebsitedesign.com/test_form.html
You can follow the links to the various scripts from the source.
I would like to POST a form in an iframe, generated like so:
My JS loads an iframe inside the page, adds a form to the iframe and submits the form. What I would like to happen is the iframe to load the result of that request. So, I would effectively like to post a form and render the result inside the iframe, without touching the parent (apart from putting the iframe up for display in the first place).
I am using the code from this answer:
JavaScript post request like a form submit
but I can't get it to not reload the parent. I post the form, and instead of the iframe refreshing, the entire parent refreshes. I don't know why that is, since the url it's posting to is different and would at least redirect there.
Can anyone help me with this problem? I just want a post inside an iframe and only within the iframe, basically.
EDIT: After some more research, apparently the form is not being created properly. I'm using document.createElement("form") and then document.getElementById("my_iframe_id").appendChild(form) to append it, but it does not seem to be working correctly.
Correct, because you are creating the form node in the current document.
document.getElementById("my_iframe_id").contentWindow.document.createElement('form');
to create it inside the iframe.
It works now, part of it was that "document" was wrong, as Dan said, and the other part was that, when inserting into the iframe, one needs to use document.getElementById(div).contentWindow.document.childNodes[0].appendChild(form) rather than just document.getElementById(div).innerHTML.
Not sure how much this will help, but the answer you point at does not give the form a name/id. If you are trying to post the form with something like document.getElementById('myForm').submit(), you might have a problem because your form doesn't have a name/id.
In the past, I've had trouble with form submission apparently submitting the wrong form when there are multiple forms on a page. In every case, giving the form a name/id and then getting the form by id and calling submit() seemed to solve the problem.
this is a question about the best way (or least effort of the best ways) to overlay an html page with a form. Best in this context meaning best user experience whilst meeting the functional requirements.
Let's say I have a page with a short form on it; the user has to enter some financial details. To assist the user to enter an accurate value for one of the fields there's another, much longer form. The longer form needs to be displayed only if the user requests the help.
For users without javascript, clicking a link will submit the short form (persisting already filled fields in a session) and the server will respond with the long form. They'll submit the long form and the server will combine the submitted data with the persisted data and serve the short form again - with the fields populated.
For users with javascript I want to overlay the short form page (in a lightbox stylee) with the long form, allow them to populate the long form and then go back to the short form with less round-trips to the server.
Do I:
Overlay the short form page with an iframe whose target is the long form?
Request the long form over ajax and stuff it into a div?
Generate the long form entirely on the client-side?
Some other wizadry I haven't thought of?
A short explanation of the best mechanism will do me very nicely indeed. Thank you very much!
I'd be thinking about option #2.
When the user asks for help, load the help-form dynamically into a div that you can pretty up with a lightbox of sliding drawer effect or whatever.
If possible, I'd do all the processing of the long form on the client side, and use the results to dynamically update the short form.
I use Colorbox for this kind of stuff it's really good.
You can specify the content inline or via another URL (which is what I do). It's probably better to use this second method as it keeps your webpage a lot cleaner and only requests the form content if required. It also means you can post back to that form itself (via AJAX if required) keeping the whole experience cleaner
Check it out here - click "Tag this smiley". The form is taken from a remote URL and posted back to it inside the form using jQuery. It's obviously a simple version of what you want but works, and looks, really nice.
For your scenario where you want a decent fallback for users without javascript I would have the form on the webpage but hidden via javascript, then use Colorbox to load use that content for the popup when required.