Question

当我单击我的注册表单中的提交按钮时，不会调用JavaScript函数，但是当我尝试在线编辑器时，它的工作正常，但不能在我的Pycharm IDE中使用firefox浏览器。当我提交表单时，我提交了一个未填充的输入字段，这可以通过我的JavaScript函数'emp_details'找到，但它没有发生。

My signup.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee Details</title>
    <script type="text/javascript">
    function emp_details(){
        var id = document.forms["form2"]['id'].value;
        var fname = document.forms["form2"]["fname"].value;
        var lname = document.forms["form2"]["lname"].value;


        var Password = document.forms["form2"]['password'].value;

        var designation = document.forms["form2"]['designation'].value;
        var experience = document.forms["form2"]['experience'].value;
        window.alert("fname");
        var alphaExp = /^[a-zA-Z]+$/;
        var pass = /^[a-zA-Z0-9@$#]{8,15}$/;
        if(!id ||!fname  || !lname ||!Password ||!designation ||!experience)
        {
            alert("Please enter all the fields");
            return false;
        }
        else
        {
        if(!isNaN(id))
        {
        if(fname.match(alphaExp))
        {
            if(lname.match(alphaExp))
            {

                    if(Password.match(pass))
                    {
                     /*var values = Sijax.getFormValues("#form2");
                     alert(values);
                    Sijax.request('submit',[values]);*/
                     return true;
                    }


                else
                {alert("Enter a valid password ");
                return false;
                }
            }
            else
            {
            alert("Enter a valid last name");
            return false;
            }
            }
        else
        {
         alert("Enter a valid first name");
         return false;
         }
         }
         else
         {
         alert("ID must be in Numbers");
         return false;
         }
    }
}
    </script>

    <style>
        label {
  display: inline-block;
  width: 140px;
  text-align: right;
}
label,input,select{
margin-left:40px;
}
    </style>
</head>
<body style="font-family: Liberation Sans">
 <div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
    <h2>Welcome to my site</h2><br>
    </div>
<div style="margin-left:15%" >
<form name="form2" id="form2" method="post" action = "http://127.0.0.1:2908/signup" >

<br><br><br>
<label id = "id">ID</label> <input type="text" name = "id" placeholder = "ID" style = "padding-left: 0.2%;"><br><br>
    <label id = "fname">First Name</label> <input type="text" name = "fname" placeholder = "First Name" style = "padding-left: 0.2%;"><br><br>
    <label id = "lname">Last Name</label> <input type="text" name = "lname" placeholder = "Last Name" style = "padding-left: 0.2%;"><br><br>
    <label id = "password">Password</label>
    <input type="password" name = "password" placeholder = "Password" style = "padding-left: 0.2%;"><br><br>
<label id = "department">Department</label>
    <select name="department">
        <option value="Ecategory"> Category </option>
        <option value="Developer Team"> Developer Team</option>
        <option value="Testing Team"> Testing Team</option>
        <option value="Network Team"> Network Team</option>
        <option value="Server Maintance Team"> Server Maintance Team</option>
    </select><br><br>
    <label id = "designation">Designation</label>
    <input type="text" name = "designation" placeholder = "Designation" style = "padding-left: 0.2%;"><br><br>
    <label id = "experience">Experience</label>
    <input type="text" name = "experience" placeholder = "Experience" style = "padding-left: 0.2%;"><br><br>

    <label id = "emp_type">Admin</label>
    <input type="radio" id = "r1" value="Yes" name="emp_type" ><span>Yes</span>
    <input type="radio" id = " r2" value="No" name="emp_type"checked="checked"><span>No</span>
    <br><br><br>

    <input type="submit" value="Submit" onsubmit="return emp_details()" style="font-size:15pt;color:white;background-color: #3f51b5;border:2px solid ;padding:7px;padding-left:100px;padding-right:100px">
    </form></div>
</body>

</html>

Answer 1

onsubmit属性应位于form标记上，而不是在提交按钮上。引自MDN：

提交表单时会触发提交事件。

请注意submit仅针对form元素，而不是button或提交input。（提交表格，而不是按钮。）

<form name="form2" id="form2" method="post" action="http://127.0.0.1:2908/signup" 
      onsubmit="return emp_details()">

    <!--- .... --->

    <input type="submit" value="Submit">
</form>

表单提交期间不会调用JavaScript函数

1 个答案: