Question

我正在努力创造我希望是一种简单的捐赠形式。有两种选择可供选择：

使用文本字段下拉输入金额
要在其他指定中写入的文本字段以及用于输入金额的文本字段

我一直在查看很多不同的代码示例，但我不完全确定如何在技术名称中搜索我需要的内容。当输入任何内容时我需要显示警报，并且只输入1的一部分或2的一部分时发出警报。我知道这是我需要JS的东西，但没有经验。

我发现有几个页面对多个字段的验证和警报消息有点帮助，但我认为我需要有一个/或类型的警报（如果这有意义）。您可以从下拉列表中选择并输入金额，或者在“其他”文本字段中输入内容并输入金额。

您可以在下面看到我的代码。我包括了一些我发现的JS，并试图修改它似乎最接近我正在寻找的，但由于我对语言的了解有限，我知道它不正确（尽量不要评判我）。我可以得到一条有时有效但不适合所有人的警报信息。有时，当正确填写时，警报仍会显示。

我觉得我的大脑现在已经被炸了，所以你能提供的任何帮助都非常感谢。在此之后，Javascript肯定会成为我的“必须学习”列表的顶部。谢谢！

<script>
function validateForm() {
    var x = document.forms["form1"]["FUND1"].value;
    var x = document.forms["form1"]["FUND2"].value;
    var x = document.forms["form1"]["GIFT_AMOUNT1"].value;
    var x = document.forms["form1"]["GIFT_AMOUNT2"].value;

    if (form1.FUND1.value == '' && form1.FUND2.value == '') {
        alert("Please select a donation designation and an amount.");
        return false;
    }
    if (form1.GIFT_AMOUNT1.value == '' && form1.GIFT_AMOUNT1.value == '') {
        alert("Please select a donation designation and an amount.");
        return false;
    }
}
</script>

<form name="form1" method="POST" action="input.php" id="form1"  onsubmit="return validateForm()" >

<div class="giving_dropdown body_copy">
    <h3>Giving Opportunities</h3>
    <select name="FUND1" class="drop_down"  >
        <option value="" selected class="body_copy"></option>
        <option value="Option1" class="body_copy">Option1</option>
        <option value="Option2" class="body_copy">Option2</option>
        <option value="Option3" class="body_copy">Option3</option>
        <option value="Option4" class="body_copy">Option4</option>
        <option value="Option5" class="body_copy">Option5</option>
        <option value="Option6" class="body_copy">Option6</option>
        <option value="Option7" class="body_copy">Option7</option>
        <option value="Option8" class="body_copy">Option8</option>
        <option value="Option9" class="body_copy">Option9</option>
        <option value="Option10" class="body_copy">Option10</option>
        <option value="Option11" class="body_copy">Option11</option>
    </select>
    <input class="inputotherfund" name="GIFT_AMOUNT1" type="text" size="10" id="GIFT_AMOUNT1" value="0.00"/>   
</div>
 
<div class="other_designation">
    <h3>Other</h3>
    <input name="FUND2" type="text" size="50" id="FUND2" class="inputotherfund" placeholder="Indicate where to direct donation"/>
    <input class="inputotherfund" name="GIFT_AMOUNT2" type="text" size="10" id="GIFT_AMOUNT2" value="0.00"/>
</div>
        
<div style="clear:both; float:left;">
    <p><input type="submit" value="Continue" class="continue_button" onclick="validateAndSend()"></p>
</div>

Answer 1

你在做什么是好的。

为了改善你正在做的事情你可以试试这个：

我正在削减FUND和GIFT_AMOUNT，因为我猜你正在尝试做什么，现在当1或2都为空时，警报会显示。

function validateForm() {
  var form1 = document.forms['form1']

  if (form1.FUND1.value === '' || form1.GIFT_AMOUNT1.value === '') {
    alert("please select a donation designation and an amount 1.");
    return false;
  }
  if (form1.FUND2.value === '' || form1.GIFT_AMOUNT2.value === '') {
    alert("please select a donation designation and an amount 2.");
    return false;
  }
  return true;
}

在您的表单中，您需要使用value=""初始化您的GIFT_AMOUNT输入，否则如果您比较＆＃39; 0.00＆＃39;与＆＃39;＆＃39;永远是false。

<form name="form1" method="POST" action="input.php" id="form1"  onsubmit="return validateForm()" >
  <div class="giving_dropdown body_copy">
    <h3>Giving Opportunities</h3>
    <select name="FUND1" class="drop_down"  >
      <option value="" selected class="body_copy"></option>
      <option value="Option1" class="body_copy">Option1</option>
      <option value="Option2" class="body_copy">Option2</option>
      <option value="Option3" class="body_copy">Option3</option>
      <option value="Option4" class="body_copy">Option4</option>
      <option value="Option5" class="body_copy">Option5</option>
      <option value="Option6" class="body_copy">Option6</option>
      <option value="Option7" class="body_copy">Option7</option>
      <option value="Option8" class="body_copy">Option8</option>
      <option value="Option9" class="body_copy">Option9</option>
      <option value="Option10" class="body_copy">Option10</option>
      <option value="Option11" class="body_copy">Option11</option>
    </select>
    <input class="inputotherfund" name="GIFT_AMOUNT1" type="text" size="10" id="GIFT_AMOUNT1" value="" />
  </div>

  <div class="other_designation">
    <h3>Other</h3>
    <input name="FUND2" type="text" size="50" id="FUND2" class="inputotherfund" placeholder="Indicate where to direct donation" />
    <input class="inputotherfund" name="GIFT_AMOUNT2" type="text" size="10" id="GIFT_AMOUNT2" value="" />
  </div>

  <div style="clear:both; float:left;">
    <p>
      <input type="submit" value="Continue" class="continue_button" />
    </p>
  </div>
</form>

您无需在onclick属性中调用函数，因为您已经调用了提交函数来改善此行为，您可以执行以下操作：

function submitForm() {
  if (validateForm()) {
    // do some stuff
  }
}

并更改onsubmit

中的form媒体资源

<form ... onsubmit="submitForm()">

如果您从javascript开始，最好学习如何使用控制台来调试脚本。 This文章是一个很好的开始，并作为最后一个提示this。{/ p>

验证配对的表单字段

1 个答案: