asked on

jQuery Ajax PHP

I am trying to create my first Ajax Function. I think I am going in the correct direction.

I have a page that contains a form. You can change a <select> option and click update and the form updates. However, I have to pass a javascript variable to the PHP via Ajax.

All of the code is on the same page I conveniently name "ajax". My CMS does not place ".php" or ".html" on the end of the file name.

Here is my code. Please let me know what I need to adjust / change to make it work. Thanks in advance.

<?php
	$state = $_POST['state'];
	
	$base = ee()->db->select('*')
		->from('rates')
		->where('state', $state)
		->limit('1')
		->get();
		
		$bsl = $base->result_array();
		
		$base->free_result();	
	
		 foreach($bsl as $row) {
			$one = $row['one'];
			$two = $row['two'];
			$three = $row['three'];
		  }
?>	


<script>		 
	function ajaxCallback() {
		var state = $('select[name="state"]').find(':selected').val();
	
		$.ajax({
      	url: "ajax",
       	type: "POST",
       	data: state,
    	});
	};
	
	$(document).ready(function () {
		$("form").on("submit", ajaxCallback);          //Your "#" is not a valid selector
    });
</script>
 
<html>
<form method="POST" action="" >
 	<select name="state">
		<option value="one">$100</option>
		<option valoe="two">$200 </option>
		<option valoe="three">$300 </option>
	</select>
</form>	
</html>

Open in new window

Dave Baldwin

The 'ajax' php file must be a stand-alone file on the server. You can't include it in the HTML file because the 'ajax' call goes back to the server. And what you are showing is for jQuery so it must be included before the 'ajax' call or the 'ajax' call won't work.

Robert Granlund

ASKER

@Dave. I don't really understand this line: And what you are showing is for jQuery so it must be included before the 'ajax' call or the 'ajax' call won't work.

Also, is it written correctly?

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

Look at the CDN links on this page: http://jquery.com/download/

Marco Gasi

In addition, I usually give a name to values:

data: {state: state},

Open in new window

Chris Stanyon

Just to add to what's already been said. In your code you're binding to the submit() event of the form. There's no Submit button. You're probably better off binding to the change() event of the <select>:

$('select[name="state"]').on("change", ajaxCallback);

Open in new window

SOLUTION

Marco Gasi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Granlund

ASKER

Thanks for these answers and info. They have me going in the correct direction. I will end this question and start a new one with additional information added.