Web Analytics Made Easy -
StatCounter this.form.submit() issue - CodingForum

Announcement

Collapse
No announcement yet.

this.form.submit() issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • this.form.submit() issue

    Hi all,

    I'm not very familiar with this forum or javascript but here is what I am trying to accomplish:

    I have a php page that queries a database and displays the results in a table.

    so far so good.

    I also have 4 select drop-down boxes that are supposed to act as filters.

    Once a user choses a filter to apply, the results displayed in the table are changed according to the filter.

    if I can get this part right, then the second issue is this.form.submit() will reset my selected option in the list.

    but I want the user to apply all 4 filters one after the other and each time the display of the table (queried from the database) is changed.


    PLEASE someone enlighten me...I'v been all over google for the past 3 days to search for something to help me...but nothing mentions database queries to change the display dynamically!

    Thanks

  • #2
    Please post the code you have currently (if the back-end source code is muddled with PHP go ahead and load it in a browser and paste the client-side code only).

    Without seeing your code I don't know exactly what you are doing but you should know a few things:
    1) Using the Form.submit() function in Javascript does not trigger the form's onsubmit handler in most browsers.
    2) In order to stop a page from redirecting to the form's action, false must be returned from the form's onsubmit handler.

    It sounds like you've split up your filters in to 4 separate forms, which may be semantically sound and it may not be (impossible to tell without seeing your structure). Regardless, most applications like the one you are describing will use an onchange handler for the selects (not an onsubmit) so that as soon as the user selects a new value in each drop-down, the data is automatically filtered (ie the user doesn't ever have to hit a submit button). In this case you never actually want the form to submit anyway, so a form tag is actually semantically unneccessary. Just use <select>s, onchange handlers and custom functions to filter the data you already have.

    Now it's possible you are relying on server-side scripts to filter your data. If this is the case I recommend loading all the data first, then using JS to filter the results (jQuery in fact has some awesome built-in functions to do exactly this). If you have a HUGE amount of data to filter and for some reason need to rely on your server to do the filtering, then I would recommend using AJAX rather than moving from page to page. If you lack the time/resources to develop one of the above two suggestions, then you can use cookies or session variables to store the <select>s' values and then pre-fill them on each page's load.
    Feel free to e-mail me if I forget to respond ;)
    [email protected]

    Comment


    • #3
      Originally posted by itsallkizza View Post
      Please post the code you have currently (if the back-end source code is muddled with PHP go ahead and load it in a browser and paste the client-side code only).

      Without seeing your code I don't know exactly what you are doing but you should know a few things:
      1) Using the Form.submit() function in Javascript does not trigger the form's onsubmit handler in most browsers.
      2) In order to stop a page from redirecting to the form's action, false must be returned from the form's onsubmit handler.

      It sounds like you've split up your filters in to 4 separate forms, which may be semantically sound and it may not be (impossible to tell without seeing your structure). Regardless, most applications like the one you are describing will use an onchange handler for the selects (not an onsubmit) so that as soon as the user selects a new value in each drop-down, the data is automatically filtered (ie the user doesn't ever have to hit a submit button). In this case you never actually want the form to submit anyway, so a form tag is actually semantically unneccessary. Just use <select>s, onchange handlers and custom functions to filter the data you already have.

      Now it's possible you are relying on server-side scripts to filter your data. If this is the case I recommend loading all the data first, then using JS to filter the results (jQuery in fact has some awesome built-in functions to do exactly this). If you have a HUGE amount of data to filter and for some reason need to rely on your server to do the filtering, then I would recommend using AJAX rather than moving from page to page. If you lack the time/resources to develop one of the above two suggestions, then you can use cookies or session variables to store the <select>s' values and then pre-fill them on each page's load.
      Thank you very much for your insights I would appreciate more of them :P

      My code is rather bulky...so I am going to describe the structure of my php file...

      1. sql connection and values queried from database (pretty much all of them like you said)

      2. Form1 is loaded and it contains the 4 <select> buttons with various data values each one representing a different <column> in the query loaded @ # 1

      - each <select> has an onchange property that I assumed will do a Form.submit() when user selects new filed to filter the query ALREADY loaded in step # 1...

      3. (tricky part)
      when onchange occurs I need the following:
      - values displayed to be "filtered" by that selection's column
      - that <select> value STAYS selected so that the user can continue to filter the results that are now displaying LESS info than on step #1
      - same for the other 3 <select> tags and their own filter each time reducing the data viewed

      ------------------

      At the moment, in my code I have the onchange trigger an actual "Javascript:submit();" and then I $_GET the info from the onchange value that was selected and run that in another SQL query and RE-DISPLAY the result in a Form2 .....but this "resets" my <onchange> selected value....

      see my dilemma?

      I do appreciate any help on this to improve my code.

      I realize I am not showing any of it but I think it will be simpler to start over than show you what I have and "fix it"

      Comment


      • #4
        I realize I am not showing any of it but I think it will be simpler to start over than show you what I have and "fix it"
        - Hehe ya.

        Since you're willing to start over I'm going to suggest one of two models. Pick one and I can help you build it out.

        1) Grab all the data from your database table as the page loads and shove it into a styleable table. Use Javascript and CSS to paginate the results (so like x number of "pages" each showing y number of results). At this point you can either write some Javascript yourself for the filters, or use some functions from a JS library like jQuery.

        or...

        2) Each time a new filter is selected (onchange for the dropdowns) use AJAX to query an external page (ASP/PHP) which in turn queries your database with the new filters and returns the revised results. You can place a little ajax loader animation or w/e to let the user know that it's doing something.

        Method 1 is optimal if you have a small database. Depending on what kind of data you have I'm going to guess the Javascript will start to choke around two-three thousand records. If your database is massive (like multiple hundreds of thousands of records) then you'll need to do something along the lines of method 2.

        Either route you choose, you'll be avoiding the page refresh issue so you don't need to worry about the <select>s keeping their values.

        If you don't have the time to completely rework your structure, then a simple fix would be to store a cookie whenever the user selects a <select> option, and then whenever the page refreshes, go ahead and grab the cookie and automatically set each <select>.
        Feel free to e-mail me if I forget to respond ;)
        [email protected]

        Comment


        • #5
          I think option one is better..in my humble opinion. but I am still not clear on how to do it

          But if you think it's better to go with #2 I will..it's not a problem. the problem is the "HOW"

          Also atm the database is not massive...we are talking about 1000 records MAX in the future but for now about 100 records are in it

          nothing too big.

          And about the ajax "loading animation" I rather not ...I would like it to be more "instant"

          Thank a lot btw!

          Comment

          Working...
          X