Question

我在点击事件中动态添加了一个新的文本框。

我无法获得每个文本框的值，谢谢您的帮助。

在我的html页面中：

   <div id="job-container">
    <p>
        <label>Job Property</label><br>
        <input name="JobProperty[1][job_property]" />
    </p>
  </div>

    <a href="javascript:" id="add-new-jobproperty"  
    onclick="createJobProperty()">Add new job</a>

使用我的Javascript代码

let i = 2;

function createJobProperty() {
    let template = `

    <p>
        <label>Job Property</label><br>
        <input name="JobProperty[${i}][job_property]">
    </p>`;

let container = document.getElementById('job-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
definedLength=i;
i++;

}

Answer 1

尝试将一个类添加到输入中，然后通过className来获取它们（由于标记名，您可能会有其他输入），然后遍历每个输入以获得值。

<input class='my-input' name="JobProperty[${i}][job_property]">使用此代码添加新输入

var inputs = document.getElementsByClassName('my-input');

Array.from(inputs).forEach(function(element) {
  console.log(element.value);
});

//or

Array.prototype.forEach.call(inputs, function(element) {
    console.log(element.value);
});

Answer 2

您可以尝试：

let i = 2;

function createJobProperty() {
    let template = `
    <p>
        <label>Job Property</label><br>
        <input name="JobProperty[` + i + `][job_property]">
    </p>`;

    let container = document.getElementById('job-container');
    let div = document.createElement('div');
    div.innerHTML = template;
    container.appendChild(div);

    let input = container.querySelector("input[name='JobProperty["+i+"][job_property]']");
    // do what ever you want with the input

    definedLength=i;
    i++;
}

动态获取新添加的文本框值

2 个答案: