douchui4459 2014-05-19 18:14
浏览 43
已采纳

如何在.php页面中添加外部javascript页面?

So my .php file was previously a .html page, however i wanted to add a session within this file and use javascript to validate my forms. But when i add the in the tag, nothing happens. It was working fine when my file was .html... Here is my code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php
session_start();
?>

 <html>
      <html>
      <head> 
          <title>Hompage</title> 
         <script type="text/javascript" src="my_js.js"></script> 
      </head> 

      <body style = "margin-left:5%;"> 
           <form method = "post" id = "Form1" action = "my_js.js">
           <b>Login:</b>
           <br/>
           <br/>
                 User Name: &nbsp &nbsp &nbsp 
                 <input type="text" name="uname" id ="uname"/> 
                 <br/>
                 <br/>
                 Password: &nbsp &nbsp &nbsp 
                 <input type="text" name="pwd" id ="pwd"/> 

                 <br/>
                 <br/>

                 <input type ="button" id="Login" value ="Login" onclick = "validate();"/>
           </form>  
           <br/><br/>
           <hr/>    
           <br/><br/>

           <form method = "post" name = "Form2" id = "Form2" action="register_add.php">
           <b>Register:</b>
           <br/>
           <br/>
                 <span style = "color: red;">*</span> First Name:&nbsp &nbsp &nbsp 
                 <input type="text" name="fname" id ="fname"/> 
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> Last Name: &nbsp &nbsp &nbsp 
                 <input type="text" name="lname" id ="lname"/>
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> Date of Birth: &nbsp &nbsp &nbsp 
                 <input type = "text" name = "dob" id ="y" value = "yyyy/mm/dd">
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> User Name: &nbsp &nbsp &nbsp 
                 <input type="text" name="uname" id ="uname"/>
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> Password: &nbsp &nbsp &nbsp 
                 <input type="password" name="pwd" id ="pwd"/>

                 <br/>
                 <br/>

                 <input type ="Submit" id="Register" value ="Register"/>
           </form>


      </body> 

</html> 

And my .js file:

// Login Form Validation
function validate(){
      var x=document.forms["Form1"]["uname"].value; 
      var y=document.forms["Form1"]["pwd"].value;
      if (x==null || x=="" || uname == null){ 
      //alert("User name must be filled out"); 
        document.getElementById('para1').innerHTML = "User Name field must be filled out";
        return false; 
                }
      if (y==null || y=="" || pwd==null){
        document.getElementById('para1').innerHTML = "Password field must be filled out";
        return false;
                }
      else{
        document.getElementById('Form1').innerHTML="User Name: " + x + "
Password: " + y;
                    }

    // Registration Form Validation
    var a=document.forms["Form2"]["fname"].value;
    var b=document.forms["Form2"]["lname"].value;
    var c=document.forms["Form2"]["m"].value;
    var d=document.forms["Form2"]["d"].value;
    var e=document.forms["Form2"]["y"].value;
    var f=document.forms["Form2"]["uname"].value;
    var g=document.forms["Form2"]["pwd"].value;
    if (var==null || var==""){
         document.getElementById('para2').innerHTML = "All field with '*' must be filled out";
         return false;
            }
     else{
        document.getElementById('Form2').innerHTML="First Name: " + a + "
Last Name: " + b +"
Date of Birth: " + m + d + y + "
Username: " + uname + "
Password: " + pwd;
            }
    } 
  • 写回答

2条回答 默认 最新

  • dongpu3898 2014-05-19 18:40
    关注

    It appears that your javascript had some errors. Remember to use the dev tools (F12 in chrome/IE) and check the console.

    The updated code and .js are below...what I did was:

    • Remove all the var = as they were throwing errors on my end.

    • Your error messages for login and register (id="para1" and div id="Para2") did not have the elements on the page so I added them.

    • I finished up the registration test code (some form elements where miss named and throwing errors...comments where added to the JS line 21).

    What you will want to do is separate these methods (ValidateLogin() and ValidateRegistration()) or make them more generic by looping through the form variables checking for a required attribute possibly?

    Working Code:

    HTML:

    <html>
      <head> 
         <title>Hompage</title> 
         <script type="text/javascript" src="my_js.js"></script> 
      </head> 
    <?php
    session_start();
    ?>
      <body style = "margin-left:5%;"> 
    
           <form method = "post" id = "Form1" action = "my_js.js">
           <b>Login:</b>
           <br/>
           <br/>
                 User Name: &nbsp &nbsp &nbsp 
                 <input type="text" name="uname" id ="uname"/> 
                 <br/>
                 <br/>
                 Password: &nbsp &nbsp &nbsp 
                 <input type="text" name="pwd" id ="pwd"/> 
    
                <div id="para1"></div>
                 <br/>
                 <br/>
    
                 <input type ="button" id="Login" value ="Login" onclick = "validate();"/>
           </form>
    
           <br/>
           <br/>
           <hr/>   
           <br/>
           <br/>
    
           <form method = "post" name = "Form2" id = "Form2" action="register_add.php" >
           <b>Register:</b>
           <br/>
           <br/>
                 <span style = "color: red;">*</span> First Name:&nbsp &nbsp &nbsp 
                 <input type="text" name="fname" id ="fname"/> 
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> Last Name: &nbsp &nbsp &nbsp 
                 <input type="text" name="lname" id ="lname"/>
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> Date of Birth: &nbsp &nbsp &nbsp 
                 <input type = "text" name = "dob" id ="y" value = "yyyy/mm/dd">
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> User Name: &nbsp &nbsp &nbsp 
                 <input type="text" name="uname" id ="uname"/>
                 <br/>
                 <br/>
                 <span style = "color: red;">*</span> Password: &nbsp &nbsp &nbsp 
                 <input type="password" name="pwd" id ="pwd"/>
    
                 <br/>
                 <br/>
                 <div id="para2"></div>
                 <input type ="button" id="Register" value ="Register" onclick = "validate();"/>
           </form>
    
    
      </body> 
    
    </html> 
    

    JS Script:

    function validate() {
        x = document.forms["Form1"]["uname"].value;
        y = document.forms["Form1"]["pwd"].value;
        if (x == null || x == "" || uname == null) {
            //alert("User name must be filled out"); 
            document.getElementById('para1').innerHTML = "User Name field must be filled out";
            return false;
        }
        if (y == null || y == "" || pwd == null) {
            document.getElementById('para1').innerHTML = "Password field must be filled out";
            return false;
        } else {
            document.getElementById('Form1').innerHTML = "User Name: " + x + "
    Password: " + y;
        }
    
        // Registration Form Validation
        a = document.forms["Form2"]["fname"].value;
        b = document.forms["Form2"]["lname"].value;
        dob = document.forms["Form2"]["dob"].value;
        ///These values do not exist in the form...commenting them out 
        //c=document.forms["Form2"]["m"].value;
        //d=document.forms["Form2"]["d"].value;
        //e=document.forms["Form2"]["y"].value;
        f = document.forms["Form2"]["uname"].value;
        g = document.forms["Form2"]["pwd"].value;
        if ((a == null || a == "") || (b == null || b == "") || (dob == null || dob == "") || (f == null || f == "") || (g == null || g == "")) {
            document.getElementById('para2').innerHTML = "All field with '*' must be filled out";
            return false;
        } else {
            document.getElementById('Form2').innerHTML = "First Name: " + a + "
    Last Name: " + b + "
    Date of Birth: " + m + d + y + "
    Username: " + uname + "
    Password: " + pwd;
        }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名