Выберите правильные значения для ввода формы, одновременно используя несколько форм на одной странице. -PHP AJAX JQUERY

Question

У меня есть таблица, которая генерируется функцией php, в которой каждая строка содержит кнопку действия, которая на самом деле является формой, содержащей скрытые данные.Я хочу, чтобы, когда я нажимаю на кнопку действия, данные из скрытых входных значений передаются в вызов AJAX.

Вот что у меня есть до сих пор: (этот текущий код выбирает данные из 1-гоформа независимо от того, нажал ли пользователь на кнопку действия 2-й формы)

Таблица, содержащая формы

<table class="table">
    <thead>
        <tr>
            <th>Card Type</th>
            <th>Name on Card</th>
            <th>Number</th>
            <th>Expires</th>
            <th>CVC</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>VISA</td>
            <td>testname testlname</td>
            <td>xxxxxxxxxxxx9999</td>
            <td>12 / 15</td>
            <td>123</td>
            <td>
                <form method="post" class="scc">
                    <input type="hidden" value="VISA" name="scc_ccType1" id="scc_ccType1">
                    <input type="hidden" value="testname testlname" name="scc_ccOwner1" id="scc_ccOwner1">
                    <input type="hidden" value="4444777711119999" name="scc_ccNumber1" id="scc_ccNumber1">
                    <input type="hidden" value="12" name="scc_ccExpiresMt" id="scc_ccExpiresMt">
                    <input type="hidden" value="15" name="scc_ccExpiresYr" id="scc_ccExpiresYr">
                    <input type="hidden" value="123" name="scc_ccCVC1" id="scc_ccCVC1">
                    <input type="submit" value="Select Card" name="select_scc" id="select_scc">
                </form>
            </td>
        </tr>
        <tr>
            <td>VISA</td>
            <td>testname testlname</td>
            <td>xxxxxxxxxxxx1111</td>
            <td>12 / 15</td>
            <td>123</td>
            <td>
                <form method="post" class="scc">
                <input type="hidden" value="VISA" name="scc_ccType1" id="scc_ccType1">
                <input type="hidden" value="testname testlname" name="scc_ccOwner1" id="scc_ccOwner1">
                <input type="hidden" value="4444555566661111" name="scc_ccNumber1" id="scc_ccNumber1">
                <input type="hidden" value="12" name="scc_ccExpiresMt" id="scc_ccExpiresMt">
                <input type="hidden" value="15" name="scc_ccExpiresYr" id="scc_ccExpiresYr">
                <input type="hidden" value="123" name="scc_ccCVC1" id="scc_ccCVC1">
                <input type="submit" value="Select Card" name="select_scc" id="select_scc">
                </form>
            </td>
        </tr>
    </tbody>
</table>

Код Jquery

<script defer="defer" type="text/javascript">
$(document).ready(function() {
    $("#select_scc").live("click", function() {

        var postData = {
        'authorize'     : 2 ,
        'cc_type'                       : $("#scc_ccType1").val(),
        'cc_number'                     : $("#scc_ccNumber1").val(),
        'cc_expdate_month'              : $("#scc_ccExpiresMt").val(),
        'cc_expdate_year'               : $("#scc_ccExpiresYr").val(),
        'cc_security_code'              : $("#scc_ccCVC1").val(),
        'owner'                         : $("#scc_ccOwner1").val(),

        };

        $.ajax({
                url: "<?php echo base_url().'admin/creditcard';?>",
                type:'POST',
                data: postData,
                dataType: 'json',
                success: function(scard){
                    alert(scard);
                }
        });

        return false;
    });
});
</script>

Answer 1

Вот гораздо более простой подход, использующий класс формы в качестве селектора, ID не имеет значения. Использование serialize () позволяет избежать необходимости создавать весь объект данных вручную.

live() устарела, но я не знаю, какую версию jQuery вы используете, поэтому придерживаюсь ее пока

$(function(){

$('form.scc').live('submit',(function(){
    var postData = $(this).serialize();
    $.ajax({
            url: "<?php echo base_url().'admin/creditcard';?>",
            type:'POST',
            data: postData,
            dataType: 'json',
            success: function(scard){
                alert(scard);
            }
    });

    return false;
});

});

Answer 2

Во-первых, идентификаторы должны быть уникальными, поэтому, возможно, измените генерирующий их php, добавив вместо него «select_scc» в качестве класса.

Затем сделайте что-нибудь вроде этого:у вас будут проблемы с этой функцией щелчка, если «select_scc» не генерируется, когда пользователь щелкает, а затем просто привязать функцию к элементу, который уже существует.Например, скажите, что все, что сгенерировано, находится внутри предопределенного div, называемого "#container", затем напишите функцию click следующим образом:

$('#container').on('click', 'submit#select_scc', function () {
});

.live устарела и просто указывает на функцию .onтак что простое использование .on напрямую сэкономит вам время загрузки.