使用ajax提交表格

Question

I have a form of which I am submitting data using ajax.But firebug gives me the error "ReferenceError: editUser is not defined".The form is in a modal and am using the form to edit user information. What is the issue please? My form is :

<script type="text/javascript">
  function editUser(ref) {
  var user_id=ref;
  var password= document.getElementById("password"+ref).value;
  var userName= document.getElementById("userName"+ref).value;
  var firstName= document.getElementById("firstName"+ref).value;
  var lastName= document.getElementById("lastName"+ref).value;
  var role= document.getElementById("role"+ref).value;
var resp;
 if (window.XMLHttpRequest) {
    resp = new XMLHttpRequest();
    xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "user_id="+user_id+"&password="+password+"&userName="+userName+"&firstName="+firstName+"&lastName="lastName+"&role="+role
     xmlhttp.open("POST", 
      "update_user.php"); 
     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xmlhttp.send(data);
   xmlhttp.onreadystatechange =
  function display_data() {
   if (xmlhttp.readyState == 4 && xmlhttp.status==200) {

        alert(resp.responseText);    
         location.reload(true);
     } 
     }
  }
  </script>

echo '<div class="modal fade" id="users'.$ref.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
        echo     '<div class="modal-dialog">';
        echo     '<div class="modal-content">';
        echo   '<div class="modal-header">';
        echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        echo '<h4 class="modal-title">Edit User Information</h4>';
        echo' </div>';
        echo  '<div class="modal-body">';
        echo '<form method="post" action="users.php" id="edit">';
        echo '<label class="control-label col-md-3" >Username:</label><input class="form-control" name="userName" id="userName" style="width:310px" type="text" value="'.$row['userName'].'" required><br>';
        echo '<label class="control-label col-md-3" >Password:</label><input class="form-control" name="password" id="password" style="width:310px" type="text" value="'.$row['password'].'"required><br>';
        echo  '<label class="control-label col-md-3" >First Name:</label><input class="form-control" name="firstName" id="firstName" style="width:310px" type="text" value="'.$row['firstName'].'" required><br>';
        echo '<label class="control-label col-md-3" >Last Name:</label><input class="form-control" name="lastName" id="lastName" style="width:310px" type="text" value="'.$row['lastName'].'" required><br>';
        echo '<label class="control-label col-md-3" >Role:</label>';
        echo ' <select class="form-control" style="width:310px" name="role" id="role">';
        echo '<option value="'.$row['role'].'">'.$row['role'].'</option>';
        echo '<option value="Administrator">Administrator</option>';
        echo '<option value="Admissions">Admissions Officer</option>';
        echo '<option value="Finance">Finance Officer</option>';
        echo '<option value="Lecturer">Lecturer</option>';
        echo '<option value="Timetable">Time Tabling Officer</option>';
        echo ' <option value="Librarian">Librarian</option>';
        echo '<option value="Hostelier">Accomodation Officer</option>';
        echo '<option value="Election">Election Officer</option>';
        echo '<option value="Health">Health Officer</option>';
        echo '</select>';
        echo'<br>';
        echo'</form>';
        echo'</div>';
        echo'<div class="modal-footer">';
        echo'<button type="button" class="btn btn-default btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove glyphicon-large"></i>Cancel</button>';
        echo'<button type="button" class="btn btn-default btn-success" data-dismiss="modal" onclick="editUser('.$ref.')">Save</button>';
        echo'</div>';
        echo'</div>';
        echo'</div>';
        echo '</div>';
        echo '</div>';
        echo "<script> $('#users$ref').modal(show)</script>";

update_user.php:
<?php include('includes/conn.php');?>
<?php 
$id = intval($_POST['user_id']);
$userName = $_POST['userName'];
$password = $_POST['password'];
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$role = $_POST['role'];

$sql="UPDATE users SET userName='$userName',password='$password',firstName='$firstName',lastName='$lastName',role='$role' WHERE id='$id' ";
$query=mysqli_query($query) or die(mysqli_error($conn));
if($query)
{
    echo "Operation was successful";
}
else
{
    echo "An error occured.Retry";
}
?> 

Answer 1

i have used a similiar function to post to a chat, ive used this code on the form page:

JQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Script:

<script type="text/javascript">$(document).ready(function(){ //IF THE USER SUBMIT THE FORM $("#submitform").click(function(){ var input_1 = $("#input_1").val(); $.post("/submit.php", {text: input_1}); $("#input_1").attr("value",""); return false; }); });</script>

Submit.php:<?php $text = $_POST['input_1']; //Your code ?>

Not really used to answer questions on here, so any guidelines on how to provide better help in the future would help out :)