CODEWITHSUNDEEP
javascriptphphtml
Lumiere
Lumiere

Reputation: 55

Extract data from one html form and display it another page

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

Upvotes: 1

Views: 4865

Answers (3)

user2991845
user2991845

Reputation: 1

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

Upvotes: 0

giorgio
giorgio

Reputation: 10202

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>
<a href="#" class="popup" onclick="open_popup()">Open popup</a>

popup.html

<script type="text/javascript">
    function alertParentValue() {
        alert(window.opener.document.forms['testform'].atextfield.value);
    }
</script>
<a href="#" onclick="return alertParentValue();">Also click me!</a>

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!

Upvotes: 0

Izzy
Izzy

Reputation: 214

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.

Upvotes: 1

Related Questions