How do I return to a page/section after a "Form Submit"?

excelmaster · May 7, 2014

Hello all,

First things first: I'm very new to scripting/web-development, so please be kind and gentle with me.

With that out of the way, I'd greatly appreciate any and all help that you guys can give me to help resolve a small problem I've encountered with the first WebApp I'm trying to develop. I'm sure it's something really small and simple, but since I don't have the knowledge/experience I have no idea how to fix it.

Okay, so I've got a single file (index.php) which essentially displays four tabs (in the following sequence, and at the top of the page) to allow for (1) adding, (2) deleting, (3) updating, and (4) searching records in a MySQL database/table.

Depending on the tab selected, the appropriate DIV/section (with corresponding form and submit button) is displayed.

All of that seems to look and work just fine. The problem I'm having is that when I click the "submit" button on either the 2nd, 3rd or 4th tabs, I'm always being sent back to the very first tab. In other words, and as an example, if I'm on the "delete" tab - wanting to delete a number of rows individually - and I select a row to delete and press the "delete/submit" button, I'm taken right back to the "add" tab/section, and I then have to reselect the "delete" tab in order to continue deleting other rows. This is kinda bothersome and obviously not the most appropriate UI for such a situation.

I would really like to remain on the same tab/section, till such time that I click a different tab/operation to perform.

Once again, appreciate the help in getting me to end-of-job. Much thanks!

Here's the code I have thus far:


	
		

		<html>

		   <head>

		      <title>Stores WebApp</title>

		      

		      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

		

		      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

		      <script src="//code.jquery.com/jquery-1.10.2.js"></script>

		      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

		      

		      <link rel="stylesheet" type="text/css" href="default.css">

		      <link href="demo.css" type="text/css" rel="stylesheet">

		      <link rel="stylesheet" type="text/css" media="all" href="style.css" />

		      

		      <script language="javascript">

		         function divHide(divToHideOrShow)

		         {

		            var div = document.getElementById(divToHideOrShow);

		

		            if (div.style.display == "block")

		            {

		               div.style.display = "none";

		            }

		         }         

		      </script>

		

		      <script language="javascript">

		         function divShow(divToHideOrShow)

		         {

		            var div = document.getElementById(divToHideOrShow);

		

		            if (div.style.display == "none")

		            {

		               div.style.display = "block";

		               document.getElementById(divToHideOrShow).className = 'active';

		            }

		         }         

		      </script>

		      

		      <script language="javascript" type="text/javascript">

		            function makeActive(objDivID)

		         {

		            if(document.getElementById(objDivID).className=='')

		            {

		               document.getElementById(objDivID).className = 'active';

		            }

		         }

		      </script>      

		

		      <script language="javascript" type="text/javascript">

		            function makeInactive(objDivID)

		         {

		            if(document.getElementById(objDivID).className=='active')

		            {

		               document.getElementById(objDivID).className = '';

		            }

		         }

		      </script>      

		      

		      <script>

		         $(function() {

		            $( "#datepicker" ).datepicker();

		         });

		      </script>      

		   </head>

		

		   <body>

		      <div class="wrapper">

		         <div class="body_wrapper">

		            <h1>Stores WebApp</h1>

		

		            <?php

		               $mysqli = new mysqli('localhost', 'store', 'b8skeu7jy5mv', 'store');

		               if ($mysqli->connect_error) {

		                  die('Connect Error (' . $mysqli->connect_errno . ') '

		                  . $mysqli->connect_error);

		               }

		               if(isset($_REQUEST["action"])){

		                  switch($_REQUEST["action"]){

		                     case "insert":

		                        $SQL="INSERT INTO storelist (store_name) VALUES (";

		                        $SQL=$SQL.");";

		                        if ($mysqli->query($SQL)=== FALSE) {

		                           printf("Error – Unable to insert data to table " . $mysqli->error);

		                        }

		                        break;

		                     case "delete":

		                        $SQL="DELETE FROM storelist WHERE";

		                        for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

		                           $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

		                        }

		                        $SQL= rtrim($SQL, "or");

		                        if ($mysqli->query($SQL)== FALSE) {

		                           echo '<div class="highlight-error">Error: Unable to delete value (perhaps you have not selected anything to delete!)</div>';

		                        }

		                        break;

		                     case "update":

		                        $SQL="UPDATE storelist SET purchased = 'Y' WHERE";

		                        for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

		                           $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

		                        }

		                        $SQL= rtrim($SQL, "or");

		                        if ($mysqli->query($SQL)== FALSE)

		                           {

		                              echo '<div class="highlight-error">Error: Unable to update value (perhaps you have not selected anything to update!)</div>';

		                           }

		                        else

		                           {

		                              // echo mysqli_affected_rows($mysqli). ' Records UPDATED successfully<br />';

		                           }

		                        break;

		                  }

		               }

		            ?>

		            

		            <ul class="simple-tabs" id="demo-tabs">

		               <li class="active" id="tabAdd">

		                  <a href="javascript:divHide('divUpdate');divHide('divDelete');divShow('divAdd');divHide('divSearch');makeInactive('tabUpdate');makeInactive('tabDelete');makeActive('tabAdd');makeInactive('tabSearch');">Add</a>            

		               </li>

		               <li id="tabUpdate">

		                  <a href="javascript:divShow('divUpdate');divHide('divDelete');divHide('divAdd');divHide('divSearch');makeActive('tabUpdate');makeInactive('tabDelete');makeInactive('tabAdd');makeInactive('tabSearch');">Update/View</a>

		               </li>

		               <li id="tabDelete">

		                  <a href="javascript:divHide('divUpdate');divShow('divDelete');divHide('divAdd');divHide('divSearch');makeInactive('tabUpdate');makeActive('tabDelete');makeInactive('tabAdd');makeInactive('tabSearch');">Delete/View</a>            

		               </li>

		               <li id="tabSearch">

		                  <a href="javascript:divHide('divUpdate');divHide('divDelete');divHide('divAdd');divShow('divSearch');makeInactive('tabUpdate');makeInactive('tabDelete');makeInactive('tabAdd');makeActive('tabSearch');">Search/View</a>            

		               </li>         

		            </ul>

		

		            <div class="clear-float"></div>

		

		            <div id="divAdd" style="display: block; top:0;">

		               <div>

		                  <h3>Add Items:</h3>

		                  <p>Use this section to add new item(s).</p>

		                     

		                  <form class="add-data-form" action="index.php" method="POST">

		                     <input type="hidden" name="action" value="insert" />

		

		                     <div class="full-row">

		                        <div class="field-label">

		                           Store Name:

		                        </div>

		                        <select class="store-name" name="store_name">

		                           <option value="No Frills">No Frills</option>

		                           <option value="Super Store">Super Store</option>

		                           <option value="Food Basics">Food Basics</option>                  

		                           <option value="Freshco">Freshco</option>                  

		                           <option value="Wal Mart">Wal Mart</option>                  

		                           <option value="Giant Tiger">Giant Tiger</option>                  

		                           <option value="Foodland">Foodland</option>                  

		                           <option value="Metro">Metro</option>                  

		                           <option value="Sobeys">Sobeys</option>                  

		                           <option value="SDM">Shoppers Drug Mart</option>                  

		                           <option value="Target">Target</option>                  

		                        </select>

		                     </div>

		                     <input class="add-button" value="Add row" type="submit" />

		                  </form>

		               </div>

		            </div>

		            

		            <div id="divUpdate" style="display: none; top:0;">

		               <div>

		                  <h3>View and Update Items:</h3>

		                  <p>Use this section to update (highlight) items that have been purchased.</p>

		

		                  <form class="update-data-form" action="index.php" method="POST">

		                     <input type="hidden" name="action" value="update" />

		                     <span class="full-row-heading">                                 

		                        <table>

		                           <tr>

		                              <th><span class="spacer-store-name">Store</span></th>

		                           </tr>

		                        </table>

		                     </span>

		                     <table>

		                        <?php

		                           $result = $mysqli->query("SELECT * FROM storelist");

		                           while($row = $result->fetch_assoc()){

		                              print '<tr>';

		                              print '<td><span class="filler-checkbox"><input type="checkbox" name="checkboxes[]" value="' . $row["idnumber"] . '" /></span></td>';                        

		                              if ($row["purchased"] == "Y")

		                                 {

		                                    print '<td><span class="highlight-purchased">' . $row["store_name"] . '</span></td>';

		                                 }

		                              else

		                                 {

		                                    print '<td>' . $row["store_name"] . '</td>';

		                                 }                        

		                              print '</tr>';

		                           }

		                        ?>

		                     </table>

		                     <input class="update-button" value="Highlight selected item(s) as *Purchased*" type="submit"/>

		                  </form>

		               </div>

		            </div>

		            

		            <div id="divDelete" style="display: none; top:0;">

		               <div>

		                  <h3>View and Delete Items:</h3>

		                  <p>Use this section to delete items that are not needed.</p>

		

		                  <form class="display-data-form" action="index.php" method="POST">

		                     <input type="hidden" name="action" value="delete" />

		                     <div class="full-row-heading">                                 

		                        <table>

		                           <tr>

		                              <th><span class="spacer-store-name">Store</span></th>

		                           </tr>

		                        </table>

		                     </div>

		                     <table>

		                        <?php

		                           $result = $mysqli->query("SELECT * FROM storelist");

		                           while($row = $result->fetch_assoc()){

		                              print '<tr>';

		                                 print '<td><span class="filler-checkbox"><input type="checkbox" name="checkboxes[]" value="' . $row["idnumber"] . '" /></span></td>';                        

		                                 if ($row["purchased"] == "Y")

		                                    {

		                                       print '<td><span class="highlight-purchased">' . $row["store_name"] . '</span></td>';

		                                    }

		                                 else

		                                    {

		                                       print '<td>' . $row["store_name"] . '</td>';

		                                    }                        

		                              print '</tr>';

		                           }

		                        ?>

		                     </table>

		                     <input class="delete-button" value="Delete selected row(s)" type="submit"/>

		                  </form>

		               </div>

		            </div>

		            

		            <div id="divSearch" style="display: none; top:0;">

		               <div>

		                  <h3>Search and View Items:</h3>

		                  <p>Use this section to search for specific store(s) or item(s).</p>

		

		                  <form class="search-data-form" id="search-data-form" action="index.php" method="POST">

		                     <div class="search-container">

		                        <div class="full-row">

		                           <div class="field-label">

		                              Choose search field:

		                           </div>

		                              

		                           <div class="field-input">

		                              <select name="searchtype">

		                                 <option value="store_name">Store Name</option>

		                              </select>

		                           </div>

		                           <br />

		                        </div>

		

		                        <div class="full-row">                     

		                           <div class="field-label">

		                              Enter search term:

		                           </div>

		                           <div class="field-input">

		                              <input name="searchterm" type="text" size="40"/>

		                           </div>

		                           <br />

		                        </div>

		                     </div>

		

		                     <input class="search-button" type="submit" name="submit" value="Search"/>

		                     

		                     <div class="full-row-heading">                  

		                        <table>

		                           <tr>

		                              <th><span class="spacer-store-name">Store</span></th>

		                           </tr>

		                        </table>

		                     </div>

		

		                     <table>

		                        <?php

		                           // create short variable names

		                           $searchtype=$_POST['searchtype'];

		                           $searchterm=trim($_POST['searchterm']);

		

		                           /*

		                           if (!$searchtype || !$searchterm) {

		                              echo '<div class="highlight-error">You have not entered any search details. Please try again.</div>';

		                              exit;

		                           }

		                           */

		         

		                           if (!get_magic_quotes_gpc()) {

		                              $searchtype = addslashes($searchtype);

		                              $searchterm = addslashes($searchterm);

		                           }

		         

		                           $query = "select * from storelist where " . $searchtype . " like '%" . $searchterm . "%'";

		                     

		                           $result = $mysqli->query($query);

		         

		                           $num_results = $result->num_rows;

		         

		                           for ($i=0; $i < $num_results; $i++) {

		                              $row = $result->fetch_assoc();

		                              print "<tr>";

		                                 echo "<td>" . stripslashes($row['store_name']) . "</td>";

		                              print "</tr>";

		                           }

		                           $result->free();

		                           $mysqli->close();

		                        ?>

		                     </table>               

		                  </form>      

		               </div>   

		            </div>

		         </div>

		      </div>

		   </body>

		</html>

ginerjm · May 7, 2014

I have never used the tab features of browsers preferring to have separate windows when necessary. That said, I wonder how changing the order of the build of each page/tab would affect the outcome of a refresh? Perhaps sending the just-used tab/page back first would make that the active tab?

excelmaster · May 7, 2014

My apologies for not being clear enough and/or for confusing you!

The tabs I'm talking about are not "browser tabs", but rather, just text that's enclosed in "<ul><li></li</ul>" and formatted (using CSS) to look like tabs (see attached screenshot).

I don't quite understand your 2nd and 3rd senetences...but perhaps they may now be a moot point (with the above clarification).

Thanks though, for trying to help..much appreciated!

ginerjm · May 7, 2014

So now I am totally confused. You have a list containing links that will achieve something and you want to "return" to the just clicked item? Aren't they all basically together on the page as it is?

excelmaster · May 7, 2014

Yes indeed, they are all together on the page (to begin with), but depending on which function/tab I'm working on/with, the content section (i.e. the forms, submit buttons etc.) of the other three tabs are being hidden, and they should remain hidden till such time that I've completed working with that function (i.e. add, delete, udpate, search) by selecting one of the other three tabs (up top).

Is that any clearer, or is it still confusing?

maxxd · May 7, 2014

I think - and honestly I'm not entirely sure so check the docs - that you can target a specific JQueryUI tab by appending a target anchor to the end of your url. So, if you typically submit to 'myPage.php', try changing it to 'myPage.php#tabUpdate' and that may do what you're looking for. Basically, you can append the ID of the list item and it might do that automatically. If not, it should be easy enough to write out a little script that activates the specified tab on page load.

ginerjm · May 7, 2014

No I dont' follow your terminology at all. You mentioned tabs and submits but then you tell me that your 'tabs' are really the items in an unordered list. So how do you have submits that "send you back to the first tab"? You don't get sent back to a list - you get sent back to a page and what you see and where you are located (focused?) is determined by you usually. If you want certain divs displayed and hidden you need to set up some vars in their styles that control that so you can set them while handling the submit and then when you send that page back the settings will be as you wish.

does my terminology make sense?

excelmaster · May 7, 2014

@maxxd: I tried what you suggested, but still no joy :-(

Just to clarify though: I had this =>

<form class="add-data-form" action="#add" method="POST">

, and you suggested I change it to this =>

<form class="add-data-form" action="index.php#add" method="POST">

...correct?

I really don't have the knowledge/skills to write the little script to activate a specific DIV/section on page load...so do you have something like that handy, which you can pass on to me?

@ginerjm: Yes, your terminology makes total sense, and mine certainly didn't! So, just forget that I mentioned the word "tabs"....which as you correctly pointed out are essentially items in an unordered list.

So, if you look at my screenshot above (3rd post), you'll notice that I have four unordered list items laid out horizontally across the top. Just below those list items is a DIV (four DIV's actually, if you look at the code, but three of them are hidden) which dislays the respective form for the selected list item. Looking at the screenshot again, you will notice that I have a submit button titled "Add Row", for that form. Similarly, I display a delete form with a corresponding button titled "Delete Row" when the "Delete/View" list item is selected.

My dilemma is how to achieve what you're suggesting in the last sentence of your paragraph above i.e. >> "....so you can set them while handling the submit and then when you send that page back the settings will be as you wish."

Thanks for your patience...much appreciated!

maxxd · May 7, 2014

Try this (no guarantees, mind you...)

  var curTab = window.location.hash;
  if( curTab !== '' ){
       $('#simple-tabs').tabs( { active: curTab });
  }

By the way, you can use one set of <script> tags to define all your javascript functions.

excelmaster · May 7, 2014

And where would I place that piece of code?

Also, I presume it would have to be enclosed with <script></script> tags...correct?

maxxd · May 7, 2014

Correct - put it between the $(function(){ and }); lines that surround the $( "#datepicker" ).datepicker(); line.

Again, I make no guarantee about cut-n-paste functionality, but it's a place to start.

ginerjm · May 7, 2014

You have css determining whether the div is hidden or displayed. When your script first sends the page (before user interaction) use your php to set those divs to all be "display:none;". Then when the user clicks on a list item and triggers your script to run again and to process a part of the code applying to that div, have your php change the display setting of that one div to 'display:block;'. Now when your script sends the output to the client that one div will be visible while all the others will still be set to 'none'.

maxxd · May 7, 2014

Wow.

Somehow, through all of this, I read that it was a JQueryUI tabs widget. Literally the entire time. Perhaps I've got more going on today at work than I thought I did...

ginerjm · May 7, 2014

We may very well be! And if so, I'm outta here!

excelmaster · May 7, 2014

I have tried a number of different techniques (JQueryUI tabs being just the last one I tried) to achieve this functionality, but I seem to be running into the very same brick-wall each time.

Is there something wrong with JQueryUI tabs (which I should know about, and perhaps never use)?

As a matter of fact, I've even tried the following solution (which was provided on a different site), and it's exactly what @maxxd suggested above. That too failed to work as soon as I incorporated the required pieces of my code into the basic code provided in the second link below.

http://neundorf.vela.uberspace.de/we...ple-Forms-and/

https://github.com/Naxmeify/webdevqs...and/index.html

ginerjm · May 7, 2014

No. I just don't know anything about it and didn't realize that was what you were you doing.

excelmaster · May 7, 2014

I've just taken a closer look at my code and found out that the 3 lines of code (just after the <title></title> tags) pertaining to JQueryUI tabs are only left there as remnants of my previous attempt to find a solution to this problem. Other than that, JQueryUI tabs is not being used, per se.

I've removed those 3 lines of code and I'm still able to use the app...albeit with the same problem of returning to the "add" form after clicking the submit button from one of the other 3 forms.

maxxd · May 8, 2014

To tell you true, I think you might want to reconsider using the JQueryUI tabs widget using the script bit I posted earlier. On a site I currently maintain, I've got a widget containing between 2 and 14 tabs per each of 51 JQueryUI accordion divs, and it was a snap to set up. But that's neither here nor there, really...

As it stands now, I think your best bet will be to pass the open tab as a GET parameter (or hash, as suggested above), pull the value, loop through all the tabs on the page, run makeInactive() and divHide() on each of them, then run makeActive() and divShow() on the div you pulled from the GET parameter. It's a bit long-winded, I personally think, but it should get the job done with the setup you've got now.

PS - if that's your real database password in the mysqli() instantiation in your sample code, please edit the post to remove it and immediately change that password for your site.

excelmaster · May 8, 2014

@maxxd: WOW!!! that's a ton of techno-mambo-jambo you've thrown at me (a newbie) right there!!!

Anyways, as it turns out, I worked on this till late last night (determined to get to the bottom of the problem, and find a fix)....and find a fix I did! Well, actually it wasn't really a fix, but rather, just a placement-of-code-issue.

So I used the code (as-is) from the technique shown in the link below (which is pretty much what you were suggesting earlier - thanks for that suggestion) - and it worked on my site as-is. But then, when I went into the supplied code and started adding in all my bits-and-pieces of code, it wouldn't work the way it was supposed to i.e. remain on the same tab/function/operation after a POST/SUBMIT.

https://github.com/N....and/index.html

Turns out that the bit of JS code at the very end (just before the closing BODY tag) had to be moved up top (before the closing HEAD tag), and then, and only then did it work.

But guess what? That "threw another spanner in the works" and I could no longer get my date-picker to work. I then found out that if I moved the date-picker JS code above the "remain-on-selected-tab" code then the date-picker functionality worked but the "remain-on-selected-tab" functionality no longer worked. So this is my new problem/dilemma!!! I can only get one or the other to work....not both at the same time...which is very much what I would like to have. Needless to say, I'm doing without the date-picker code (for now) since I don't mind typing in a date manually.

Any ideas on how I can resolve this new problem?

But anways, much thanks to both yourself and @ginerjm for helping me out with this....much appreciated!

BTW, those are not my real credentials in the mysqli instantiation...I just made those up. Thanks for the heads-up though.

https://github.com/N....and/index.html

maxxd · May 8, 2014

Sorry for the vast amounts of technobabble, but glad you got it working! You'll want to mark this thread resolved and start a new one for the other issue - post your code there and we'll see what's up.

Sign In

How do I return to a page/section after a "Form Submit"?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information