Question

我有一个我创建的表单，我希望使用表单中的输入填充一些预编写代码的某些部分。

Javascript如下

$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};

$(function () {
$('form').submit(function (e) {
e.preventDefault();
var oo = $('form').serializeObject();
var template = '<center><a href="{url}" target="_blank" onclick="cmCreateCustomTag(\'8888\',\'-_--_--_--_--_-____{name}_{bannerposition}_{trigger}-_-Pers_MNT_{name}_-_--_-\' + new Date().toISOString() + \'-_-\');" ><img src="{imgsrc}" alt="{alt}" title="{title}"></a></center>';

$('#result').text(
    template.replace(/{url}/g, oo["URL"])
                .replace(/{name}/g, oo["name"])
                .replace(/{trigger}/g, oo["trigger"])
                .replace(/{bannerposition}/g, oo["banner_position"])
                .replace(/{imgsrc}/g, oo["image_src"])
                .replace(/{alt}/g, oo["alt"])
                .replace(/{title}/g, oo["title"])
    );
});

这是entire code in a JsFiddle。

我已经在代码底部的注释部分中包含了最终表单的内容。如何插入数据以便我可以快速使用数据？

Answer 1

如果你只想“漂亮地打印”它，你可以使用这样的东西：

  $(function () {
$('form').submit(function (e) {
    e.preventDefault();
    var res = JSON.stringify($('form').serializeObject());
    //Puts a line break after each comma
    $('#result').html(res.replace(/([,\{\}])/g, function (match) {
        if (match == "," || match == '{') {
            return match + "\n";
        } else {
            return "\n" + match;
        }
    }));
  });
});

demo

Answer 2

我也编辑了上面的代码，但这是我发现根据用户输入在我的特定代码中显示数组的方式。感谢大家的帮助。：）

这是entire code in a JsFiddle。

$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
    if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
    }
    o[this.name].push(this.value || '');
} else {
    o[this.name] = this.value || '';
}
});
return o;
};

$(function () {
$('form').submit(function (e) {
e.preventDefault();
var oo = $('form').serializeObject();
var template = '<center><a href="{url}" target="_blank" onclick="cmCreateCustomTag(\'8888\',\'-_--_--_--_--_-____{name}_{bannerposition}_{trigger}-_-Pers_MNT_{name}_-_--_-\' + new Date().toISOString() + \'-_-\');" ><img src="{imgsrc}" alt="{alt}" title="{title}"></a></center>';

$('#result').text(
template.replace(/{url}/g, oo["URL"])
            .replace(/{name}/g, oo["name"])
            .replace(/{trigger}/g, oo["trigger"])
            .replace(/{bannerposition}/g, oo["banner_position"])
            .replace(/{imgsrc}/g, oo["image_src"])
            .replace(/{alt}/g, oo["alt"])
            .replace(/{title}/g, oo["title"])
);
});

如何让阵列呈现更清洁？

2 个答案:

demo