Javascript แสดงค่าจาก input ฟอร์มที่ชื่อเดียวกัน เก็บเป็น array
24 ก.พ. 2020 , 5,345 Views , หมวดหมู่ jQuery,JavaScript,Ajax โค๊ดดิ้ง , ป้ายกำกับ:array, input form, javascript, same nameตัวอย่างโค๊ดส่วน html โดยสร้างฟอร์มกรอก url ตามโค๊ดด้านล่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="row mt-3 mb-3"> <div class="col-sm"> <form> <div id="disp_from"> <div class="form-group"> <label for="url">Url(1)</label> <input type="url" placeholder="https://example.com" name="url[]" value="" class="url"> </div> <div class="form-group"> <label for="url">Url(2)</label> <input type="url" placeholder="https://example.com" name="url[]" value="" class="url"> </div> <div class="form-group"> <label for="url">Url(3)</label> <input type="url" placeholder="https://example.com" name="url[]" value="" class="url"> </div> <div class="form-group"> <label for="url">Url(4)</label> <input type="url" placeholder="https://example.com" name="url[]" value="" class="url"> </div> <div class="form-group"> <label for="url">Url(5)</label> <input type="url" placeholder="https://example.com" name="url[]" value="" class="url"> </div> <div class="form-group"> <label for="url">Url(6)</label> <input type="url" placeholder="https://example.com" name="url[]" value="" class="url"> </div> </div> <button type="button" id="btnsave" class="btn btn-primary">Save</button> </form> </div> </div> |
ส่วนของ Javascript เก็บข้อมูลจาก input form ด้านบนตอนกดปุ่ม Save เก็บเป็น array
โดยอ้างอิงไปที่ class “url”
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let btnsave = document.getElementById('btnsave'); btnsave.onclick = function(element) { var items = []; var elements = document.getElementsByClassName("url"); for(var i=0; i<elements.length; i++) { if(elements[i].value){ items.push(elements[i].value); } } console.log(items); } |
ผลลัพธ์
|
1 |
["seenual.com", "youtube.com", "facebook.com"] |
Related Posts
ป้ายกำกับ:array, input form, javascript, same name
