如果所有输入都为真，如何获取多个输入并获得最终值

How to take multiple inputs and get a final value if all are true?

本文关键字：输入 获取 如果 何获取      更新时间：2023-09-26

在这里可能比我的标题更容易解释。我有三个用户输入，如果三个都满足我的条件，那么我想写一些东西到HTML中，如果三个都不满足条件，那么我想写一个不同的短语到HTML中。我所遇到的问题是让所有3个输入满足我的条件，我知道我可以使用if else语句来编写HTML后，每一个是真的或不是。我需要GPA输入大于2.75，学生组输入大于=1 SUNY学生1必须是是或不是，是条件才成立。(不确定如何格式化输入，所以你只能选择是或否，像下拉框或其他东西)

<form>
  Do you qualify to join the club?<br>
  Your GPA:<br> 
  <input type="number"><br>
  How many student groups do you belong to?<br> 
  <input type="number"><br>
  Are you a SUNY student?<br> 
  <input type="text">
</form>
<button type="submit" onclick:"qualify()">See if you qualify</button>
</form>
<h4 id="qual"> Look here to check</h4>

                            You could do something like this:
var firstInput = document.getElementByTagName("input")[0];
var secondInput = document.getElementByTagName("input")[1];
var thirdInput = document.getElementByTagName("input")[2];
if((firstInput > 2.75) && (secondInput >= 1) && (thirdInput == "yes") || (thirdInput == "no")){document.write("<b>YOUR CONTENT HERE</b>")}
else{document.write("<b>YOUR CONTENT HERE</b>")}

您没有提到要在html中写入什么内容。我已经改变了标记，因为按钮提交表单被重新加载，不确定你是否想要这种行为

您可以检查下面的代码片段，以实现您所解释的

$(document).ready(function(){
  $("#qualify").bind('click',function(){
    
      var gpa=$("#GPA").val();
    gpa=gpa-0;
    var students=$("#students").val();
    students=students-0;
    var studentType=$("#studenttype").val();
    if(gpa>=2.75 && students>1 && studentType=="Yes")
        alert("successful");
      
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
                Do you qualify to join the club?
                <br>
                Your GPA:<br> <input type="number" id="GPA">
                <br>
                How many student groups do you belong to?<br> <input type="number" id="students">
                <br>
                Are you a SUNY student?<br> <input type="text" id="studenttype">
                </form>
                <input type="button" id="qualify" value="See if you qualify"/>
                </form>
                <h4 id="qual"> Look here to check</h4>

希望能有所帮助

这是一个使用纯javascript的简单方法。

这将需要你真正充实更好的验证，但它是一个很好的起点:

function qualify() {
  var inputs = document.getElementsByTagName('input');
  var result = 'Not Qualified!';
  // crude and without much validation here:
  if (inputs[0].value > 2.75 && inputs[1].value >= 1 && ['yes', 'Yes'].indexOf(inputs[2].value) > -1) {
    result = 'Qualified!';
  }
  document.getElementById('qual').innerHTML = result;
};
window.qualify = qualify;
<form>
  Do you qualify to join the club?
  <br> Your GPA:
  <br>
  <input type="number">
  <br> How many student groups do you belong to?
  <br>
  <input type="number">
  <br> Are you a SUNY student?
  <br>
  <input type="text">
</form>
<button type="submit" onclick="qualify()">See if you qualify</button>
</form>
<h4 id="qual"> Look here to check</h4>

如果您不介意使用JQuery，您可以使用以下方法。我为你的是/否下拉菜单添加了一个<select>菜单，并删除了<form>元素，因为使用前端验证不需要它。这是一个工作的JSFiddle，代码如下:

HTML 

    Do you qualify to join the club?
    <br>
    Your GPA:<br> <input type="number" id="gpa">
    <br>
    How many student groups do you belong to?<br> <input type="number" id="sg">
    <br>
    Are you a SUNY student?<br>
    <select id="suny">
       <option value="">Choose...</option>
       <option value="yes">Yes</option>
       <option value="no">No</option>
    </select>
    <button id="btnQualify">See if you qualify</button>
    <h4 id="qual"> Look here to check</h4>

JQuery 

$(document).ready(function() { //when the page loads
   $("#btnQualify").click(function() { //when the btn is clicked
      var $gpa = $("#gpa");
      var $sg = $("#sg");
      var $suny = $("#suny");
      //parseInt is used to convert text to a number for comparison
      if (parseInt($gpa.val()) > 2.75 && parseInt($sg.val()) >= 1 && $suny.val() == "yes") {
           //All true, set h4
           $("#qual").html("You met all conditions!");
      } else {
           //Not all true, set h4
           $("#qual").html("You did not meet all conditions.");
      }
   });
 });

PS:纽约州立大学校友代表!

相关文章：