Question

我正在使用ajax和PHP创建登录Web应用程序，我使用javascript和php来验证输入，它适用于登录表单，但如果在the link under form之前没有注册，我在表单下添加了一个链接它的HTML是：

 <a href="#" onclick="signUpForm()">don't have account on tobe?</a>

并且signUpForm（）函数包含

function signUpForm(){
    $(".logInForm").load("SignUpForm.html");
}

它可以改变内容但是当我使用JS来验证使用代码的输入时（就像登录代码巫婆正在工作）： HTML（SignUpForm.html中的输入调用signUp（）函数）

<input type="button" value="Sign Up" onclick="signUp()">

function signUp(){
    if($("input[class='user']").val()==""|| $("input[class='pass']").val()==""){
        $(".error-message").fadeIn();
        document.getElementById("error-message").innerHTML="Please fill all fields";
    } else{
     //action(2) including the php file loading 
    } 
}

javascript会忽略新的输入字段，并认为已删除并始终转到操作（2）如何让js看到新的表单html？

Answer 1

假设我正确理解您的问题，我认为此代码可以帮助您找到正确的基础（http://codepen.io/trevorhreed/pen/bppxRG?editors=1010）。

在此示例中，我使用的是$(...).html(...)而不是$(...).load(...)，因为我没有托管HTML文件的服务器，但它应该可以正常交换.html(...) for { {1}}。

.load(...)

console.clear();
$(function(){
  var placeholder = $('#placeholder'),
      signInTpl = $('#signin').html(),
      signUpTpl = $('#signup').html();
   
  function goToSignIn(){
    placeholder.html(signInTpl);
    // or placeholder.load('signin.html');
    var btnSignIn = $('#btnSignIn'),
        signInUsername = $('#signinUsername'),
        signInPassword = $('#signinPassword');
    btnSignIn.on('click', function(){
      if(signInUsername.val() == '' || signInPassword.val() == ''){
        alert('Sign In form is NOT valid');
      }else{
        alert('Sign In form is valid');
      }
    })
  }
  
  function goToSignUp(){
    placeholder.html(signUpTpl);
    // or placeholder.load('signup.html');
    var btnSignUp = $('#btnSignUp'),
        signUpUsername = $('#signupUsername'),
        signUpPassword = $('#signupPassword');
    btnSignUp.on('click', function(){
      if(signUpUsername.val() == '' || signUpPassword.val() == ''){
        alert('Sign Up form is NOT valid');
      }else{
        alert('Sign Up form is valid');
      }
    })
  }
  
  goToSignIn();
    
  $('#btnGoToSignUp').on('click', function(){
    goToSignUp();
  })
  
})

使用.load（）添加HTML表单有一些问题

1 个答案: