Question

The first script turns text into an editable text field when clicked. After the text is edited a submit button is pressed that activates the second script. The second script should send some info to another page via AJAX to be eventually submitted into a database. The first two variables (projectID and contactType) are sent through the AJAX just fine, but updatedInfo (the variable that’s supposed to have the edited text in it) is always blank. I’m assuming it’s something stupid I’m missing but I can’t figure it out. The two scripts are below.

<script type="text/javascript">
    $(document).ready(function() {
        var alreadyActive = "";
        $(".editable").on("click", function () {
            if(!alreadyActive) {
                OriginalText = $(this).text();
                divValue = $(this).attr('value');
                $(this).html("<form class='edit-form' name='" + divValue + "'><input type='text' value='" + OriginalText + "' /><input type='submit' value='Update' /></form>");
                alreadyActive = "true";
            }
        });
    });
</script>
<script type="text/javascript">
    $('body').delegate('.edit-form','submit',function(e){
        e.preventDefault();
        var projectID = <?php echo $projectID ?>;
        var contactType = $(this).attr('name');
        var updatedInfo = $(this).val();

        $.ajax({
            url: 'editinplace.php?projectID=' + projectID + '&contactType=' + contactType + '&updatedInfo=' + updatedInfo,
        });
    });
</script>

Answer 1

If you’re trying to get the value of the text field inside the form, then you want to change:

var updatedInfo = $(this).val();

to:

var updatedInfo = $(this).find('input[type="text"]:first').val();

What your code is doing is looking for a value attribute on the <form> tag itself. Instead, since the value you’re after is located in the <input> tag, you have to get jQuery to go look at that specific tag.