Question

I have a multi-form app that gathers some information via AJAX and then allows the user to update that information and submit it again while continuing through the form.

The goal is to eliminate multiple pages to perform simple record updates.

My jQuery .post() returns the ‘new’ form with new values, but my second form does not submit the returned values, even the ‘delete’ returns either object.HTMLElement or undefined.

Please help, as I’m a jQuery newbie.

index.php

<form id="getCustomer">
    <select>
        <option value="1">John Doe</option>
        <option value="2">Jane Doe</option>
    </select>
</form>
<div id="customer_info">
    <form id="updateCustomer">
        <input type="text" name="firstName" value="" />
        <input type="text" name="lastName" value="" />
        <input type="submit" id="updateCustomer" value="Update" />
        <input type="submit" id="deleteCustomer" value="Delete" />
    </form>
</div>
<div id="info_status"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    //AJAX selected customer
    $('#getCustomer').change(function(){
    var id = $(this).val();
        $.post(
            'inc/getCust.inc.php',
            {id:id},
            function(output){
                $('#customer_info').html(output).show();
        });
    });
    //Prevent default form actions
    $('form').live('submit', function(){
        return false;// On submit return false
    });

    //AJAX Update Customer
    $('#updateCustomer').live('click', function(){
        var fname = $('input[name=firstName]').val();
        var lname = $('input[name=lastName]').val();
        $.post(
            'inc/updateCust.inc.php',
            { },
            function(output){
                $('#info_status').html(output).show();
        });
    });
    //AJAX Delete Customer
    $('#deleteCustomer').live('click', function(){
        var fname = $('input[name=firstName]').val();
        var lname = $('input[name=lastName]').val();
        var deleteCust = confirm('Delete: ' + c_fname + ' ' + c_lname + '?');
        if(deleteCust){
            $.post(
                'inc/deleteCust.inc.php',
                { id:id },
                function(output){
                    $('#info_status').html(output).show();
                }
            );
        }
    });
</script>

getCust.inc.php

<?php getCust($_POST['id']);?>
<form id="updateCustomer">
    <input type="text" name="firstName" value="<?php echo $CUST['fname'];?>" />
    <input type="text" name="lastName" value="<?php echo $CUST['lname'];?>" />
    <input type="submit" id="updateCustomer" value="Update" />
    <input type="submit" id="deleteCustomer" value="Delete" />
</form>

Answer 1

So, I was unable to resolve the usage of $('input[name=firstName]').val();

However, after some modification $('#firstName').val(); is working.

Final Working index.php code:

<form id="getCustomer">
    <select>
        <option value="1">John Doe</option>
        <option value="2">Jane Doe</option>
    </select>
</form>
<div id="customer_info">
    <form id="updateCustomer">
        <input type="text" id="firstName" value="" />
        <input type="text" id="lastName" value="" />
        <input type="submit" id="updateCustomer" value="Update" />
        <input type="submit" id="deleteCustomer" value="Delete" />
    </form>
</div>
<div id="info_status"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    //AJAX selected customer
    $('#getCustomer').change(function(){
    var id = $(this).val();
        $.post(
            'inc/getCust.inc.php',
            {id:id},
            function(output){
                $('#customer_info').html(output).show();
        });
    });
    //Prevent default form actions
    $('form').live('submit', function(){
        return false;// On submit return false
    });
    //AJAX Update Customer
    $('#updateCustomer').live('click', function(){
        var fname = $('#firstName').val();
        var lname = $('#lastName').val();
        $.post(
            'inc/updateCust.inc.php',
            { },
            function(output){
                $('#info_status').html(output).show();
        });
    });
    //AJAX Delete Customer
    $('#deleteCustomer').live('click', function(){
        var fname = $('#firstName').val();
        var lname = $('#lastName').val();
        var deleteCust = confirm('Delete: ' + fname + ' ' + lname + '?');
        if(deleteCust){
            $.post(
                'inc/deleteCust.inc.php',
                { id:id },
                function(output){
                    $('#info_status').html(output).show();
                }
            );
        }
    });
</script>