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
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Don't want page to reload when submitting checkboxes

    Hi all!

    I have created a form with some checkboxes. However there is a problem. When I click the submit button the whole page reload. I only want the odds tables to reload so to speak.

    To make matters worse, after the page has been refreshed it goes back to the top.

    Here is the page: http://www.spelacasino.se/odds-online/

    Any suggestions?

  • #2
    Regular Coder poyzn's Avatar
    Join Date
    Nov 2010
    Posts
    266
    Thanks
    2
    Thanked 61 Times in 61 Posts
    Quote Originally Posted by Calle81 View Post
    Any suggestions?
    Using ajax to reload div content

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Easier said then done it seems.

  • #4
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    Quote Originally Posted by Calle81 View Post
    Easier said then done it seems.
    Just like everything else web-related.

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I haven't been using ajax anything. This is my current code (shortened down a bit, might have missed some parts, but this script is working well except it reloads the entire page):

    Any suggestions is appreciated. Looking to jsut reload the div with the table. Bit tired after 23 hours of programming but trying to keep it up

    Code:
    <input id="All" name="All" type="checkbox" value="Alla"/>All
    
    <input id="LaLiga" name="Primera" type="checkbox" value="Primera"/>La Liga
    
    <input id="SerieA" name="Serie" type="checkbox" value="Serie"/>Serie A
    
    <input type="submit" value="Submit" name="submit"/>
    PHP Code:
    if ($_POST["Alla"] == "Alla")
    {
    $LeagueAll '';
    }

    if (
    $_POST["Serie"] != null)
    {
    $Serie $_POST["Serie"];
    $LeagueAll "EMPTY";
    }
    else
    {
    $Serie "EMPTY";
    }

    if (
    $_POST["La Liga"] != null)
    {
    $LaLiga$_POST["LaLiga"];
    $LeagueAll "EMPTY";
    }
    else
    {
    $LaLiga"EMPTY";
    }

    require_once(
    'connections/test.php'); 

    $maxRows_Recordset1 200;
    $pageNum_Recordset1 0;
    if (isset(
    $_GET['pageNum_Recordset1'])) {
      
    $pageNum_Recordset1 $_GET['pageNum_Recordset1'];
    }
    $startRow_Recordset1 $pageNum_Recordset1 $maxRows_Recordset1;

    mysql_select_db($database_Odds$Odds);
    $query_Recordset1 "SELECT `Game Date`, `Game Time`, `Game Name`, `League Name`, `Odds_1`, `Odds_X`, `Odds_2` , `Odds_1_Unibet`, `Odds_X_Unibet`, `Odds_2_Unibet`, `Odds_1_bet365`, `Odds_X_bet365`, `Odds_2_bet365`,`Odds_1_betsafe`, `Odds_X_betsafe`, `Odds_2_betsafe` FROM Games WHERE `Game Name` NOT LIKE '%:%' AND `League Name` LIKE '%$LaLiga%' OR `League Name` LIKE '%$Serie%' AND `Game Name` NOT LIKE '%:%' OR `League Name` LIKE '%$All%' AND `Game Name` NOT LIKE '%:%' 

    etc... 

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    You can't do it with PHP. PHP is a server side technology. It does not have any active communication with the user. It takes a page, processes it into HTML, and sends it to the user. Once at the user end, the user has to do w/e on the page, send a new request to the server, which will send back new HTML.

    To do this, you need Javascript, and specifically for this situation, AJAX. Google AJAX, or for simplicity, pick up a framework like jQuery, which makes doing AJAX requests easier.

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I know I need AJAX, that is what this thread is about. I just can't seem to get any AJAX coding working. Been playing around with a few tutorials but no luck so far.

  • #8
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    Here's a simple AJAX request using jQuery to hijack click events, process the data with `ajax/my-form.php`, and inserts the resulting HTML into a defined div.

    Untested, no guarantees, example only:
    Code:
    <form id="my-form">
    	<input type="checkbox" name="check_1" value="1" />
    	<input type="checkbox" name="check_2" value="2" />
    	<input type="checkbox" name="check_3" value="3" />
    	<div id="form-response"></div>
    </form>
    
    <script>
    // Hijack the checkbox click events
    $( '#my-form input[type=checkbox]' ).click( function() {
    	$.post(
    		// The URL to process the form data and spit out HTML
    		'ajax/my-form.php',
    		// The serialized form data, treated as $_POST
    		$( '#my-form' ).serialize(),
    		// grab the response and do with it what you will
    		function( response ) {
    			$( '#my-form #form-response' ).html( response );
    		}
    	);
    } );
    </script>
    Last edited by kbluhm; 11-05-2010 at 08:32 PM.

  • #9
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Quote Originally Posted by Calle81 View Post
    Yeah, I know I need AJAX, that is what this thread is about. I just can't seem to get any AJAX coding working. Been playing around with a few tutorials but no luck so far.
    To be fair, you never expressed interest in help in AJAX code, just generic help. So you can understand my confusion, specially since this is a PHP forum

    Why don't you show us your code? We can help you figure it out. But that is also why I recommended jQuery, it makes AJAX requests very easy.

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your suggestion kbluhm. I will try the code, I want a submit button though but I think I can figure out how to put one in.

  • #11
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    Here's another hint. To hijack the form submission, change this line:
    Code:
    $( '#my-form input[type=checkbox]' ).click( function() {
    ...to this:
    Code:
    $( '#my-form' ).submit( function() {
    ...and return false at the end to prevent the default action:
    Code:
    <form id="my-form" action="/ajax/my-form.php">
    	<input type="checkbox" name="check_1" value="1" />
    	<input type="checkbox" name="check_2" value="2" />
    	<input type="checkbox" name="check_3" value="3" />
    	<input type="submit" value="submit" />
    	<div id="form-response"></div>
    </form>
    
    <script>
    // Hijack the form submission
    $( '#my-form' ).submit( function() {
    	// not too sure of a better solution for handling scope within the callback
    	$this = $( this );
    	$.post(
    		// The URL to process the form data and spit out HTML
    		$this.attr( 'action' ),
    		// The serialized form data, treated as $_POST
    		$this.serialize(),
    		// grab the response and do with it what you will
    		function( response ) {
    			$this.children( '#form-response' ).html( response );
    		}
    	);
    	// Halt the default action
    	return false;
    } );
    </script>
    Last edited by kbluhm; 11-05-2010 at 08:56 PM.

  • #12
    New Coder
    Join Date
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for you suggestions, seems to work out well so far. Gonna test it a bit more to see that everything is ok.

  • #13
    New Coder
    Join Date
    Aug 2010
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Only problem with this code seems to be that it doesn't run the my-form.php on the first page load. So first time you enter the page is empty.

  • #14
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Here's what I did for a site without a database. I made a php page that contained the onload entries for the form, just the entries you see when you first load the page. All the folders were checked by the index.php to see if they had a version of this entries.php, if not it was copied to the folder. Then when the form was submitted it changed the entries in the folder copy. So when the page reloaded after submission the form had all the user made entries. Of course the same thing could be done with a database, with some modifications.

  • #15
    Senior Coder kbluhm's Avatar
    Join Date
    Apr 2007
    Location
    Philadelphia, PA, USA
    Posts
    1,509
    Thanks
    3
    Thanked 258 Times in 254 Posts
    Quote Originally Posted by Calle81 View Post
    Only problem with this code seems to be that it doesn't run the my-form.php on the first page load. So first time you enter the page is empty.
    That's not really a problem. It's really not that difficult. You have full control over whatever you'd like to display within that div:
    PHP Code:
    <form id="my-form" action="/ajax/my-form.php">
        <input type="checkbox" name="check_1" value="1" />
        <input type="checkbox" name="check_2" value="2" />
        <input type="checkbox" name="check_3" value="3" />
        <input type="submit" value="submit" />
        <div id="form-response"><?php
            
    /*
             * Display whatever you want here
             * - you have full control
             * - include a file
             * - process some inline code
             * - etc
             * - etc...
             */
        
    ?></div>
    </form>

    <script>
    // Hijack the form submission
    $( '#my-form' ).submit( function() {
        // not too sure of a better solution for handling scope within the callback
        $this = $( this );
        $.post(
            // The URL to process the form data and spit out HTML
            $this.attr( 'action' ),
            // The serialized form data, treated as $_POST
            $this.serialize(),
            // grab the response and do with it what you will
            function( response ) {
                $this.children( '#form-response' ).html( response );
            }
        );
        // Halt the default action
        return false;
    } );
    </script>


  •  
    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
    •