将默认值设置为输入字段，但使其可编辑（以便能够手动更改）？

问题描述 投票：0回答：1

我有一个在线表单，该表单从一些输入字段中获取值并对其进行一些计算。请检查小提琴网址：https://jsfiddle.net/moeadas/fv027knx/44/

我基本上需要为名为（Rounded Valuation）name =“ B200”的特定输入字段设置默认值。我希望此输入将来自另一个字段名称“ B52”的值作为默认值，但我希望用户能够手动编辑此字段以输入另一个数字（该数字将用于其他计算）。

最后，我想在最后阶段隐藏“提交”按钮，因为这实际上不是一种表单，而只是用户可以使用的在线表单。

非常感谢您的所有评论和努力。请查看小提琴链接以更好地了解当前结构。

下面的Java代码。检查JSFIDDLE的完整结构

    function milesIt(num) {
  return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
    (i + 1) % 3 === 0 && i + 1 != a.length && "," + n || n).reverse().join("");
}

var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input) {
  //change the values to include the thousand separator each time the user changes an input
  input.onchange = function(e) {
    inputs.forEach(function(inp) {
      inp.value = inp.value.replace(/[,]/g, '');
    });
    calcule2();
    inputs.forEach(function(inp) {
      inp.value = milesIt(inp.value);
    });

  }

  input.value = milesIt(input.value);
});
////////////////////////////////////////////



var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }

  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("CreativeAcquisitions").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}





function calcule2() {

  var i = 0;
  for (i = 0; i <= 50; i++) {
    calcule();
  }
}

function calcule() {

  CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);

  CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value) +
    parseFloat(CreativeAcquisitions.B300.value);

  CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
  CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);

  //CreativeAcquisitions.B200.value = CreativeAcquisitions.B52.value; //testing
  //document.getElementById("B200").value = CreativeAcquisitions.B52.value;

  CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
  CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.D81.value);

  CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B300.value = (parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value)) * -1;

  CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
  CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;
  CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) / 100;
  CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B67.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
  CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
  CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) / 100;
  CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
  CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) / 100;
  CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
  CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) / 100;
  CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
  CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) / 100;
  CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
  CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) / 100;
  CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value) + parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
  CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value) + parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
  CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);

  CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);

  CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);

  CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);

  CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;

  CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);


  CreativeAcquisitions.B98.value = (parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value) + parseFloat(CreativeAcquisitions.B94.value) + parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value) + parseFloat(CreativeAcquisitions.B97.value)) * -1;

  CreativeAcquisitions.C98.value = (parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value) + parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value)) * -1;

  CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
  CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) / 100;
  CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
  CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) - parseFloat(CreativeAcquisitions.B105.value) + parseFloat(CreativeAcquisitions.B107.value);
}
javascript
1个回答
1
投票

我不知道这些字段是如何创建的，但是按照您的代码，这可能会有所帮助：

//////////Newcode///////////////////////////
function milesIt(num) {
  return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
    (i + 1) % 3 === 0 && i + 1 != a.length && "," + n || n).reverse().join("");
}

var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input) {
  //change the values to include the thousand separator each time the user changes an input
  input.onchange = function(e) {
    inputs.forEach(function(inp) {
      inp.value = inp.value.replace(/[,]/g, '');
    });
    calcule2();
    inputs.forEach(function(inp) {
      inp.value = milesIt(inp.value);
    });
    //e.target.value = milesIt(e.target.value.replace(/[.]/g, ''));
  }
  //change the values of the inputs at the beginning, although you could write them as HTML with the thousand separator values in the source code
  input.value = milesIt(input.value);
});
////////////////////////////////////////////



var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").style.display='none';
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }

  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
    if (n < (x.length - 2))
        document.getElementById("nextBtn").style.display='inline';
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}





function calcule2() {

  var i = 0;
  for (i = 0; i <= 50; i++) {
    calcule();
  }
}

function calcule() {

  CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);

  CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value) +
    parseFloat(CreativeAcquisitions.B300.value);

  CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
  CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);

  CreativeAcquisitions.B200.value = Math.round(parseFloat(CreativeAcquisitions.B52.value)); //here is your field

  CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
  CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.D81.value);

  CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B300.value = (parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value)) * -1;

  CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
  CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;
  CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) / 100;
  CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B67.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
  CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
  CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) / 100;
  CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
  CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) / 100;
  CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
  CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) / 100;
  CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
  CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) / 100;
  CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
  CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) / 100;
  CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value) + parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
  CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value) + parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
  CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);

  CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);

  CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);

  CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);

  CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);

  CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) / 100;

  CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);


  CreativeAcquisitions.B98.value = (parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value) + parseFloat(CreativeAcquisitions.B94.value) + parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value) + parseFloat(CreativeAcquisitions.B97.value)) * -1;

  CreativeAcquisitions.C98.value = (parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value) + parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value)) * -1;

  CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
  CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) / 100;
  CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
  CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) - parseFloat(CreativeAcquisitions.B105.value) + parseFloat(CreativeAcquisitions.B107.value);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.