如何從多個輸入中獲取價值並使其成為一個輸入？

Question

我有從數據庫生成的輸入，如果數據庫有 3 個輸入變量而不是 PHP 將循環 3x 每個輸入變量。 現在我想制作輸入文本（我們稱之為new input box ），當用戶在每個輸入變量中鍵入值時，它會獲取值。 格式必須是value1,value2,value3等，取決於用戶輸入值的位置。 如果用戶未在輸入 2 中輸入值，則new input box的值將跳過 value2（如我包含的圖片中所示）。 我想在 Javascript 中完成這一切。 我怎樣才能做到這一點？

Answer 1

我最近做過這樣的工作。 它可能會幫助您了解這個想法。

 var full_name = document.getElementById("full_name"); function onChangeFname(x) { full_name.value = x + " "; } function onChangeLname(x) { full_name.value = full_name.value + x + " "; } function onChangeLname(x) { full_name.value = full_name.value + x; }

 <form> <label for="fname">First Name</label> <br /> <input type="text" id="fname" name="fname" onChange="onChangeFname(this.value);" /> <br /> <label for="lname">Last Name</label> <br /> <input type="text" id="lname" name="lname" onChange="onChangeLname(this.value);" /> <br /> <label for="full_name">Full Name</label> <br /> <input type="text" id="full_name" name="full_name" /> <br /> <input type="submit" value="Submit" /> </form>

Answer 2

這是一個例子

 // Get elements const originalInputs = document.querySelectorAll('.original-val'); const newInput = document.querySelector('#new-val'); function displayNewVal() { // Put the 3 values into an array let arr = []; originalInputs.forEach(e => arr.push(e.value)); // Combine them as a string let newVal = arr.join(','); // Set the string to the input value at the bottom newInput.value = newVal; } // When the page is loaded, execute the function window.addEventListener('load', displayNewVal); // When a value is changed, execute the function originalInputs.forEach(input => input.addEventListener('change', displayNewVal));

 <input type="text" value="Aaaaa" class="original-val"> <br> <input type="text" value="" class="original-val"> <br> <input type="text" value="Ccccc" class="original-val"> <hr> <input type="text" value="" id="new-val">

---

編輯：

我個人不推薦使用內聯事件處理程序。

• ❌ <input onChange="myFunc()">

有關更多信息，請參閱：

• 活動介紹-學習web開發| MDN

Answer 3

我建議使用 jQuery 來避免編寫額外的 JS。

 $('button').on('click', function(){ var arr = []; $( "input" ).each(function() { arr.push( $( this ).val()); }); console.log(arr.join(',')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="inpunt_1"> Input 1 </label> <input name="input_1" value="value1" /> <br> <label for="inpunt_2"> Input 2 </label> <input name="input_2" value=" " /> <br> <label for="inpunt_3"> Input 3 </label> <input name="input_3" value="value3" /> <br> <button>Save</button>

Answer 4

這就是您實現功能的方式。 請記住在每個輸入元素 onChange function 中傳遞索引。

 const newValue = []; function inputFunc(value, index) { newValue.splice(index, 1, value) document.getElementById('newInput').value = newValue.join(',') }

 <div> Inputs from database: <input type="text" onchange="inputFunc(this.value, 0)" /> <input type="text" onchange="inputFunc(this.value, 1)" /> <input type="text" onchange="inputFunc(this.value, 2)" /> </div> <div> New Input Value: <input type="text" onchange="newInputFunc()" id="newInput" /> </div>

Answer 5

也許這個例子會對你有所幫助。 輸入字段和表單已經動態，但我使用 jQuery 以獲得更簡單的代碼。

當您使用數據庫中的 ajax 調用輸入字段時，數組形式是臨時的

 $(document).ready(function() { let form = Array('input_1', 'input_2', 'input_3', 'input_4'); let html = ''; for (let i = 0; i < form.length; i++) { html += '<label>' + form[i] + '</label>'; html += '<input type="text" class="input" id="' + form[i] + '"><br>'; } $('#form').html(html); $('.input').on('keyup', function() { let temp = []; $(".input").each(function() { temp.push(this.value); }); $('#new').val(temp.join(',')); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form"></div> <br> <label>New Input Box</label> <input type="text" id="new">