AJAX表单提交到MYSQL而无需刷新

Question

I have a php code that loops to create multiple separate forms with a submit button for each. I am trying to use JS to update the MYSQL with the form data without leaving the page

The Form (simplified)

<form name='myform'>
<SELECT class='index' NAME='album' id='album'>
    <option value='1'>"PUBLIC"</option>
    <option value='2'>"PRIVATE"</option>
    <option value='3'>"FRIENDS"</option>
</select>
<input type="text" name="title" size="40" maxlength="256" value="">
<textarea name="caption" cols="37" rows="3"></textarea>
Photo Rating:&nbsp;
<input type="radio" name="rate" value="1">ON&nbsp;
<input type="radio" name="rate" value="0" checked>OFF&nbsp;&nbsp;
<input type="checkbox" name="del" value="1"> Delete Photo&nbsp;
<?php
<input type='submit' name='submit' value='Save changes to this photo' onClick=\"picupdate('include/picupdate.php', '1', 'picpg');\">";
?>
</tr></table></form>

The JS

function picupdate(php_file, pid, where) {
  var request =  get_XmlHttp();     // call the function for the XMLHttpRequest instance
  var a = document.myform.album.value;
  var b = document.myform.title.value;
  var c = document.myform.caption.value;
  var d = document.myform.rate.value;
  var e = document.myform.del.value;
  var  the_data = 'pid='+pid+'&album='+a+'&title='+b+'&caption='+c+'&rate='+d+'&del='+e;

  request.open("POST", php_file, true);         // set the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);       // calls the send() method with datas as parameter

  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(where).innerHTML = request.responseText;
    }
  }
}

The PHP for updating MYSQL

$pid=$_POST['pid'];
$album=$_POST['album'];
$title=$_POST['title'];
$caption=$_POST['caption'];
$rate=$_POST['rate'];
$del=$_POST['del'];
$db->query("UPDATE photos SET album = '".$album."', title = '".$title."', caption = '".$caption."', rate = '".$rate."' WHERE pid = '".$pid."'");

The reaction on submitting should be the MYSQL updating in the background with no changes to what the user sees. However it is not updating the MYSQL at all.

Answer 1

Got it to work by changing the JS to

function picupdate(php_file, pid, where) {
  var request =  get_XmlHttp();     // call the function for the XMLHttpRequest instance
  var a = document.getElementById('album').value;
  var b = document.getElementById('title').value;
  var c = document.getElementById('caption').value;
  var d = document.getElementById('rate').value;
  var e = document.getElementById('del').checked;
  var  the_data = 'pid='+pid+'&album='+a+'&title='+b+'&caption='+c+'&rate='+d+'&del='+e;

  request.open("POST", php_file, true);         // set the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);       // calls the send() method with datas as parameter

  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(where).innerHTML = request.responseText;
    }
  }
}

Thanks all