堆棧內存溢出
  簡體   English   中英

無法讓我的if語句與js中的html表單輸入一起使用

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

 原文  2016-05-19 18:15:15  3   1    javascript/ html

問題描述

沒有我的if語句，我能夠存儲數據，但是當我想檢查html表單值時，我無法這樣做。 PS我對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 個解決方案

解決方案1
 0  2016-05-19 19:00:06

簡單演示

在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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 無法使此表單在HTML5上運行 無法在JS中進行表單驗證 為什么在我的 JS 彈出窗口中，我的 html 表單不起作用？ 無法讓我的聯系表格生效 無法將此AJAX用於我的表單 如何獲得所需的自動對焦驗證以在html表單上工作？ -我的嘗試無法驗證 為什么我無法在表單中獲取輸入值 我的 if/else 語句無法正常工作 我無法讓我的 if 和 else if 語句起作用 如何通過JS獲取表單中輸入的內容？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM