單擊按鈕后獲取所有輸入字段值。 ( JavaScript )

Question

這是我的第一個問題，希望它的格式正確。 這個想法是在按下 #grabValues 按鈕后，輸入值被存儲到一個數組中以計算總小時數。

我計划將該部分編碼到外部 js 文件中，因為我假設它需要加載到正文中，而另一個需要加載到頭部。

謝謝閱讀。

 console.log('Script has loaded!'); function formMaker(){ var dayCount; var myMonth = document.getElementById('inputMonth').value; console.log(myMonth); if( myMonth.includes('jan', 'Jan', 'JAN')){ dayCount = 31; } else if ( myMonth.includes('feb', 'Feb', 'FEB')){ dayCount = 28; } else if ( myMonth.includes('mar', 'Mar', 'MAR')){ dayCount = 31; } else if ( myMonth.includes('apr', 'Apr', 'APR')){ dayCount = 30; } else if ( myMonth.includes('may', 'May', 'MAY')){ dayCount = 31; } else if ( myMonth.includes('jun', 'Jun', 'JUN')){ dayCount = 30; } else if ( myMonth.includes('jul', 'Jul', 'JUL')){ dayCount = 31; } else if ( myMonth.includes('aug', 'Aug', 'AUG')){ dayCount = 31; } else if ( myMonth.includes('sep', 'Sep', 'SEP')){ dayCount = 30; } else if ( myMonth.includes('oct', 'Oct', 'OCT')){ dayCount = 31; } else if ( myMonth.includes('nov', 'Nov', 'NOV')){ dayCount = 30; } else if ( myMonth.includes('dec', 'Dec', 'DEC')){ dayCount = 31; } else { return; } for(var i=0; i < dayCount; i++){ // Loop this with dayCounter value. var myFormGroup = document.getElementById('myFormGroup'); var myLabel = document.createElement('label'); myLabel.for = 'hours'; myLabel.innerHTML = 'Hours worked:'; // + day/month var myInput = document.createElement('input'); myInput.type = "number"; // Add class of month for later. myInput.className = 'form-control hours ' + myMonth.toString(); myInput.placeholder = 'amount of hours here:'; myFormGroup.appendChild(myLabel); myFormGroup.appendChild(myInput); //Add different id's to each inputfield being created. JQUERY! $('#myFormGroup input').attr('id', function(i) { return 'hour_inputs'+(i++); }) console.log('Form(s) has/have been made, with different input IDs'); } // End of loop /*$("input").blur(function(){ alert("This input field has lost its focus."); }); */ console.log('TEST'); }; // End of formMaker();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="number/css" href="workhours.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="formbuilder.js"></script> <title>Work hours</title> </head> <body> <div class="section_row_main"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Let's calculate the hours you've worked: month here</h2> </div> <div class="col-md-12"> <div class="form-group" id="myFormGroup_test"> <label for='month'>Month:</label> <input type='text' class="form-control month" placeholder="enter month" id="inputMonth"> <button id="formsNow" onclick="formMaker();">Make forms</button> </div> <div class="form-group" id="myFormGroup"> <!-- --> </div> <button id="grabValues">grabValues!</button> </div> </div> </div> <script src="hourChecker.js"></script> </body> </html>

單擊按鈕時，當前返回第一個輸入字段的值：

$('#grabValues').click(function() { 
     $("#myFormGroup input[id^='hour_inputs'][type=number]").val();
     console.log($("#myFormGroup input[id^='hour_inputs']").val()); 
});

Answer 1

您需要使用$.each函數獲取所有元素。 試試這個代碼。

$('#grabValues').click(function() {
    $.each($("#myFormGroup input[id^='hour_inputs'][type=number]"), function( key, value ) {
        console.log(this.value); 
    });
});

單擊按鈕后獲取所有輸入字段值。 ( JavaScript )

問題描述

1 個解決方案

解決方案1
1 已采納 2018-03-01 17:43:45

單擊按鈕后獲取所有輸入字段值。 ( JavaScript )

問題描述

1 個解決方案

解決方案1 1 已采納 2018-03-01 17:43:45

解決方案1
1 已采納 2018-03-01 17:43:45