Ajax - Complete text fields with data from MySQL according to value from Select box

[PloMar]

I have a Select box and options with IDs of the rows from a MySQL table.
In that form there are 3 text fields.
Now, when I select an option from the Select-box, I want to complete those 3 text fields with data from MySQL according to the ID of the selected option, without reloading the page.
This is the form with the Select-box and the text fields.

Code: Select all

<form action="script.php" method="post">
<select id="sel" name="sel">
 <option value="1">ID 1</option>
 <option value="2">ID 2</option>
 <option value="3">ID 3</option>
</select>
<input type="text" name="title" id="title" size="50" />
<input type="text" name="descript" id="descript" size="50" />
<textarea name="content" id="content" rows="7" cols="52"></textarea>
<input type="submit" value="Send" />
</form>

Now, I think I have to use JavaScript / Ajax to get data from php and add it in text fields without reloading the page.
Any ideea or example?

To make that script you need to know how to work with JavaScript /Ajax and with data in JSON format.
1. Register an "onchange" event to the Select-box to call an Ajax function that sends the selected value to a php file.
2. The php script in that file Selects data from MySQL using the value received from Ajax, then sends an array with data in JSON format.
3. The Ajax function receives that json, gets its data and add it into the text fields.

The Array with data from MySQL that must be returned in JSON format should be like this:

Code: Select all

$jsn = array();
if(isset($_POST['id'])) {
  $sql = "SELECT * FROM table WHERE id = ". intval($_POST['id']) ." LIMIT 1";
  // ...

  $jsn['title'] = $row['title'];
  $jsn['descript'] = $row['descript'];
  $jsn['content'] = $row['content'];
}
echo json_encode($jsn);

Here is the form with the Select-box and the text fields, and the JavaScript /Ajax code:

Code: Select all

<form action="script.php" method="post">
<select id="sel" name="sel">
 <option value="1">ID 1</option>
 <option value="2">ID 2</option>
 <option value="3">ID 3</option>
</select>
<input type="text" name="title" id="title" size="50" />
<input type="text" name="descript" id="descript" size="50" />
<textarea name="content" id="content" rows="7" cols="52"></textarea>
<input type="submit" value="Send" />
</form>
<script>
// sends data to a php file, via POST, and displays the received answer
function ajaxReq(id) {
  var cerere_http = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");		// XMLHttpRequest object

  // create pairs index=value with data that must be sent to php
  var  datas = 'id='+ id;

  cerere_http.open("POST", 'file.php', true);			// Creaza cererea

  // send datas to php via POST
  cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  cerere_http.send(datas);

  // if response is received completly 
  cerere_http.onreadystatechange = function() {
    if (cerere_http.readyState == 4) {
      var jsn = JSON.parse(cerere_http.responseText);  // convert the received json into an object for javascript

      // add data in text fields
      document.getElementById('title').value = jsn['title'];
      document.getElementById('descript').value = jsn['descript'];
      document.getElementById('content').value = jsn['content'];
    }
  }
}

// register change event to #sel to call ajaxReq()
document.getElementById('sel').addEventListener('change', function() { ajaxReq(this.value)});
</script>

If you don't know how to implement this code in your script, try to study the JavaScript and Ajax courses from this website.