Question

基本上我有一对输入，如下所示：

<div class="row collapse-col input-connect" id="custom-field-1">

    <div class="col small-4-10"><input type="text" placeholder="Item 1" name="custom_item_1" id="custom-item-1"></div>
    <div class="col small-3-10"><input type="number" min="0" max="99999.99" step="0.01" placeholder="Price 1" name="custom_amount_1" id="custom-amount-1"></div>

    <div class="col small-3-10"><select name="custom_type_1" id="custom-type-1"><option value="" selected>Options:</option><option value="optdiscount">No Discount</option></select></div>
</div>

我有一个动态添加新行的脚本，这对于显示并不重要，但只知道它会动态添加行，以便“custom-field-1”变为“custom-field-2”并打开，与“custom-item-2”，“custom-amount-2”以及需要更新的其他属性相同。这一切都已完成，工作正常。

如果有人开始输入“custom-item-X”输入，我希望“custom-amount-X”输入为“必需”。

这是我到目前为止所做的：

function formCustomFieldsAllow(e) {
    e.preventDefault();
    for (var i = 1; document.getElementById("custom-item-"+i); i++) {
        var itemEntered = document.getElementById("custom-item-"+i).value;
        if (itemEntered) {
            document.getElementById("custom-amount-"+i).required = true;
        } else {
            document.getElementById("custom-amount-"+i).required = false;
        }
    }
}
document.getElementById('form-button-submit').addEventListener('change', formCustomFieldsAllow);

想法是用户点击提交按钮，这将检查是否填写了任何自定义项目，然后查看是否填写了相应的自定义金额，如果找不到匹配则会停止表格并制作适当的自定义金额“必需”。

我的脚本不起作用 - 会不会有任何帮助？

这是一个小提琴：https://jsfiddle.net/qa8s4qc4/1/

Answer 1

我建议的方法如下：

＆＃13;

// the function bound as the event-handler for the 'input' event:
function conditionallyRequired(e) {
  // e is passed automatically as the first argument via the
  // EventTarget.addEventListener() method.

  // caching the element upon which the event was triggered:
  var trigger = e.target,

    // caching the element whose id is equivalent to that of the
    // trigger, with the 'item' portion of the id string replaced
    // with 'amount':
    target = document.getElementById(trigger.id.replace('item', 'amount'));

  // setting the required property of the target using an assessment to find
  // if the length of the trigger element's value, with leading and trailing
  // whitespace removed, is greater than zero; the strings '' and '     ' will
  // evaluate to false, whereas 'a' and '      a       ' will both evaluate
  // to true:
  target.required = trigger.value.trim().length > 0;
}

// because rows are added dynamically to the <form> we use event-delegation,
// and bind the event-handler to the ancestor <form> element, although if the
// <form> is loaded dynamically the EventTarget must be bound to the closest
// ancestor that is present in the document on page-load, or be dynamically bound
// when the <form> is added:
document.querySelector('form').addEventListener('input', conditionallyRequired);

＆＃13;

.row {
  width: 100%;
  margin-bottom: 8px;
}
.row .col {
  width: 45%;
  display: inline-block;
  margin-right: 3px;
}
input,
div {
  padding: 0;
  margin: 0;
}
input {
  width: 100%;
}
#form-button-submit {
  width: 200px;
  max-width: 40%;
  min-width: 20px;
}
[required] {
  /* adding a style to visually indicate
     a required <input> element; adjust
     to taste */
  border-color: red;
}

＆＃13;

<form name="send_price" method="post" action="">

  <div class="row" id="custom-field-1">
    <div class="col">
      <input type="text" placeholder="Item 1" name="custom_item_1" id="custom-item-1">
    </div>
    <div class="col">
      <input type="number" min="0" max="99999.99" step="0.01" placeholder="Price 1" name="custom_amount_1" id="custom-amount-1">
    </div>
  </div>
  <div class="row" id="custom-field-2">
    <div class="col">
      <input type="text" placeholder="Item 2" name="custom_item_1" id="custom-item-2">
    </div>
    <div class="col">
      <input type="number" min="0" max="99999.99" step="0.01" placeholder="Price 2" name="custom_amount_2" id="custom-amount-2">
    </div>
  </div>
  <input type="submit" id="form-button-submit">

</form>

＆＃13;

JS Fiddle demo

参考文献：

Answer 2

我相信我已经弄明白了，这就是我所做的：

  function formCustomFieldsAllow() {
    for (var i = 1; !!document.getElementById("custom-item-"+i); i++) {
      var itemEntered = document.getElementById("custom-item-"+i).value;
      if (itemEntered) {
        document.getElementById("custom-amount-"+i).required = true;
      } else {
        document.getElementById("custom-amount-"+i).required = false;
      }
    }
  }
  document.getElementById('form-button-submit').addEventListener('click', formCustomFieldsAllow);

我将eventlistener从change更改为click，将for循环中的elementId更改为boolean，并取消了preventDefault。

JS：当给出第一个输入值时，动态地进行第二次输入？

2 个答案: