How to send a value of a input field through javascript to a php file and get the values returned

Question

I have this 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 action="test.php" method="get">
        <input type="text" placeholder="City" id="city" />
        <br />
        <input type="text" placeholder="Region" id="region" />
     </form>
     <div id="result"></div>
</body>
</html>

And this is my php code:

<?php
     $city = $_GET['city'];
     $region = $_GET['region'];
     $result = "You entered " . $city . " and " . $region;
?>

And I want to get the $result from the php file immediately and show it in the div with id result.

I mean to get the results immediately without having to submit @aokaddaoc — Ikari, Jan 04 '15 at 12:16
make a button, when it clicks, send an ajax request to that php. — tom10271, Jan 04 '15 at 12:17
I think you have to read more and ask less... Or at least ask giving more details of what you want... — tomloprod, Jan 04 '15 at 12:25

bluefog · Answer 1 · 2015-01-04T12:29:42.300

As it turns out from your comments, you need to know how to do AJAX. Use jQuery and some hints on the jS part :

$('#region').mouseout(function() {
 $('#result').fadeOut();
 $.ajax({
  url: window.location.href+"api/user/"+$(this).val(),
  dataType: "html"
 }).done(function(data) {
  $('#result').fadeIn();
  $('#result').text(data);
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to send a value of a input field through javascript to a php file and get the values returned

1 Answers1