Question

我正在尝试使用js和j查询填充html表单，我遇到了问题。

表单根据用户请求增长，用户需要填写4个不同的输入，如果他想要，他可以点击一个按钮并添加另外4个输入。这是表格：

<form action="#main" method="post" id="exercise-form">
 <div data-role="header" class="header" data-theme="a" data-position="fixed">
                <a class="ui-btn-right" data-icon="check" onclick="$('form#exercise-form').trigger('submit');
                        resetExerciseForm();" data-iconpos="notext"></a>
                <h1 class="text">Add a Workout</h1>
                <a href="#main" data-role="button" class="ui-btn-left" data-icon="home" data-iconpos="notext" onclick="$('form#exercise-form').trigger('reset');
                        resetExerciseForm();"></a>
            </div>

            <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
                <label for="date" class="text">Workout Date:</label>
                <input type="date" name="date" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset form-element serializable" style="color: white; font-family:'Ariel'; text-shadow:none;">
            </div>
            <br>

            <div id="exercise-template" style="display: none;">
                <!-- Exercise name -->
                <div data-role="fieldcontain">
                    <label for="ex-name" class="text">Exercise Name:</label>
                    <input class="form-element serializable" type="text" name="ex-name-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
                </div>

                <div class="ui-grid-b">
                    <!-- Number of Sets -->
                    <div class="ui-block-c">
                        <div data-role="fieldcontain">
                            <label for="set-number" class="text">Sets:</label>
                            <input class="form-element serializable" type="number" name="set-number-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
                        </div>
                    </div>

                    <!-- Number of Repetitions -->
                    <div class="ui-block-c">
                        <div data-role="fieldcontain">
                            <label for="rpt-number" class="text">Repetitions:</label>
                            <input class="form-element serializable" type="number" name="rpt-number-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
                        </div>
                    </div>

                    <!-- Weight -->
                    <div class="ui-block-c">
                        <div data-role="fieldcontain">
                            <label for="weight" class="text">Weight:</label>
                            <input class="form-element serializable" type="number" name="weight-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
                        </div>
                    </div>
                </div>
                <br>
            </div>
            <label for="text-area" class="text">Json:</label>
            <span id="text-area" style="color: white; font-family:'Ariel'; text-shadow:none;"></span>
        </form>

当用户想要再添加一个练习时，下一个java脚本正在运行：

function addExerciseForm() {
    var oldId = exerciseId;
    var newId = ++exerciseId;

    document.getElementsByName('ex-name' + oldId).name = 'ex-name' + newId;
    document.getElementsByName('set-number' + oldId).name = 'set-number' + newId;
    document.getElementsByName('rpt-number' + oldId).name = 'rpt-number' + newId;
    document.getElementsByName('weight' + oldId).name = 'weight' + newId;

    var clonable = document.getElementById('exercise-template');
    var clone = clonable.cloneNode(true); //true for deep clone

    clonable.id = "exercise" + newId;
    clone.id = 'exercise-template';
    clonable.style.display = 'initial';

    // var addButton = document.getElementById('add-exercise-button');
    clonable.parentNode.appendChild(clone);
    clonable.removedNode();
    clone.parentNode.appendChild(clonable);
}

正如你可以看到带有id运动模板的洞div正在被克隆，其中不同的id增加了1。当我克隆div时，我试图更改名称，所以当我从json文件填充它时，我将不会有一个同名的标签。

问题是，当我在克隆div后查看DOM时，我可以看到名称没有改变，而如果我使用chrome调试模式，我可以看到该行：

document.getElementsByName('ex-name' + oldId).name = 'ex-name' + newId;

实际上给了我想要的元素。但填充脚本无法找到新元素的名称。

这是填充脚本：

function populateExerciseForm() {
    $.ajax({
        dataType: 'json',
        type: 'GET',
        url: 'json/exercise.json',
        xhrFields: {
            withCredentials: true
        },
        success: function (response, status) {
            console.log(response, status);
            if (status === "success") {
                // we expect a response in a JSON format
                // response = JSON.parse(response);
                $('#exercise-form').populate(response);
            }
        }
    });
}

任何人都知道这是什么问题？或者例如我如何获取下一个json并让前4个输入中的前4个值等等？？

json示例：

{
    "ex-name-1": "abc",
        "set-number-1": 2,
        "rpt-number-1": 3,
        "weight-1": 20,
        "ex-name-1": "efg",
        "set-number-1": 4,
        "rpt-number-1": 4,
        "weight-1": 123
}

我希望我的问题很明确。提前谢谢!!

用json填充动态表单

0 个答案: