輸入字段動態填充時如何啟用提交按鈕？
[英]How to enable submit button when input fields are filled dynamically?
問題描述
我制作了一個Web表單，用戶可以在其中使用下拉框填充“輸入”字段。 字段是使用Jquery幫助動態填充的。 填寫所有“輸入”字段后，用戶必須單擊“提交按鈕”以進一步使用我的表單權益。 我不想讓用戶使用“提交”按鈕，直到所有輸入字段都填滿。 為此，我已經在代碼中添加了一個函數。 僅當所有輸入字段都填滿一定數量時，此功能才啟用提交按鈕。 但是使用下拉框動態填充輸入字段時會出現問題。 當使用下拉框填充字段時，“提交”按鈕本身並未啟用。 我必須單擊輸入字段之一來啟用它。
我也嘗試使用Google解決此問題，但無法自行解決。 有人可以幫我解決這個問題。
這是我的代碼
let headings = [] function initInputs(headingList) { jQuery(".fields").append(createInputsHTML(headingList)) } function createInputsHTML(headingList) { let html = '' headingList.forEach(heading => { if (heading !== 'Company') { html += `<label for="${heading}">${heading}: </label>` html += `<input type="number" id="${heading}">` html += '<br>' } }) return html } function getJSON() { return new Promise(resolve => { jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) { resolve(JSON.parse(data)) }); }) } // processing raw JSON data function processRawData(data) { return new Promise(resolve => { const companyData = [] // creating data array // handling multiple sheets Object.values(data).forEach((sheet, index) => { sheet.forEach((company, i) => { companyData.push({ ...company }) // create headings only once if (index === 0 && i === 0) { Object.keys(company).forEach(item => { headings.push(item.trim()) }) } }) }) resolve(companyData) }) } $(async function() { let lists = []; function initAutocomplete(list) { const thisKey = 'Company' $("#company").autocomplete('option', 'source', function(request, response) { response( list.filter(item => { if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) { item.label = item[thisKey] return item } }) ) }) } $("#company").autocomplete({ minLength: 1, source: lists, focus: function(event, ui) { // the "species" is constant - it shouldn't be modified $("#company").val(ui.item.Company); return false; }, select: function(event, ui) { // handling n number of fields / columns headings.forEach(heading => { $('#' + heading).val(ui.item[heading]) }) return false; } }); // starting data download, processing and usage getJSON() .then(json => { return processRawData(json) }) .then(data => { // make the processed data accessible globally lists = data initAutocomplete(lists) initInputs(headings) }) }); // code to set default values if user enters zero or negative values //calculation for Rating value $(document).ready(function(){ $("#Cal").click(function(){ var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0 ; jQuery(".fields input").each(function (){ var idHeading=$(this).attr("id"); if(idHeading=="PE"){ peVal=parseInt($(this).val()); } if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } if(idHeading=="PS"){ psVal=parseFloat($(this).val()); } if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); } if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); } if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); } if(idHeading=="DE"){ deVal=parseFloat($(this).val()); } if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); } if(idHeading=="CR"){ crVal=parseFloat($(this).val()); } }); var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal ; $("output[name='amount']").text(output); }); }); $(document).on("keyup", "input[type='number']", function() { var empty = false; $('input[type="number"]').each(function() { if (($(this).val() == '')) { empty = true; } }); if (empty) { $('#Cal').attr('disabled', 'disabled'); } else { $('#Cal').removeAttr('disabled'); } });
<html> <head> <title>Page Title</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> </head> <body> <div class="ui-widget"> <form id="frm1"> <label for="company">Drop-down box </label> <input id="company"><br /><br /> <div class="fields"></div> <!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY --> <button type="button" id="Cal" disabled="disabled" > Button </button> <p> <output name="amount" for="calculation">0</output> </p> </form> </body> </html>
1 個解決方案
解決方案1
1 已采納 2019-08-26 18:53:49
最后keyup你的代碼就可以了（ $(document).on("keyup", "input[type='number']", ... ); ），但你忘了，它只會觸發事件何時keyup觸發在input s中具有屬性type='number' 。
當您在自動完成輸入中選擇某些內容時，此事件將不會觸發，您需要添加一些代碼來進行檢查。 就像是：
let headings = [] function initInputs(headingList) { jQuery(".fields").append(createInputsHTML(headingList)) } function createInputsHTML(headingList) { let html = '' headingList.forEach(heading => { if (heading !== 'Company') { html += `<label for="${heading}">${heading}: </label>` html += `<input type="number" id="${heading}">` html += '<br>' } }) return html } function getJSON() { return new Promise(resolve => { jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) { resolve(JSON.parse(data)) }); }) } // processing raw JSON data function processRawData(data) { return new Promise(resolve => { const companyData = [] // creating data array // handling multiple sheets Object.values(data).forEach((sheet, index) => { sheet.forEach((company, i) => { companyData.push({ ...company }) // create headings only once if (index === 0 && i === 0) { Object.keys(company).forEach(item => { headings.push(item.trim()) }) } }) }) resolve(companyData) }) } $(async function() { let lists = []; function initAutocomplete(list) { const thisKey = 'Company' $("#company").autocomplete('option', 'source', function(request, response) { response( list.filter(item => { if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) { item.label = item[thisKey] return item } }) ) }) } $("#company").autocomplete({ minLength: 1, source: lists, focus: function(event, ui) { // the "species" is constant - it shouldn't be modified $("#company").val(ui.item.Company); return false; }, select: function(event, ui) { var empty = false; // handling n number of fields / columns headings.forEach(heading => { $('#' + heading).val(ui.item[heading]); if ((ui.item[heading] == '')) { empty = true; } }); checkFill(empty); return false; } }); // starting data download, processing and usage getJSON() .then(json => { return processRawData(json) }) .then(data => { // make the processed data accessible globally lists = data initAutocomplete(lists) initInputs(headings) }) }); // code to set default values if user enters zero or negative values //calculation for Rating value $(document).ready(function(){ $("#Cal").click(function(){ var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0 ; jQuery(".fields input").each(function (){ var idHeading=$(this).attr("id"); if(idHeading=="PE"){ peVal=parseInt($(this).val()); } if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } if(idHeading=="PS"){ psVal=parseFloat($(this).val()); } if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); } if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); } if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); } if(idHeading=="DE"){ deVal=parseFloat($(this).val()); } if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); } if(idHeading=="CR"){ crVal=parseFloat($(this).val()); } }); var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal ; $("output[name='amount']").text(output); }); }); $(document).on("keyup", "input[type='number']", function() { var empty = false; $('input[type="number"]').each(function() { if (($(this).val() == '')) { empty = true; } }); checkFill(empty); }); function checkFill(isEmpty){ if (isEmpty) { $('#Cal').attr('disabled', 'disabled'); } else { $('#Cal').removeAttr('disabled'); } }
<html> <head> <title>Page Title</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> </head> <body> <div class="ui-widget"> <form id="frm1"> <label for="company">Drop-down box </label> <input id="company"><br /><br /> <div class="fields"></div> <!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY --> <button type="button" id="Cal" disabled="disabled" > Button </button> <p> <output name="amount" for="calculation">0</output> </p> </form> </div> </body> </html>
或者，至少在設置字段值時觸發keyup功能：
let headings = [] function initInputs(headingList) { jQuery(".fields").append(createInputsHTML(headingList)) } function createInputsHTML(headingList) { let html = '' headingList.forEach(heading => { if (heading !== 'Company') { html += `<label for="${heading}">${heading}: </label>` html += `<input type="number" id="${heading}">` html += '<br>' } }) return html } function getJSON() { return new Promise(resolve => { jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) { resolve(JSON.parse(data)) }); }) } // processing raw JSON data function processRawData(data) { return new Promise(resolve => { const companyData = [] // creating data array // handling multiple sheets Object.values(data).forEach((sheet, index) => { sheet.forEach((company, i) => { companyData.push({ ...company }) // create headings only once if (index === 0 && i === 0) { Object.keys(company).forEach(item => { headings.push(item.trim()) }) } }) }) resolve(companyData) }) } $(async function() { let lists = []; function initAutocomplete(list) { const thisKey = 'Company' $("#company").autocomplete('option', 'source', function(request, response) { response( list.filter(item => { if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) { item.label = item[thisKey] return item } }) ) }) } $("#company").autocomplete({ minLength: 1, source: lists, focus: function(event, ui) { // the "species" is constant - it shouldn't be modified $("#company").val(ui.item.Company); return false; }, select: function(event, ui) { // handling n number of fields / columns headings.forEach(heading => { $('#' + heading).val(ui.item[heading]).keyup(); }) return false; } }); // starting data download, processing and usage getJSON() .then(json => { return processRawData(json) }) .then(data => { // make the processed data accessible globally lists = data initAutocomplete(lists) initInputs(headings) }) }); // code to set default values if user enters zero or negative values //calculation for Rating value $(document).ready(function(){ $("#Cal").click(function(){ var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0 ; jQuery(".fields input").each(function (){ var idHeading=$(this).attr("id"); if(idHeading=="PE"){ peVal=parseInt($(this).val()); } if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } if(idHeading=="PS"){ psVal=parseFloat($(this).val()); } if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); } if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); } if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); } if(idHeading=="DE"){ deVal=parseFloat($(this).val()); } if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); } if(idHeading=="CR"){ crVal=parseFloat($(this).val()); } }); var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal ; $("output[name='amount']").text(output); }); }); $(document).on("keyup", "input[type='number']", function() { var empty = false; $('input[type="number"]').each(function() { if (($(this).val() == '')) { empty = true; } }); if (empty) { $('#Cal').attr('disabled', 'disabled'); } else { $('#Cal').removeAttr('disabled'); } });
<html> <head> <title>Page Title</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> </head> <body> <div class="ui-widget"> <form id="frm1"> <label for="company">Drop-down box </label> <input id="company"><br /><br /> <div class="fields"></div> <!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY --> <button type="button" id="Cal" disabled="disabled" > Button </button> <p> <output name="amount" for="calculation">0</output> </p> </form> </div> </body> </html>
當輸入字段不為空且復選框選中時啟用提交按鈕
[英]Enable submit button when the input fields are not empty and the checkbox checked
在填寫動態創建的必填字段之前，請禁用提交按鈕
[英]Keeping submit button disabled until dynamically created required fields are filled
如果單擊提交按鈕時字段未填寫信息，則前端輸入字段警告消息
[英]Front-End input fields warning message if the field is not filled with information when submit button is clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.