从一个HTML表单中提取数据并在另一页面中显示

Question

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

Answer 1

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.

Answer 2

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!

Answer 3

在预览按钮上，您只能使用弹出式窗口，因为此页面无法重定向到其他页面