如何通过动态添加元素后通过javascript / ajax发布值

时间:2016-09-07 17:50:56

标签: javascript ajax get element

我成功地通过javascript动态添加元素,以便在表单中使用新行。

问题是如何从新添加的行中发布值?

增加了成功的行:

var form = '<tr id="package_' + data.custom +'">';
                        form += '<td><input type="text" class="form-control" name="donate[package_name]" id="package_name_'+ data.custom +'"  value="" /> </td>';
                        form += '<td>';
                        form += '<select name="settings[currency]" id="currency_'+ data.custom +'" >';
                        form += '<option value="EUR" selected="selected">EUR</option> ';
                        form += '<option value="USD">USD</option>';
                        form += '</select>';
                        form += '</td>';
                        form += '<td><input type="text" class="form-control" name="donate[money]" id="money_'+ data.custom +'"  value="" /></td>';
                        form += '<td><input type="text" class="form-control" name="donate[price]" id="price_'+ data.custom +'"  value="" /></td>';
                        form += '<td>';
                        form += '<select name="settings[pricetype]" id="pricetype_'+ data.custom +'" >';
                        form += '<option value="credits" selected="selected">Credits</option>';
                        form += '<option value="wcoin" >Wcoin</option> ';
                        form += '</select> ';
                        form += '</td>';
                        form += '<td>';
                        form += '<select name="settings[status]" id="status_'+ data.custom +'" >';
                        form += '<option value="1" selected="selected">On</option> ';
                        form += '<option value="1" >Off</option> ';
                        form += '</select> ';
                        form += '</td>';
                        form += '<td><a href="#" class="bg-green" id="save_'+ data.custom +'">Save</a> / <a href="#" class="bg-red" id="remove_'+ data.custom +'">Remove</a></td></tr>';
                        $('#paypal_packages_table').append( form );

我的ajax帖子:

save_paypal_package: function (unique_id) {

        var package_name    = $('#package_name_'+unique_id).val();
        var currency        = $('#currency_'+unique_id).val();
        var money           = $('#money_'+unique_id).val();
        var price           = $('#price_'+unique_id).val();
        var pricetype       = $('#pricetype_'+unique_id).val();
        var status          = $('#status_'+unique_id).val();
        $.ajax({
            type: 'POST',
            url: MuOnlineWebs.base_url + 'admin-cp/save_paypal_package',
            data: {'type': 'save_paypal_package', unique_id : unique_id, package_name : package_name, currency:currency,money:money,price:price,pricetype:pricetype,status:status},
            dataType: 'json',
            beforeSend: function () {
                App.display_loader();
            },
            complete: function () {
                App.hide_loader();
            },
            success: function (data) {
                if(data.session)
                {
                    App.notifier_box(data.response, data.type, data.error);
                    setTimeout(function () 
                    {
                        location.href = MuOnlineWebs.base_url + 'logged-in';
                    }, 3000);
                }
                else
                {
                    if (data.error) {
                        App.notifier_box(data.response, data.type, data.error);
                    }
                    else 
                    {
                        App.notifier_box(data.response, data.type, data.success);
                    }
                }   
            }
        });
    }

第1步:加载页面 - &gt; https://snag.gy/dRZAq4.jpg 第2步:添加新行 - &gt; https://snag.gy/xHKJSN.jpg

我可以通过加载页面的当前包发布值。但动态添加新行不返回任何内容。有什么想法吗?

提前致谢

1 个答案:

答案 0 :(得分:0)

您似乎为每个元素ID都有一些命名方案。为什么不呢

ClientRect.prototype.toJSON = function(){ return { top: this.top } }

JSON.stringify(document.body.getBoundingClientRect())

"{"top":-583}"