使用AJAX发布输入OnChange

Question

Just some AJAX troubleshooting.

Context: Building a large table with input that should post as soon as their filled out. Thought the onchange trigger would work best.

Issue: I can't seem to get the javascript to pass the value of the input over to the .php sheet.

---

header.php

$(document).ready(function(){
  $(".matchedit").onchange(function postinput(){ // Problem 1: change(
    var matchvalue = $(this).value; // Problem 2: $(this).val();
    $.ajax
        ({ 
            url: 'matchedit-data.php',
            data: {matchvalue: matchvalue},
            type: 'post'
        });
  });
}); 

page.php

<tr>
  <td>
    <input name="grp1" type="text" class="matchedit" onchange="postinput()">
  </td>
</tr>

matchedit-data.php

$entry = $_POST['matchvalue'];
$conn->query("UPDATE matches SET grp = '$entry' WHERE mid = 'm1'");

---

Thanks in advance!

Answer 1

For reading the value of a jQuery wrapped input .val() method should be used, value here returns an undefined value. Also you should either use .on('change') or change() method, jQuery object doesn't have onchange method.

$(document).ready(function(){
    $(".matchedit").on('change', function postinput(){
        var matchvalue = $(this).val(); // this.value
        $.ajax({ 
            url: 'matchedit-data.php',
            data: { matchvalue: matchvalue },
            type: 'post'
        }).done(function(responseData) {
            console.log('Done: ', responseData);
        }).fail(function() {
            console.log('Failed');
        });
    });
});