Question

我的html表单代码有一点问题...

在我的代码中，很少有输入字段是动态生成的。在动态生成的每个输入字段中，都有一些数值。我需要对它们进行一些数学计算。

=“ PE + ROCE +（2-SG）-（4-DY / 2）”

这是我的计算方式。在此，PE，ROCE等是生成的动态输入字段的ID。

使用生成的动态输入字段的值，我需要执行上述计算。当用户单击“计算”输入按钮时，必须执行此计算。然后，从上面得出的最终计算值将显示在我的表单代码底部的输出标签中。我试图自己解决这个问题。但不幸的是，这项任务失败了。

现在有人可以帮助我解决这个问题。我将非常感谢...

这是我完整的表单代码。

    // define the headings here, so we can access it globally
    // in the app
    let headings = []

    // appending the created HTML string to the DOM
    function initInputs(headingList) {
      jQuery(".fields").append(createInputsHTML(headingList))
    }

    // the HTMLT template that is going to be appended
    // to the DOM
    function createInputsHTML(headingList) {
      let html = ''
      headingList.forEach(heading => {
        if (heading !== 'Company') {
          html += `<label for="${heading}">${heading}: </label>`
          html += `<input id="${heading}">`
          html += '<br>'
        }
      })

      return html
    }

    // receiving data
    // this data arrives later in the app's lifecycle,
    // so it's the best to return a Promise object
    // that gets resolved (check JS Promise for more information)
    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: 3,
        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 => {
          // just so we see what data we are using
          console.log(data)
          // make the processed data accessible globally
          lists = data
          initAutocomplete(lists)
          initInputs(headings)
        })

    });

 <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" />
    <div class="ui-widget">
      <form id="frm1">
        <label for="company">Company: </label>
        <input id="company"><br />
        <div class="fields"></div>

<input type="submit" id="calculate" value="Calculate">
   
<p>Final Amount <output name="amount" for="calculation">0</output></p>
      </form>
    </div>

Answer 1

尝试输入的每个循环

 $("#Calculate").click(function(){
        var peVal,roceVal,sgVal,dyVal;
    jQuery(".fields input").each(function (){
        var idHeading=$(this).attr("id");

        if(idHeading=="Your ID for PE input"){
            peVal=parseInt($(this).val());
        }

        if(idHeading=="Your ID for ROCE input "){
            roceVal=parseInt($(this).val());
        }

        if(idHeading=="Your ID for SG input"){
            sgVal=parseInt($(this).val());
        }

        if(idHeading=="Your ID for DY input"){
            dyVal=parseInt($(this).val());
        }

    });
    var output=peVal+roceVal+(2-sgVal)-(4-dyVal/2);
});

如何使用动态输入字段的值执行计算？

1 个答案: