为什么我的Ajax无法在输入表单中获取当前键入的字符串？

Question

I have a simple form, then I placed some data from the table to each of the input forms value attribute. now my problem is, whenever i typed something new to the input form, to update the data, it's unable to pick up the currently typed string, am not sure how to solve this, because I think it is picking up the value echoed out instead of the currently typed string when on this update page,

here's my front-end

    <fieldset id="personaldetails">
    <legend>Personal Details</legend>
    Resume Title: <input type="text" name="resumetitle" id="resumetitle" value="<?php echo $v['ResumeTitle']; ?>" size="50" maxlength="50" /><br />
    Name: <input type="text" name="cvname" id="cvname" size="30" maxlength="30" value="<?php echo $v['Name']; ?>" /><br />
    DOB: <input type="text" id="datepicker" name="dob" value="<?php $date = new DateTime($v['DOB']); echo $date->format('m/d/Y'); ?>" /><br />
    Gender:  <input type="radio" name="gender" id="gender-male" value="1" <?php if($v['Gender'] == 1){ echo "checked"; } ?>/> <b>Male</b> |
     <input type="radio" name="gender" id="gender-female" value="0" <?php if($v['Gender'] == 0){ echo "checked"; } ?>/> <b>Female</b><br /><br />
    <input type="hidden" name="cvid" id="cvid" value="<?php echo $v['ResumeID']; ?>" />
    <button name="pdetails" id="pdetails">Update</button>
    </fieldset><br /><br />

//here's my js

$(document).ready(function(){
 var resumetitle = $('#resumetitle').val();
 var cvid = $('input[type="hidden"]').val();
 var name = $('#cvname').val();
 var dob = $('#datepicker').val();
 var gender = $('input[name="gender"]:checked').val();


$('button#pdetails').click(function(){
   $.ajax({
      type: "POST",
      url: "classes/ajax.resumeupdate.php",
      data: "resumeid="+cvid+"&resumetitle="+resumetitle+"&name="+name+"&dob="+dob+"&gender="+gender,
      success: function(){
        //window.location = "resumeview.php?cvid="+cvid;
      },
   });
});


});

//here's my php code

require 'class.resume.php';

$db = new Resume();

if(isset($_POST['resumetitle']) || isset($_POST['name']) || isset($_POST['dob']) ||
   isset($_POST['gender']) || isset($_POST['cvid'])){
    $result =  $db->updatepdetails($_POST['resumetitle'],$_POST['name'],$_POST['dob'],$_POST['gender'],$_POST['cvid']);
    if($result){
      echo "success!";
    } else {
      echo "failed! ".$db->error;
    }
   }

Answer 1

Your javascript is resolving the form values just once (on page load), so if you enter something after the page has loaded, the variables don't change.

You can simply calculate the values inside the Ajax callback instead. But what you really should do is use jQuery's $.serialize() function, which creates a standard a=1&b=2&c=3 querystring including the (properly escaped) form data:

$(function(){
  $('button#pdetails').click(function(){
    $.ajax({
      type: "POST",
      url: "classes/ajax.resumeupdate.php",
      data: $('form').serialize(),
      success: function(){
        //window.location = "resumeview.php?cvid="+cvid;
      }
    });
  });
});

Also note that you had a trailing comma after the success function - this will fail in IE so I've changed that as well.

Answer 2

You are only reading the values on document ready, move that code into the click event:

$(document).ready(function(){
   $('button#pdetails').click(function(){
     var resumetitle = $('#resumetitle').val();
     var cvid = $('input[type="hidden"]').val();
     var name = $('#cvname').val();
     var dob = $('#datepicker').val();
     var gender = $('input[name="gender"]:checked').val();
     $.ajax({
       type: "POST",
       url: "classes/ajax.resumeupdate.php",
       data: "resumeid="+cvid+"&resumetitle="+resumetitle+"&name="+name+"&dob="+dob+"&gender="+gender,
       success: function(){
           //window.location = "resumeview.php?cvid="+cvid;
       },
     });
   });
});