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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  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
    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

  • #3
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,500
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    The first thing that popped into my head was ...

    Javascript and Cookies.

    The cookies save all field values on the form until you submit.

    This would actually allow the user to leave the site and come back
    as long as they don't close their browser. It would be best to have
    the cookies "current session only". If the form is something that the
    user often uses, and several items are always the same, you might
    even want to save permanent cookies so the visitor on the same PC
    will always have half the form filled out when they arrive.

    Of course, it all depends on the information, security, etc.
    And ... they must have cookies enabled.

    This would allow your CGI script to remain untouched, no modifications
    needed. Everything would be Javascript on the page with the form.

    ... and if you want to mess around the script, cookies can be read
    there too.

    --- that's my thoughts ---

  • #4

  • #5
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Use the "hole in the page" technique

    1) Create an iframe on the page
    <iframe name=hole width=0 height=0 style="visibility:hidden"></iframe>

    2) Add a target to your form tag
    <form method="POST" action="cgi/mou_create.cgi" target=hole>

    3) Return your cgi output to the hole
    print "Content-type: text/html\n\n";
    print qq~<script language=javascript>alert("Submission Saved")</script>~;

    If you want to change to normal full page reload use javascript to change the target to "_self".
    Last edited by editwrx; 06-20-2005 at 06:47 PM.

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    You can have two submit buttons and Perl can tell which one has been selected.
    example:
    Code:
    #!/usr/bin/perl
    
    use CGI;
    $q = new CGI;
    $but1 = $q->param('but1') || 'no';
    $but2 = $q->param('but2') || 'no';
    print "Content-type: text/html\n\n";
    
    print qq~
    
    Submit button ONE: $but1 <br />
    Submit button TWO: $but2 <br />
    <form name="f" id="f" method="post" action="abuttontext.pl" enctype="application/x-www-form-urlencoded">
      <input type="submit" name="but1" value="Submit" />  <input type="submit" name="but2" value="Submit" />
    </form>
      ~;
    if but1 is clicked $but1's value will be Submit while $but2 will be no and vice-versa if but2 is selected.

  • #7
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    editwrx, the "hole in the page" technique sounds very promising. It actually could make some other aspects of the pages easier too. Is there a web site that details the technique?

    Darren

    [edit #1]
    Hmmm, I just ran into an issue while trying this out. The <iframe ...> tag doesn't pass validation. According to the write-up at w3.org, I could switch from using the "strict" doctype to "frameset", but I'm not sure what else is effected by that. I'm still looking it over...

    [edit #2]
    Well, it just dawned on me that I may have misinterpreted the hole concept a bit. I thought it was intended as a container for cgi output, and I thought I could then use that for other purposes as well. Now I think it was only intended to serve a function similar to /dev/null. Just to see if I can use this container for other purposes, how would I reference an <input> value in that frame using javascript (with the intent to transfer values between the iframe and it's parent)?
    Last edited by Darren; 06-22-2005 at 12:34 AM.

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, the <iframe> recommendation is definitely showing a lot of promise. The particular page I'm working on has a number of actions (cgi programs) and all of them can just have their output sent to the <iframe>. It's looking pretty darn good, except for one thing. I can get the output I want into the <iframe>, but then I'm not getting the data transferred into the main page.

    First, I wrote the following javascript to transfer the values from the <iframe> based on matching tag names:

    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 i=0; i<form1.elements.length; i++)
        {
          x = form1.elements[i];
          form2.elements[x.name].value = x.value;
        }
      }
    }
    This code works... when I place test data in the <iframe> and run the script, the data transfers fine. But if I try to use the cgi, it fails. The data appears in the <iframe> as it should, but nothing gets transferred. I put in a couple alerts() to see what's going on, and what appears to be happening is that the cgi gets called, but then the script continues without waiting. The transfer function runs before the <iframe> gets populated. Since the data isn't there yet, the function does nothing and exits (and spits out my alert( "done" ) message), and a split second later, the cgi output appears in the <iframe>... too late for the function. Anyone know of a solution to this? Because otherwise, this <iframe> thing looks good.

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Using Perl would be less dependent on client side.

    If the aim is to edit some data giving the user to option to save and continue or save and quit, another example :
    Code:
    #!/usr/bin/perl -w
    
    use CGI;
    $q = new CGI;
    $status_msg = '';
    $b1 = $q->param('b1') || '';
    $b2 = $q->param('b2') || '';
    print "Content-type: text/html\n\n";
    
    if ($b1 eq 'Save') {
    # save data to file routine... and quit
    $status_msg = 'Data Saved, Session Ended';
    &next_pg;
    }
    elsif ($b2 eq 'Save and Continue') {
    # save data to file routine... and continue edit
    $status_msg = 'Data has been saved, continue editing';
    &edit;
    }
    else {
    $status_msg = 'Welcome, Begin Editing';
    &edit;
    }
    
    sub edit {
    if ($status_msg) { print "<p> $status_msg </p>"; }
    print qq~
      <form name="f" id="f" method="post" action="scriptname.pl" enctype="application/x-www-form-urlencoded">
      <input type="submit" name="b1" value="Save" />  <input type="submit" name="b2" value="Save and Continue" />
      </form>
           ~;
    }
    
    sub next_pg {
    if ($status_msg) { print "<p> $status_msg </p>"; }
    }
    an example of passing a fields data when continuing to editing:
    Code:
    #!/usr/bin/perl -w
    
    use CGI;
    $q = new CGI;
    $status_msg = '';
    $b1 = $q->param('b1') || '';
    $b2 = $q->param('b2') || '';
    $field1 = $q->param('field1') || '';
    print "Content-type: text/html\n\n";
    
    if ($b1 eq 'Save') {
    # save data and got to next page
    $status_msg = 'Data Saved, Session Ended';
    &next_pg;
    }
    elsif ($b2 eq 'Save and Continue') {
    # write to file
    $status_msg = 'Data has been saved, continue editing';
    &edit;
    }
    else {
    $status_msg = 'Welcome, Begin Editing';
    &edit;
    }
    
    sub edit {
    if ($status_msg) { print "<p> $status_msg </p>"; }
    print qq~
      <form name="f" id="f" method="post" action="scriptname.pl" enctype="application/x-www-form-urlencoded">
    <textarea name="field1" cols="60" rows="10">$field1</textarea><br />
      <input type="submit" name="b1" value="Save" />  <input type="submit" name="b2" value="Save and Continue" />
      </form>
           ~;
    }
    
    sub next_pg {
    if ($status_msg) { print "<p> $status_msg </p>"; }
    }
    Last edited by rwedge; 06-23-2005 at 02:11 AM. Reason: 2nd example

  • #10
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    actually, the save and quit vs. save and continue issue was resolved by the prior messages you posted. I was moving on to some additional functionality (maybe that means I should start a new thread...).

    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 functin to move it over into the form fields. But I have that issue I talked about in my prior message, that the javascript doesn't wait for the cgi to complete before trying to move the data over.

    This is my first time doing this, so if there's a better way to do it... please offer suggestions. It's all a learning experience, even the stuff that fails.

    Darren

  • #11
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But I have that issue I talked about in my prior message, that the javascript doesn't wait for the cgi to complete before trying to move the data over
    Darren, you're doing the response backwards. The javascript that moves the response needs to be on the cgi response, such as

    parent.document.getElementById("someField").innerHTML="theCGIresponse"

    The way I use it is to create a container on the page:
    <div id=response style="display:none"></div>

    Then the response from the cgi is stuffed into a variable $whatever and returned:
    print qq~<html><head><script>
    function here(){
    parent.document.getElementById("response").style.display=""
    parent.document.getElementById("response").innerHTML=
    document.getElementById("response").innerHTML
    }
    </script></head>
    <body onload=here()>
    <div id=response>$whatever</div>
    </body></html>~;


    You can replace entire sections of the page this way.

    This technique is also called "Remote Scripting". Google that phrase and you'll see there are numerous ways to do it.
    Last edited by editwrx; 06-26-2005 at 06:07 PM.

  • #12
    New Coder
    Join Date
    May 2005
    Posts
    59
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I put the transfer() function into the cgi output, and that works.

    At this point, it looks like I've got the functionality I was after. Thanks to all that posted replies... it helped a lot and was appreciated.

    Darren

  • #13
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys I need your help for the same.

    I am a beginner and working on perlCGI, facing following problem

    I am fetching data from Database and displaying that into the HTML table format but at the same time I need to provide the facility to add new data in into the database and display that too in HTML table.

    Don't know is it possible in PerlCGI.

    I am able to do following :-
    1) I am able to fetch and display the data.
    2) able to insert the Data in DB but not able to show existing data on the same page.

    Following is my code:-

    print "<html>\n";
    print "<head><TITLE>Comment</TITLE></HEAD>\n";
    print "<form action=\"comment.cgi\" method=\"POST\">\n";
    print "<table valign=top align=center>\n";
    print "<tr><td valign=top>\n";

    print "<table border=2 cellpadding=3px>\n";
    print "<tr><th bgcolor=$color_h1 colspan=7 align=left>Comment</th></tr>\n";
    print "<tr><th bgcolor=$color_h2 colspan=1>Date</th><th bgcolor=$color_h2 colspan=1>Server</th><th bgcolor=$color_h2 colspan=1>UserID</th><th bgcolor=$color_h2 colspan=1>BLTest</th><th bgcolor=$color_h2 colspan=1>Comment</th><th bgcolor=$color_h2 colspan=2>Action</th></tr>\n";
    print "<tr><td>$curr_date</td><td><input type=\"text\" name=\"node\"></td><td><input type=\"text\" name=\"uid\"></td><td><input type=\"text\" name=\"bltest\"></td><td><input type=\"text\" name=\"comment\"></td><td><input type=\"submit\" value=\"ADD\"></td><td><input type=\"submit\" value=\"DEL\"></td></tr>\n";

    print "<tr><td>\n";
    my $sql="SELECT * FROM comp_comment";
    my $sth=$dbh->prepare($sql) or die "Error: Cannot prepare: ";
    $sth->execute() or die "Error: Cannot execute: ";
    my $row_count=$sth->rows;
    my $comment;
    if ($row_count != 0) {
    while (my $row=$sth->fetchrow_arrayref){
    $comment->{@$row[0]}->{@$row[1]}->{@$row[2]}->{@$row[3]}->{@$row[4]}->{@$row[5]}="";
    printf "<tr><td>@$row[5]</td><td>@$row[1]</td><td>@$row[2]</td><td>@$row[3]</td><td>@$row[4]</td></tr>\n";
    }
    }
    print "</table>\n";

    print "</td></tr>\n";
    print "</table>\n";
    print "<hr>\n";
    print "</form>\n";
    print "</body>\n";
    print "</html>\n";

  • #14
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by shorye View Post
    Hey guys I need your help for the same.
    - you reopen a thread from 06-16-2005 05:39 PM
    - you post a new question
    - you don't use tags [ code] and [ /code] for your posted code

    I suggest you to:
    - open a new thread with your problem
    - use code tags

    regards

  • #15
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After clicking on Submit to save the data in data base can I display another data from DB on the same page, if yes then please suggest.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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