Question

我一直想让它工作一段时间。我无法将登录功能连接到表单。

我在form标签和按钮输入标签上试过onsubmit，我试过onclick但是它没有从js函数中获取代码。

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Google maps</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!--<link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src="util.js"></script>
    <script src="JavaScript.js"></script>
    <script type="text/javascript"></script>

    <style>

        #container  {
            width: 1200px;
        }

        #map {
            width: 80%;
            min-height: 600px;
            /*float: right;*/
            margin-top: 15px;
            margin-left: auto;
            margin-right: auto;
        }

        #img {
            width: 150px;
            height: 150px;
            float: left;
            margin-top: auto;

        }

        /*sökruta*/
        #searchBox {
            background-color: #ffffff;
            padding: 5px;
            font-family: 'Roboto','sans-serif';
            margin-bottom: 10px;
            float: top;
        }

        /*
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        */

        .search-form .form-group {
            float: right !important;
            transition: all 0.35s, border-radius 0s;
            width: 32px;
            height: 32px;
            background-color: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
            border-radius: 25px;
            border: 1px solid #ccc;
        }
        .search-form .form-group input.form-control {
            padding-right: 20px;
            border: 0 none;
            background: transparent;
            box-shadow: none;
            display:block;
        }
        .search-form .form-group input.form-control::-webkit-input-placeholder {
            display: none;
        }
        .search-form .form-group input.form-control:-moz-placeholder {
            /* Firefox 18- */
            display: none;
        }
        .search-form .form-group input.form-control::-moz-placeholder {
            /* Firefox 19+ */
            display: none;
        }
        .search-form .form-group input.form-control:-ms-input-placeholder {
            display: none;
        }
        .search-form .form-group:hover,
        .search-form .form-group.hover {
            width: 100%;
            border-radius: 4px 25px 25px 4px;
        }
        .search-form .form-group span.form-control-feedback {
            position: absolute;
            top: -1px;
            right: -2px;
            z-index: 2;
            display: block;
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #3596e0;
            left: initial;
            font-size: 14px;
        }

        .form-group {
            max-width: 300px;
            margin-right: auto;
            margin-left: auto;
        }

    </style>
</head>
<body id="container">
    <img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/>
    <div class="row">
        <br>
        <div class="col-md-4 col-md-offset-3">
            <form action="" class="search-form">
                <div class="form-group has-feedback">
                    <label id="Search" class="sr-only">Search</label>
                    <input type="text" class="form-control" name="search" id="searchField" placeholder="Sök">
                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </div>
            </form>
        </div>

        <div class="form-group">
            <form id="loginForm" name="loginForm" method="POST">
                <label for="user">Användarnamn: </label>
                <br>
                <input class="form-control" type="text" id="user" name="user" required>
                <br>
                <label for="password">Lösenord: </label>
                <br>
                <input class="form-control" type="password" id="password" name="passwords" required>
                <br>
                <br> 
                <input class="form-control" type="submit" id="login" value="Logga in" onclick="login()">
            </form>
        </div>

        <div id="map">

        </div>

        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&callback=initMap">
        </script>   
    </div>
</body>

JavaScript.js

function login() {
//spara username och password i tvÃƒÂ¥ varibler med samma namn frÃƒÂ¥n formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;

if(username === "admin"
   && password === "123" )
{
    alert( "validation succeeded" );
    location.href="adminView.php";
}
else
{
    alert( "validation failed" );
    location.href="index1.html";
}
}

Answer 1

您可以直接将提交事件设置为您的

document.getElementById("loginForm").onsubmit = function() { ... };

Bellow a sample snippet：

＆＃13;

window.onload = function(){
  document.getElementById("loginForm").onsubmit = function() {
    //spara username och password i tvÃƒÂ¥ varibler med samma namn frÃƒÂ¥n formet.
    var username = document.getElementById("user").value;
    var password = document.getElementById("password").value;

    if (username === "admin" &&
      password === "123") {
      alert("validation succeeded");
      //location.href = "adminView.php";
    } else {
      alert("validation failed");
      //location.href = "index1.html";
    }
    // to prevent submit
    return false;
  }
}

＆＃13;

<div class="form-group">
  <form id="loginForm" name="loginForm" method="POST">
    <label for="user">Användarnamn: </label>
    <br>
    <input class="form-control" type="text" id="user" name="user" required>
    <br>
    <label for="password">Lösenord: </label>
    <br>
    <input class="form-control" type="password" id="password" name="passwords" required>
    <br>
    <br>
    <input class="form-control" type="submit" id="login" value="Logga in">
  </form>
</div>

＆＃13;

Answer 2

我创建了工作JSFiddle - 请检查：https://jsfiddle.net/5w6fg52m/1/

以下代码正常工作：

<script>
//just change function name as it's conflict with button id
function login1() {
//spara username och password i tvÃƒÂ¥ varibler med samma namn frÃƒÂ¥n formet.

var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
   && password === "123" )
{
    alert( "validation succeeded" );
    location.href="adminView.php";
}
else
{
    alert( "validation failed" );
    location.href="index1.html";
}

return false;
}
</script>

<强> // HTML

<div class="form-group">
  <form id="loginForm" name="loginForm" method="POST">
        <label for="user">Användarnamn: </label>
        <br>
        <input class="form-control" type="text" id="user" name="user" required>
        <br>
        <label for="password">Lösenord: </label>
        <br>
        <input class="form-control" type="password" id="password" name="passwords" required>
        <br>
        <br> 
        <input class="form-control" type="button" id="login" value="Logga in" onclick="return login1();">
    </form>
</div>

- ＆GT;我创建了其他版本的JSFiddle，因此您可以轻松地了解冲突问题：https://jsfiddle.net/5w6fg52m/2/

这里我保持功能名称相同（登录）并更改提交按钮的ID。

Answer 3

当您使用与之前声明的名称相同的名称声明变量或函数时，会发生这种情况。只需重命名登录功能或重命名id =＆＃34;登录＆＃34;。

登录验证功能

3 个答案: