17 Replies Latest reply on Sep 22, 2008 1:07 PM by rockhiker

    Preview form input

    rockhiker Level 1
      Can anyone tell of a not too advanced way of enabling users to preview the question that they have filled in the Question textarea field before they submit the form? I would like it to work similar to clicking the preview button in this forum. thanks

      jim
        • 1. Re: Preview form input
          Dan Bracuk Level 5
          Do something to bring up the preview button. Look at the page source and see what it does.
          • 2. Re: Preview form input
            rockhiker Level 1
            I looked but i still do not get how the content of the message field is passed from the form to the preview page.
            • 3. Re: Preview form input
              Level 7
              rockhiker wrote:
              > I looked but i still do not get how the content of the message field is passed from the form to the preview page.

              Unless Adobe has updated the functionality in the years since I have
              used the web interface...

              It is done by passing it on a form submit...

              There is nothing secret about a preview page. It is just the action
              page of the *first* form. This action preview page displays the
              contents of the first form submission and then builds a *second* form
              with all the data from the first form in <input type="hidden"...> fields.

              When the users selects the submit button on the preview page to accept
              the data this second form is transported to the next action page which
              actually process the received form fields into a database or whatever is
              desired for this information.

              With modern DHTML, AJAX and|or FLEX technologies, there maybe ways to
              make this old school user interface slicker looking. But that is the
              basic idea.

              • 4. Re: Preview form input
                rockhiker Level 1
                Thanks for the reply - I am new at CF and I know how to create a form and submit data to an action page but I think this might be a bit beyond my skills so far.
                • 5. Re: Preview form input
                  Level 7
                  it is really simple, like Ian said.

                  on your form's action page, assuming you use method="post" for your
                  form, all form fields' values are available in the FORM scope. so if you
                  had a field named question (<input type="text" name="question" ...>) on
                  the action page you can access its value via #form.question#.

                  you intermediary (preview) action page should create a form with all
                  hidden fields to store all data passed from the original form. the
                  easiest way to do it is to loop over the #form# collection or
                  #form.fieldnames# list (which is a comma-delimited list of all field
                  names from your form) and create hidden input fields of same names with
                  corresponding values.

                  something like this should do the trick:
                  <cfoutput>
                  <form action='finalactionpage.cfm' method='post'>
                  <cfloop list="#form.fieldnames#" index="fieldname">
                  <input type='hidden' name='#fieldname#' value='#form[fieldname]#'>
                  </cfloop>
                  </cfoutput>

                  then display the question for review using
                  <cfoutput>#htmlcodeformat(form.question)#</cfoutput> or something
                  similar, keeping in mind that line breaks from a simple textarea will
                  not be visible in html output (thus i used htmlcodeformat() to preserver
                  them above). you can alternatively replace all #chr(13)&chr(10)# in the
                  question's text with <br> using replace() function. or do whatever else
                  you want.

                  add a submit button which will submit the hidden form to its
                  fianlactionpage.cfm and you are done.

                  hth

                  Azadi Saryev
                  Sabai-dee.com
                  http://www.sabai-dee.com/
                  • 6. Re: Preview form input
                    rockhiker Level 1
                    Thank you much - I will try it out
                    • 7. Re: Preview form input
                      rockhiker Level 1
                      :) some success . . . the preview page displays the question and the submit button, but it will not submit. I attached the code below. thank you!
                      • 8. Re: Preview form input
                        Level 7
                        <input name="submit" type="button" value="submit" />

                        type="button" is not same as type="submit". for a simple button you need
                        to provide a js function in the onClick event that will submit your
                        form. type="submit" buttons will submit the form automatically.

                        Azadi Saryev
                        Sabai-dee.com
                        http://www.sabai-dee.com/
                        • 9. Re: Preview form input
                          rockhiker Level 1
                          .----- thank you more success . . the preview page works and now the submit button works too.
                          However I get a Element FULLNAME is undefined in FORM

                          I have not been able to figure out this part.
                          • 10. Re: Preview form input
                            rockhiker Level 1
                            The fields are defined - why am I getting this error?
                            • 11. Re: Preview form input
                              Level 7
                              you have a cfinsert inside your cfloop - why???

                              Azadi Saryev
                              Sabai-dee.com
                              http://www.sabai-dee.com/
                              • 12. Re: Preview form input
                                Level 7
                                sorry, i have not been very attentive reading your recent posts. you
                                have, unfortunately, done it all wrong... do you understand how cfloops
                                work?

                                your cfloop over #form.fieldnames# list should have just one hidden
                                <input ...> inside of it, literally:
                                <input type='hidden' name='#fieldname#' value='#form[fieldname]#'>

                                that's it. nothing else. no cfinsert, either.

                                Azadi Saryev
                                Sabai-dee.com
                                http://www.sabai-dee.com/
                                • 13. Re: Preview form input
                                  rockhiker Level 1
                                  Thanks for coming back. I am novice at CF and thought the comma delimited list meant formfields using insert that I used on the final form to insert data into the database- I removed all but one of the inputs as you instructed and now no data is inserted into the database. code is attached --thanks again -- jim
                                  • 14. Re: Preview form input
                                    Level 7
                                    3rd time lucky...

                                    change this:
                                    <input type='hidden' name='#question#' value='#form.question#'>
                                    to this:
                                    <input type='hidden' name='#fieldname#' value='#form[fieldname]#'>

                                    Azadi Saryev
                                    Sabai-dee.com
                                    http://www.sabai-dee.com/
                                    • 15. Re: Preview form input
                                      rockhiker Level 1
                                      I changed this
                                      <input type='hidden' name='#question#' value='#form.question#'>
                                      to this:
                                      <input type='hidden' name='#fieldname#' value='#form[fieldname]#'>

                                      and the preview page displays and I can preview the submitted question. When I click submit on the preview page the final action page displays but data does not get inserted into the database. - thanks
                                      jim
                                      • 16. Re: Preview form input
                                        Level 7
                                        care to post the code of the final action page? it's a bit hard to guess
                                        what can be wrong, you know...

                                        Azadi Saryev
                                        Sabai-dee.com
                                        http://www.sabai-dee.com/
                                        • 17. Re: Preview form input
                                          rockhiker Level 1
                                          Hi
                                          thanks again for all your time.

                                          the final action page code is listed below: it does not put any data in the database and it
                                          returns Element FULLNAME is undefined in FORM. error if I use the output tag in the code below. thks
                                          jim