jQuery AJAX 表单不返回值

Question

我有一个多表单应用程序，它通过 AJAX 收集一些信息，然后允许用户更新该信息并在继续处理表单时再次提交。

目标是消除多个页面来执行简单的记录更新。

我的 jQuery .post() 返回带有新值的“新”表单，但我的第二个表单不提交返回的值，即使“删除”返回 object.HTMLElement 或 undefined。

请帮忙，因为我是 jQuery 新手。

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

部分问题是您有一个名为 preCustData 的函数，但您使用 prepCustData() (pre -> prep) 调用它

另一个问题是 prepCustData 实际上并没有做任何事情，只是将值存储在无法在其他地方访问的局部变量中。试试这个：

function prepCustData(){
        var fname = $('input[name=firstName]').val();
        var lname = $('input[name=lastName]').val();
        return {f:fname,l:lname};
}

然后您可以像这样访问数据：

var data=prepCustData();
alert(data[f]);
alert(data[l]);

另一个问题是您的代码使用了一个名为 cid 的变量，该变量似乎无法在任何地方计算。

Answer 2

所以，我无法解决$('input[name=firstName]').val();的用法

但是，经过一些修改，$('#firstName').val(); 可以工作了。

最终工作 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" 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>