Форма 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>