Extract data from one html form and display it another page - javascript

I am building a page to conduct survey. I have an HTML page wherein the surveyor enters the questions and choices to the corresponding questions. The page contains two buttons, one is the preview survey and other submit. What I want is that when the user clicks on "preview survey"button, the user should be directed to another page which only displays the questions and the choices entered by the surveyor. How do I do this functionality?
Basically, it is extracting data from an HTML form and displaying it in another page.
Something like this:
http://www.surveymonkey.com/s.aspx?PREVIEW_MODE=DO_NOT_USE_THIS_LINK_FOR_COLLECTION&sm=3sP%2fucxKJsI57gtum0mLXhMpuD4LqWiUaSkI8eVytnk%3d

There are tons of tutorials on how to handle form input in web applications on the web. Just pick one for your programming language of choice.

You have a few options:
1. Open up the preview in an overlay-dialog
You can use stuff like Jquery UI dialog for that, or any other library like Twitter Bootstrap or Wijmo. This way you don't need to direct to another page and do not have to juggle with variables (you do need some javascript to fetch the options and insert them in the dialog
2. Post a form to the other page
This will also, most probably, needs some javascript. But assuming you have the survey in a form already this won't be that difficult. You can, example given, use the jQuery.serialize() function to serialize form input and send it over to some other page. You can either construct an Ajax/XHR request, or send it directly to a popup window (needs you to alter the action type though when you want to finally submit the form). Example here
3. Open up a popup and let it directly speak to it's parent window
With the window.parent property you can talk to the window/page that opened the popup. Than you can read out properties, like form values, and use them in the pop-up. It works pretty much like this:
survey_page.html
<script type="text/javascript">
var popup = window.open('popup.html', 'width=300, height=200');
if(window.focus) popup.focus();
return false;
</script>
<form name="testform" id="testform">
<input type="text" name="atextfield" value="" />
</form>
Open popup
popup.html
<script type="text/javascript">
function alertParentValue() {
alert(window.opener.document.forms['testform'].atextfield.value);
}
</script>
Also click me!
If you click the open pop-up link and then click on the other link, you'll be alerted the value which you filled in in the text field.
Other options are most probably available, choose whichever suits you!

On preview button you can use the popup only due to this page wouldn't redirect to the other page

Related

Is there a workaround to submitting a form by clicking on a div without using JavaScript

This is the idea, there is a limited number of users, each has their own "box", when they click it, if they chose not to have a password they should be auto logged-in, if they do have a password a form will popup and they can type their password, click the submit button, and log in the normal way.
I know I could achieve this by using JavaScript and posting the hidden form, but then what if someone disabled JavaScript in their browser.
I could wrap the div in <a> tags and target another method in my controller that could use GET parameters for those auto-logins, but I do not want to use GET.
Am I missing an obvious way to achieve this? Or is there a way to use JavaScript if enabled and doing something close enough if disabled?
Wrap each box with a form. Post the form when user click the box. On server side depending upon user need authenticated or not load the same page in client but this time with the popup(if need authentication), you can control the popup by setting a session variable in server and access it on asp page.
Not sure if this make sense .
Edit :
<form action="server side url " method="post">
<input type="submit" value="Submit">
</form>
Now use css to make the "Submit" button look like the "box" you want
So when use hit the "box" it calls the action from the form

Access Form Action of another server through javascript

I have a simple html form which contain 2 fields and submit button. After hitting submit button my data transfer toward the another server through query string named "http://www.123contactform.com" which is load in iframe on my page and the field which is in the iframe become pre-populated with the information coming from query string. That's All I have done.
Now what I want want when the submit button of iframe click, the page transfer towards the another page, I want to restrict that navigation and define my own url with javascript.
Can any one help me, How do I get this???
Regards,
Ammar
Can you show some code ?
And
Logically What you want is something like this - You have an iframe on example.com and that iframe load's gmail's login page, You want to change the submit url of gmail's login form ?
NOT POSSIBLE

Is there a way to override the browser re-send form prompt when reloading a page?

I have a page with a table, that displays data in four views. The user can edit a record by opening a popup. When closing the popup, I would like to reload the page to reflect the updated record.
So I'm doing this:
<script type="text/javascript">
window.onload = function(){
alert("#blabla#");
window.opener.location.reload(true);
self.close();
}
</script>
which does what it should, but when the parent page is reloaded, I get a prompt asking me if I want to re-send the form (YES).
Question:
Is there a way to override this prompt? I'm pretty much stuck with the page design, so I cannot do any AJAX/event behavior etc to trigger the update of the table.
I take it the main page (the one you're reloading) was itself a response to a form submission (that would be why you're getting the message).
If like most search result pages it allows you to repeat the search (by submitting a form on the result page), you could submit that form rather than reloading. If not, you could include a hidden form on the page (with the relevant search criteria) for expressly that purpose.
Then your JavaScript changes to:
window.onload = function(){
alert("#blabla#");
window.opener.reloadForm.submit();
self.close();
}
...where reloadForm is the id of the form element that repeats the search.
It might be nicer, though, to dynamically insert the row in the search results without reloading the page...

Adding onsubmit to a form via javascript

How would you go about inserting an OnSubmit attribute to a form via Javascript only?
I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful!
Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page.
Tracking the entire funnel through google analytics is proving quite elusive due to changing domains (my domain -> Chargify.com -> my domain), since the credit card page is hosted by Chargify on their own domain.
I'm getting close: I've been able to get cross-domain tracking working (chargify.com page gets logged in Google Analytics), and can link from my domain to chargify by adding the following onclick attribute to my signup link:
onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"
However, I cannot do the same thing on the way back (Chargify -> Confirmation page) because I do not have access to the Chargify hosted payment page code, and because the user is taken to my confirmation page via a form submission, not a normal link.
Partial Solutions (need your help to finish this up):
Chargify allows several options for their hosted pages, one of them being to add custom javascript that gets inserted right before the </body> tag in a <script> tag.
I found some resources in the Google Analytics documentation on how to link pages, and adding the following to the Chargify form tag might work: onsubmit="_gaq.push(['_linkByPost', this]);"
(source: https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost)
The form tag does not currently have an onsubmit attribute, it's just this: <form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post">
Is there a way to use Javascript to simply append this attribute to the form tag? If you'd be able to provide a detailed example of what code I should insert inside of the <script> tag, that would be extremely appreciated.
window.onload = function() {
var form = document.getElementById('hosted_payment_form');
form.onsubmit = function() {
_gaq.push(['_linkByPost', this]);
}
}
I believe the above example is similar to what you need. We use document.getElementById to grab a reference to your form. Then set the onsubmit property to the code you want executed before the form is submitted. Remember to put this inside the window onload event if this JavaScript is executed before the page is rendered to ensure the form is built.

Switch to POST from GET, need to submit a form to two different locations

[I did see the similar problems solved with AJAX/jQuery, so please read on].
I have a form that a user can fill out - but one of the options on the form allows selection of an image, and when the user goes to do that they are brought to a new page.
This was originally done via get, but my problem is... I need to save all of the information on the form to the session so that I can restore it when the user selects an image and goes back to the first page that had the form.
A HTTP GET may not hold enough data for all the information on my form, so I need to switch to post.
So, here's my problem... I need the form to POST to one page when I click "Select Image" and another when I click "Submit". How can I get the form to POST to a different page depending on which button was clicked?
PS: I'd prefer to just use standard javascript/html here. I plan on learning AJAX and moving over to jQuery after a while, but I'm not there yet :)
onclick, let each button call different functions. Within these functions, change the action attribute of the form dynamically.
document.forms['yourform'].action = 'your intended page';
Then submit the form.
document.forms['yourform'].submit();

Categories