動態獲取新添加的文本框值

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++;
}