Question

在javascript中我正在创建多个表单并输入到html我们这样的ajax / js：

function addProduct(product) {
                    var html = '';
                    html += '<div>'
                    html += '<form id="product-form">';
                    html += '<div class="city">'+product['product_name']+'</div>'
                    html += '<div class="state">'+product['product_price']+'</div>'
                    html += '<input type="hidden" name="product_id" value="'+product['product_id']+'" id="product_id" >'
                    html += '<a href="#" class="whiteButton submit" id="view-product-button" >View</a>'
                    html += '</form>'
                    html += '</div>'
                    var insert = $(html);
                    $('#main').append(html);
                }

使用不同的product_id创建这些表单的倍数。我遇到的问题是获取该表单的值。我能够正确识别提交的表单，但我不确定输入中的product_id。到目前为止，我有这个：

$('#main').on('submit', '#product-form', function() {

                    var product_id = $('?????').val()

                });

如何从提交的表单中获取产品ID和其他相关数据？

Answer 1

对表单使用class而不是id并使用submit按钮而不是“a tag”，然后像这样生成提交函数

$('.form_class').on('submit', function(e){
    e.preventDefault();
    var form = $(this);
    var formUrl=form.attr('action');
    var product_id = $('#product_id', form).val();

    $.ajax({
        type: "POST",
        url: formUrl,
        data: product_id, // or use form.serialize();
        success: function(data){
            // code goes here;
        },
        error:function (xhr, ajaxOptions, thrownError){
            // code goes here;
        }
    });
});

Answer 2

您可以为jQuery $()函数提供上下文：

var product_id = $('input[name=product_id]', this).val();

'input...'选择器仅适用于第二个参数的上下文，在本例中为this，其中this将由jQuery设置为其中的当前表单元素submit处理程序。

或者，您可以先选择当前表单，然后选择其中的.find()元素：

var product_id = $(this).find('input[name=product_id]').val();

请注意，我是按名称选择输入的，因为虽然您已为该元素指定id属性，但将相同的id分配给多个元素无效。

Answer 3

$(this).find('.city').text();

Answer 4

简短的回答是：

$('#main').on('submit', '#product-form', function() {
    var product_id = $(this).children('input[name=product_id]').val();
});

但我可以看到你的功能有问题。事实上，多次调用addProduct(...)最终会使您的DOM失效，因为您将拥有更多具有相同ID的元素（product-form，product_id和view-product-button）。更好地回顾它背后的整个想法......

Answer 5

首先，您不能创建具有相同ID的多个元素。使用课程。你的javascript中有很多id，但对于Form，它将是： html += '<form class="product-form">';用于表单声明，$('#main').on('submit', '.product-form', function() {用于捕获事件。

然后，当您捕获事件时，this将引用当前事件目标。您可以使用以下命令检索产品的值：$（'input [name = product_id]'，this）[0] .value

AJAX / Javascript获取提交的表单数据

5 个答案: