Question

关于以下内容，我希望在提交表单时生成代码。我已经添加了一个按钮来克隆表单中的块（提供添加另一批skus的选项）并有一个删除选项按钮，如果需要在提交之前删除它。

我遇到的问题是我在从DOM获取内容时手动添加克隆元素（document.getElementbyId）。目前，表格似乎只允许我在添加第二个skus列表时添加。

我只想知道是否存在根据是否存在1或2个skus列表来检索值的问题。我确信有更好/更有活力的输出内容的方式，而不是这似乎不起作用：

product_widget_start + "<br />" + product_title + "<br />" + product_skus + 
 "<br />" + product_widget_end + "<br /><br />" + product_widget_start + " 
<br />" + product_title_2 + "<br />" + product_skus_2 + "<br />" + 
 product_widget_end

完整示例

/*trial for clone and swap ids*/
$(document).ready(function() {

    var currentID = 1;

    $(':button#adder').on('click', function() {
        currentID++;

        var clone = $('#product_skus').clone();
        clone.attr('id', 'product_skus-1');

        clone.children('.carous_title').attr('id', 'title_carousel-' + currentID);
        clone.children('.carous_skus').attr('id', 'skus-' + currentID);

        clone.appendTo('#product_skus');

    });

    $(':button#adder1').on('click', function() {
        $(".sku_names").last().remove();
    });


});


function myFunction() {

    /*CREATION OF MAIN BANNER/HEADER WIDGET*/

    /*widget start*/

    var quote = '"';

    var header_widget_start = "{{widget type=" + quote + "banner" + quote;
    var header_title = "title=" + quote + document.getElementById("title").value + quote;
    var header_desc = "description=" + quote + document.getElementById("desc").value + quote;
    var header_alt = "alt=" + quote + document.getElementById("alt").value + quote;
    var header_img_url = "image_large=" + quote + document.getElementById("img_url").value + quote;
    var header_widget_end = "template=" + quote + "banner" + quote + "}}";

    /*widget end*/

    /*END OF CREATION OF MAIN BANNER/HEADER WIDGET*/


    /*CREATION OF PRODUCT SKUS WIDGET*/

    /*widget start*/

    var product_widget_start = "{{widget=" + quote + "cat" + quote + "<br />" + "limit=" + quote + "4" + quote;
    var product_title = "title=" + quote + document.getElementById("title_carousel").value + quote;
    var product_skus = "product_skus=" + quote + document.getElementById("skus").value + quote;
    var product_widget_end = "template=" + quote + "skus" + quote + "}}";

    /*widget end*/

    /*optional second widget*/

    var product_title_2 = "title=" + quote + document.getElementById("title_carousel-2").value + quote;
    var product_skus_2 = "product_skus=" + quote + document.getElementById("skus-2").value + quote;

    /*optional second widget end*/

    /*END OF CREATION OF PRODUCT SKUS WIDGET*/

    document.getElementById("top").innerHTML = header_widget_start + "<br />" + header_title + "<br />" + header_desc + "<br />" + header_alt + "<br />" + header_img_url + "<br />" + header_widget_end + "<br /><br />" + product_widget_start + "<br />" + product_title + "<br />" + product_skus + "<br />" + product_widget_end + "<br /><br />" + product_widget_start + "<br />" + product_title_2 + "<br />" + product_skus_2 + "<br />" + product_widget_end;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<div id = "content_left" style = "float:left; width:48%;">

          <form action="" method="post">

                  <h1>Generate</h1>

                  <fieldset>

                    <legend><span class="number">1</span>Header</legend>

                    <label for="name">Title:</label>

                    <input type = "text" id = "title" />

                    <label for="mail">Description:</label>

                    <textarea id = "desc" rows="5" cols="20" /></textarea>

                    <label for="password">Alt:</label>

                    <input type = "text" id = "alt" />

                    <label for="password">Image URL:</label>

                    <input type = "text" id = "img_url" />

                  </fieldset>

                  <fieldset>

                    <legend><span class="number">2</span>Mobile</legend>

                    <label for="name">Title:</label>

                    <input type = "text" id = "" />

                    <label for="mail">Text Colour:</label>

                    <input type = "text" id = "" />

                  </fieldset>

                                          <fieldset class = "sku_names" id = "product_skus">

                    <legend><span class="number">3</span>Product</legend>

                    <label for="name">Title :</label>

                    <input class = "carous_title" type = "text" id = "title_carousel" />

                    <label for="mail">Skus:</label>

                    <input class = "carous_skus" type = "text" id = "skus" />

                  </fieldset>

                  <input id = "adder" type = "button" value = "Add" />
                  <input id = "adder1" type = "button" value = "Remove" />

                </form>

                <button onClick="myFunction()">Generate Code</button>

</div>

<div id = "content_right" style = "float:left; width:48%; padding-left:10px;">

<pre><div></pre>
    <p id="top">

    </p>

    <p id="test1"></p>

</div>

</div>


<script>


  </script>

问题生成代码 - 从DOM中获取值

0 个答案: