输入字段动态填充时如何启用提交按钮？
[英]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.