SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question AJAX call when pulldown and checkbox onchange problem

    Hi Everyone,

    How can I make an AJAX call when the checkbox or pulldown on change, they are call a same PHP file.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <form id="form1" name="form1" method="post" action="">
      <input type="checkbox" name="checkbox" id="checkbox" />
      <label for="checkbox">checkbox 1</label>
      <br />
      <input type="checkbox" name="checkbox2" id="checkbox2" />
      <label for="checkbox2">checkbox 2</label>
      <br />
      <br />
      <br />
      <label for="pulldown1"></label>
      <select name="pulldown1" id="pulldown1">
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
      </select>
      <br />
      <br />
      <label for="pulldown2"></label>
      <select name="pulldown2" id="pulldown2">
        <option value="ASC">sort ASC</option>
        <option value="DESC">sort DESC</option>
      </select>
    </form>
    </body>
    </html>
    Thanks everyone.

    Fred.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Amsterdam, The Netherlands
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The same way as that any other function is called from a form. In this case with an inline onclick function for the checkboxes and an onchange function for the selects.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Sydney, Australia
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by freddy88 View Post
    Hi Everyone,

    How can I make an AJAX call when the checkbox or pulldown on change, they are call a same PHP file.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <form id="form1" name="form1" method="post" action="">
      <input type="checkbox" name="checkbox" id="checkbox" />
      <label for="checkbox">checkbox 1</label>
      <br />
      <input type="checkbox" name="checkbox2" id="checkbox2" />
      <label for="checkbox2">checkbox 2</label>
      <br />
      <br />
      <br />
      <label for="pulldown1"></label>
      <select name="pulldown1" id="pulldown1">
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
      </select>
      <br />
      <br />
      <label for="pulldown2"></label>
      <select name="pulldown2" id="pulldown2">
        <option value="ASC">sort ASC</option>
        <option value="DESC">sort DESC</option>
      </select>
    </form>
    </body>
    </html>
    Thanks everyone.

    Fred.
    Fred toiling with this myself at the moment. In order to utilize ajax you are going to need some javascript on the client side and by the sounds of things a php script to do some sort of processing, you are pretty vague there to be honest.

    Quick answer would be to investigate jquery and in particular it's $.ajax function, which I must admit I haven't got working yet myself.

    Have a dab at it and post up specific questions might lead to better results to be honest
    www.scaryminds.com ScaryMinds - horror's last colonial outpost.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Sydney, Australia
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fred, sorry for double post but finally got this to work !!!!!! Okay this is different to what you want but should provide a guideline

    HTML page, with additional php and jquery goodness

    Code:
    <?php
    	session_start();
    	
    	if(isset($_SESSION['theme'])) {
    		$style_dir = $_SESSION['theme'];
    	} else {
    		$style_dir = "standard";
    	}
    ?>
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Jeff's Test Page</title>
    		<script type="text/javascript" src="jquery-min.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("#select1").change(function() {
    					var newTheme = $(this).val();
    					$.ajax({
    						type:"POST",
    						url: "theme.php",
    						data: {
    							theme:newTheme
    						},
    						success: function(result) { 
    							//console.log(result); 
    							location.reload(); 
    						}
    					});
    				});
    			});		
    		</script>
    	</head>
    	<body>
    		<h1>Current Theme&nbsp;&nbsp;<?php echo($style_dir); ?></h1>
            <select id="select1">
                <option value="standard">Standard</option>
                <option value="orange">Orange</option>
                <option value="purple">Purple</option>
              </select>	
    	</body>
    </html>
    And the php code

    Code:
    <?php
    	session_start();
    	
    	$result = $_POST['theme'];
    	$_SESSION['theme'] = $result;
    	
    	echo $result
    ?>
    There's a few extra lines of code in there that I used to debug what was happening, for example the echo statement in the php is probably a tad redundant once it's working.
    www.scaryminds.com ScaryMinds - horror's last colonial outpost.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Are you referring to this tutorial, by any chance?

    Quote Originally Posted by freddy88 View Post
    How can I make an AJAX call when the checkbox or pulldown on change, they are call a same PHP file.
    You can do it like this:

    Code:
    $("input:checkbox, input:select").on("change", function(){
      $.ajax({
        type: "POST",
        url: "path/to/your/script.php",
        dataType : 'json',
        cache: false,
        data: {...},
        success: function(res){
          // Do something
        }
      });
    });
    Obviously, you will need to adjust the path to the PHP file, specify the correct dataType and insert any values you want transmitted to the script.

    Within the success callback, the res variable will contain the servers response.

    It might also be a good idea to read this: http://api.jquery.com/jquery.ajax/


Bookmarks

Posting Permissions

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