可以't让我的if语句处理js中的html表单输入

Can't get my if statement to work with html form input in js

本文关键字：js 处理 中的 html 输入 表单 语句 if 我的 可以      更新时间：2023-09-26

如果没有if语句，我可以存储数据，但当我想检查html表单值时，我无法这样做。附言：我对js还很陌生，所以请耐心等待。

<script>
var signupForm = document.getElementById('signup-form');
var signupSuccess = document.getElementById('signup-success');
var signupError = document.getElementById('signup-error');
var signupBtn = document.getElementById('signup-button');
var day_Imp = document.getElementById('D-day').value;
var onSignupComplete = function(error) {
  signupBtn.disabled = false;
  if (error) {
    signupError.innerHTML = 'Sorry. Your Booking failed.';
  } else {
    signupSuccess.innerHTML = 'Thanks for playing at Total Football!';
    // hide the form
    signupForm.style.display = 'none';
  }
};
function signup(formObj) {
    console.log(day_Imp);
    // Store emails to firebase
    if(day_Imp==='monday'){
        var myFirebaseRef = new Firebase("https://fiery-torch-164.firebaseio.com/days/monday");
        myFirebaseRef.push({
          email: formObj.email.value,
          name: formObj.name.value,
          number: formObj.number.value,
        }, onSignupComplete);
        signupBtn.disabled = true;
        return false;
    }
}


<html>
<head>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="infoCSS.css">
</head>
<body>
<div class="signup">
    <h2 class="signup-title">Enter your information please</h2>
    <p id="signup-success" class="text-success"></p>
    <p id="signup-error" class="text-danger"></p>
    <form class="signup-form form-inline" id="signup-form" role="form" onsubmit="return signup(this)">
        <label>Full Name</label><br><br>
        <input class="form-control" name="name" type="text" required><br><br>
        <label>Email</label><br><br>
        <input class="form-control" name="email" type="email" placeholder="Your email. eg., joe@acme.com" required><br><br>
        <label>Cell Phone</label><br><br>
        <input class="form-control" name="number" type="tel" required><br><br>
        <label>Day</label><br><br>
        <input type="text" id="D-day"><br><br>
        <button class="btn btn-success" id="signup-button" type="submit" >#Allin!</button>
    </form>
</div>
<script>
    var signupForm = document.getElementById('signup-form');
    var signupSuccess = document.getElementById('signup-success');
    var signupError = document.getElementById('signup-error');
    var signupBtn = document.getElementById('signup-button');
  //  var day_Imp = document.getElementById('D-day');
    var onSignupComplete = function(error) {
      signupBtn.disabled = false;
      if (error) {
        signupError.innerHTML = 'Sorry. Your Booking failed.';
      } else {
        signupSuccess.innerHTML = 'Thanks for playing at Total Football!';
        // hide the form
        signupForm.style.display = 'none';
      }
    };
    
    function signup(formObj) {
  // Store emails to firebase
  $('#D-day').on('input', function() {
    var day_Imp = document.getElementById('D-day').value;
    console.log(day_Imp);
    if (day_Imp == 'monday') {
      var myFirebaseRef = new Firebase("https://fiery-torch-164.firebaseio.com/days/monday");
      myFirebaseRef.push({
        email: formObj.email.value,
        name: formObj.name.value,
        number: formObj.number.value,
      }, onSignupComplete);
      signupBtn.disabled = true;
      return false;
    }
  });
}
</script>
</body>
</html>

这是包括所有html和js的更新版本。

简单演示

在jQuery中，您可以使用http://api.jquery.com/on/.on('input', function(){...})

$('#D-day').on('input', function() {
  var day_Imp = document.getElementById('D-day').value;
  if (day_Imp == 'monday') {
    document.getElementById('demo').innerHTML = day_Imp;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="D-day">
<p id="demo"></p>

最重要的是它填充到<p>这个类型的文本。

示例（更新）

所以试试这个，让我知道它是否有效

var signupForm = document.getElementById('signup-form');
var signupSuccess = document.getElementById('signup-success');
var signupError = document.getElementById('signup-error');
var signupBtn = document.getElementById('signup-button');
var onSignupComplete = function(error) {
  signupBtn.disabled = false;
  if (error) {
    signupError.innerHTML = 'Sorry. Your Booking failed.';
  } else {
    signupSuccess.innerHTML = 'Thanks for playing at Total Football!';
    // hide the form
    signupForm.style.display = 'none';
  }
};
function signup(formObj) {
  // Store emails to firebase
  $('#D-day').on('input', function() {
    var day_Imp = document.getElementById('D-day').value;
    console.log(day_Imp);
    if (day_Imp == 'monday') {
      var myFirebaseRef = new Firebase("https://fiery-torch-164.firebaseio.com/days/monday");
      myFirebaseRef.push({
        email: formObj.email.value,
        name: formObj.name.value,
        number: formObj.number.value,
      }, onSignupComplete);
      signupBtn.disabled = true;
      return false;
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="D-day">

变通方法

<html>
<head>
  <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="infoCSS.css">
</head>
<body>
  <div class="signup">
    <h2 class="signup-title">Enter your information please</h2>
    <p id="signup-success" class="text-success"></p>
    <p id="signup-error" class="text-danger"></p>
    <form class="signup-form form-inline" id="signup-form" role="form" onsubmit="return signup()">
      <label>Full Name</label>
      <br>
      <br>
      <input class="form-control" name="name" type="text" id="n" required>
      <br>
      <br>
      <label>Email</label>
      <br>
      <br>
      <input class="form-control" name="email" type="email" id="e" placeholder="Your email. eg., joe@acme.com" required>
      <br>
      <br>
      <label>Cell Phone</label>
      <br>
      <br>
      <input class="form-control" name="number" type="tel" id="cp" required>
      <br>
      <br>
      <label>Day</label>
      <br>
      <br>
      <input type="text" id="D-day">
      <br>
      <br>
      <button class="btn btn-success" id="signup-button" type="submit">#Allin!</button>
    </form>
  </div>
  <script>
    var signupForm = document.getElementById('signup-form');
    var signupSuccess = document.getElementById('signup-success');
    var signupError = document.getElementById('signup-error');
    var signupBtn = document.getElementById('signup-button');
     //  var day_Imp = document.getElementById('D-day');
    var onSignupComplete = function(error) {
      signupBtn.disabled = false;
      if (error) {
        signupError.innerHTML = 'Sorry. Your Booking failed.';
      } else {
        signupSuccess.innerHTML = 'Thanks for playing at Total Football!';
        // hide the form
        signupForm.style.display = 'none';
      }
    };
    function signup() {
      // Store emails to firebase
      $('#D-day').on('input', function() {
        var day_Imp = document.getElementById('D-day').value;
        console.log(day_Imp);
        if (day_Imp == 'monday') {
          var myFirebaseRef = new Firebase("https://fiery-torch-164.firebaseio.com/days/monday");
          myFirebaseRef.push({
            email: $('#e').val(),
            name: $('#n').val(),
            number: $('#cp').val(),
          }, onSignupComplete);
          signupBtn.disabled = true;
          return false;
        }
      });
    }
  </script>
</body>
</html>

相关文章：