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

Question

In javascript I am creating multiple forms and inputting into html us ajax/js like this:

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);
                }

Multiples of these forms are created with different product_ids. The problem I am running into is getting the values of just that form. I am able to correctly identify the form that was submitted but I am not sure out to the the product_id from the input. So far I have this:

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

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

                });

How can I get the product id and other related data from the form that was submitted?

Answer 1

Use class instead of id for forms and use submit button instead of "a tag", then make your submit function like this

$('.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

You can provide a context to the jQuery $() function:

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

The 'input...' selector will apply only within the context of the second parameter, in this case this , where this will be set by jQuery to be the current form element within the the submit handler.

Alternatively you can select the current form first and then .find() elements within it:

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

Note that I'm selecting the input by name because although you've given that element an id attribute it is not valid to assign the same id to multiple elements.

Answer 3

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

\n

Answer 4

The short answer is:

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

But I can see a problem with your function. In fact, calling addProduct(...) multiple times will end up invalidating your DOM, since you will have more elements with the same id ( product-form , product_id and view-product-button ). Better review the whole idea behind it...

Answer 5

First of all, you must not create multiple elements with the same id. Use class. There is a lot of ids in your javascript, but for the Form it'll be : html += '<form class="product-form">'; for the form declaration and $('#main').on('submit', '.product-form', function() { to catch the event.

Then, when you catch an event, this will refer to the current event target. You can retrieve the value of the product by using : $('input[name=product_id]', this)[0].value