在js

时间:2016-05-19 18:15:16

标签: javascript html

没有我的if语句我能够存储数据,但是当我想检查html表单值时,我无法这样做。 P.S我对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的更新版本。

1 个答案:

答案 0 :(得分:0)

简单演示

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

执行此操作

&#13;
&#13;
$('#D-day').on('input', function() {
  var day_Imp = document.getElementById('D-day').value;

  if (day_Imp == 'monday') {
    document.getElementById('demo').innerHTML = day_Imp;
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

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

示例(已更新)

试试这个,让我知道它是否有效

&#13;
&#13;
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;
    }
  });
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="D-day">
&#13;
&#13;
&#13;

的解决方法

&#13;
&#13;
<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>
&#13;
&#13;
&#13;