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-＆gt; 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>

jQuery AJAX Form不返回值

2 个答案: