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

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;
       },
     });
   });
});