Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Submit form without reloading page

    I'm not sure if this is a cgi question or a javascript question (probably a combination of both), so I'll post it to both forums.

    I have a rather large POST form that the user has asked for a button to save progress and come back later.

    The form statement is pretty basic... looks like this:
    <form method="POST" action="cgi/mou_create.cgi" enctype="multipart/form-data">
    The button is also plain:
    <button type="submit" name="B1">Submit</button>

    Can't be much more simple than that.

    If they click the Submit button, the cgi does it's thing and saves the form fields into the database and displays the next page.

    What the user has requested is a new button that saves the fields to the database just like the Submit button, but instead of moving on to the next page, just displays a save confirmation alert. The user could then continue working on the fields (potentially hitting Save every so often) until they're ready to hit Submit and move on.

    My initial idea was to just use the same .cgi program, but add a parameter that tells it not to generate the next page. I was going to use a hidden input field, using javascript to modify the value just prior to submission. I started thinking of all the problems I could run into and decided it would be better to post a message and try to see what methods others use before I proceed down a (potentially inferior) path.

    So, in the simplest terms, how do I...
    1. make a button that submits a form to a cgi that generates a new page (already done if my current button can be left alone)
    2. have another button that submits the same form to a cgi but only generates an alert upon completion, leaving the original page intact


    Thanks in advance,
    Darren

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    There are several ways to do this, depending on target browsers, whether not reloading the page is really the goal (as opposed to submitting and not writing the same output), intranet or internet (accessibility and browser requirements), and so on.

    For an intranet app where the real desire is just to save values and regenerate the form, I'd just modify your current CGI to look at the submit button name, and have two named submit buttons. Then it could re-write the form values if appropriate. I have PHP that does this for error checking and confirmation as a hacked up kinda-sorta version of ASP.net postback.

    If you don't want the form to really submit, you're looking at javascript xmlhttprequest and another server-side script to handle that, plus another button. Or you could do a bunch of javascript code and an invisible iframe to "submit" to. Don't really submit the form, since that would clear form values in some browsers -- you'd have to grab all the values and either submit as url params or make another form dynamically in the iframe or some such.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok... as I'm continuing to research this, I found a number of posts on this same issue. One set of messages said simply, "Can't be done" while the other was a thread discussing a specific site which seemed to be doing it and nobody in the thread knew how the site had done it. None of which gives me encouragement...

    BUT... from looking at those threads, it seems that I should be able to get roughly what I'm after if I just change the form target prior to submission. I'm experimenting with this right now... here's what I've done...

    The form now has a name
    <form method="POST" action="cgi/mou_create.cgi" enctype="multipart/form-data" name="F1">

    I've added a hidden value
    <input type="hidden" name="H1" value="submit">

    I no longer have a submit button... I have two generic buttons...
    <button type="button" name="B1"
    onclick=H1.value='submit';F1.target='';F1.submit()">Submit</button>
    <button type="button" name="B2"
    onclick=H1.value='save';F1.target='_new';F1.submit()">Save</button>

    The cgi will behave slightly different, depending on the value of the hidden input field. Although the functionality seems to be there (so far)... I need to figure out how to change the appearance of the new window. If I can't do that, then this method is a no-go. My initial thought is that I need to create a small pop-up window and then open the url (the cgi) using the pop-up as the target. Haven't done that before, so I'll start working on it. If it isn't possible, please stop me before I waste a bunch of time. If it is, I'd appreciate seeing how the experienced coders do it.

    Darren

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    To change the appearance of the new window, use javascript to open it instead of target=_new.
    I don't know how widely supported <button> is, so I always use <input>.
    I think I'd do something like this...

    Code:
    <input type="button" name="B2" onclick="doSave(this.form);">
    
    <script type="text/javascript">
    function doSave(frm)
       {
       frm.elements["H1"].value='save';
       // change window.open as appropriate
       var h_win = window.open("","","height=200,width=200");
       frm.target=h_win;
       frm.submit();
       }
    </script>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ack... so close... so close...

    It's almost working perfect, except that I'm getting a security warning when I try to send the submit() into the pop up. The site is https and the popup is considered unsecured, so I'm getting a warning that, "You are about to leave a secure Internet connection..."

    If I put a dummy argument into the url parameter of the window.open() function, it gets rid of the warning, but that's not a good fix because really what is happening in the background is a "failed to load page" and I'm just quickly overwriting that with my cgi output. That's shoddy... I'd like to get that cleaned up. Any ideas?

    Here's where I'm at now...

    Code:
    <form method="POST" action="cgi/mou_create.cgi" 
      enctype="multipart/form-data" name="F1">
    <input type="hidden" name="Action" value="none">
     ...
    <button type="button" onclick="doSubmit(this.form,'save');">Save</button>
    <button type="button" onclick="doSubmit(this.form,'submit');">Submit</button>
    
    <script type="text/javascript">
    function doSubmit(frm,action)
    {
      frm.elements["Action"].value=action;
      if (action=="save")
      {
        var h_win = window.open("blank.htm","popsub","height=200,width=200,toolbars=no,resize=no,status=no");
        frm.target="popsub";
      }
      else
      {
        frm.target="";
      }
      frm.submit();
    }
    </script>
    the blank.htm is the dummy argument.

    Thanks again,
    Darren

  • #6
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Ah, I see.
    You're going to get that warning any time you're changing from secure to insecure from most browsers, I think.
    You can either just specify your CGI as the original window instead of blank (I assume the https would remain the same, so no warning) or re-evaluate why you need the new window at all.

    You also have the option of just setting up xmlhttprequest and doing the whole shebang with javascript and a back-end script handler. No new window and no form submit at all.

    Lots of options...

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can also use a hidden iframe.
    Code:
    <form method="POST" action="cgi/mou_create.cgi" enctype="multipart/form-data" name="F1">
    
    <input type="submit" name="btnSubmit" onclick="this.form.target='_self';" />
    <input type="submit" name="btnSave" onclick="this.form.target='cgiFrame';" />
    
    <iframe name="cgiFrame" src="about:blank" style="display:none; width:0px; height:0pxl"></iframe>
    </form>
    Then in the cgi script, detect which submit button is clicked by checking which of the two "btnSubmit" and "btnSave" form data has the value.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I posted the original message to two forums. I got the suggestion to use an <iframe> in both and that method seems to work great for my original question. It also seems like it would be a good tool for another purpose, but I may be wrong.

    What I was looking at now was populating the form with data from a database query. The form can get populated two ways. First, the user may have arrived at this page by selecting a record from a prior page. That would be via onload="cgi" with the cgi output populating the form fields. The second is when the user hits a select list, again a cgi, and the output would populate the form fields. I thought I could kill two birds with one stone by having the cgi output go into that <iframe> and then running a common javascript function to move it over into the form fields. My tests of this work great... I wrote the following javascript function to move the fields from the frame over to the form...

    Code:
    function transfer( frame1, form2 )
    {
      /* move fields from frame1 to form2 */
      var f = window.frames[frame1];
      var x = f.document.getElementsByTagName("form");
      if (x.length==1)
      {
        form1 = x[0];
    
        for (var j=0; j<form1.elements.length; j++)
        {
          x = form1.elements[j];
          form2.elements[x.name].value = x.value;
        }
      }
    }
    The function works great. But only in testing, when the <iframe> already has data in it. When I try to use it by running the following code...

    Code:
    ... onclick="this.submit();transfer(frame1,this)" ...
    The <iframe> gets populated just fine, but the function doesn't move it over. I put in some alerts and what appears to be happening is that the submit() does not wait for the output before running the transfer() function. As such, transfer() completes (I get my alert( "done" )) before the cgi output appears in the <iframe>. Is there a fix to this, or am I going about this the wrong way?

    Thanks for the assistance so far,
    Darren
    Last edited by Darren; 06-23-2005 at 07:42 PM.

  • #9
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, I found one thing that works... instead of having the button do both the cgi call and attempt to transfer the values, I have the cgi output include an onload=transfer(...). So the contents of the <iframe> move themselves out to the main form. I'm using 'window.parent' to get out of the <iframe> and find the main form, but it works. Do you see any 'gotchas' with that method?

    And I hope I'm not putting people off by continuing to work the solution myself rather than wait for responses. I appreciate the responses so far and they've helped... it's all a learning process.

    Darren

  • #10
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    The gotchas I can see involve things that cause window.parent to not be there, such as the page being loaded from a search engine or some such. Also, if it is ever possible for the parent to not be done loading when the iframe contents reference it, that would be bad.
    Mostly this should be fine, though, I'd think.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by nikkiH
    The gotchas I can see involve things that cause window.parent to not be there, such as the page being loaded from a search engine or some such.
    window.parent is always there. If the page has no parent, window.parent == window. So if you're calling a function from the parent window, you should test if the function is there or not.

    if (window.parent.someFunc) window.parent.someFunc();
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    I guess I should have clarified.
    What I meant was that window.parent isn't pointing to the document you expected it to point to.
    My bad.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #13
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    At this point, it looks like I've got the functionality I was after. I'm testing right now and it all seems to work. Thanks to all that posted replies... it helped a lot and was appreciated.

    Darren


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •