AJAX call when pulldown and checkbox onchange problem

JavaScript
1

Hi Everyone,

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



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

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

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 :slight_smile:

4

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


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


<?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.

5

Hi there,

Are you referring to this tutorial, by any chance?

You can do it like this:

$("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/