为什么输入标签中所需的html不能正常工作?

时间:2019-02-19 12:12:26

标签: javascript html css

我正在创建一个伪造的登录页面(用户写的任何东西都被认为是正确的,因此将被登录),并且所需的代码在chrome上不起作用。

我尝试将所需的位放在不同的位置,但是没有用。我也尝试实现一些JavaScript,但没有成功。

此代码显示了一种形式,该形式在点击登录后要求用户名和密码,并触发了JS功能

<!-- language: lang-html -->

<div ng-app ng-init="checked = false">
    <form class="form-signin" name="form">
        <label for="username">Username</label>
        <input class="form-styling"
               id="user"
               type="text"
               name="username"
               required />

        <label for="password">Password</label>
        <input class="form-styling"
               type="text"
               name="password"
               required />
        <div class="btn-animate">
            <a class="btn-signin" type="submit" onClick="sayHi()">Sign in</a>
        </div>
    </form>  
<div>

与html一起使用的Javascript代码,当点击“登录”按钮时将触发。我不确定如何实现使用必需标记的JavaScript函数

$(".btn-signin").click(function()
{
    $(".container").toggleClass("state_signed-in");
});

function sayHi()
{
    var txtName = document.getElementById("user");
    var txtOutput = document.getElementById("txtOutput");
    var name = txtName.value;

    txtOutput.value = "Hi there, " + name + "!"
} // end sayHi

if the input is left empty it shouldn't let the form to be submitted

5 个答案:

答案 0 :(得分:1)

“登录”按钮可能存在错误,并且在“必需”之后不需要斜杠。

尝试template <typename T> class Queue{ // ... }; // ... Test2 new_val; Queue<Test2> data; data.append(new_val);

<input class="btn-signin" type="submit" onClick="sayHi()" value="Sign in">

答案 1 :(得分:0)

需要从[short1 shortcode_extra_data="syzzzzzz"]something inside content[/short1] HTML ng-click="sayHi(form)"传递表单值并检入控制器  如果表单有效或无效,则阻止该事件。

ng-click
$scope.sayHi = function()
 {
    if (!$scope.form.$valid) 
    {
        $event.preventDefault();
   }
}

答案 2 :(得分:0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div class="container">
        <form class="form-signin" name="form">
            <label>Username</label>
            <input class="form-styling" id="user" type="text" name="username" required />
            <label>Password</label>
            <input class="form-styling" id="pass" type="text" name="password" required />
            <div class="btn-animate">
                <input class="btn-signin" type="submit" value="Sign in"/>
            </div>
        </form>
    </div>
    <div id="txtOutput"></div>

    <script type="text/javascript">
        $(function () {
            $(".btn-signin").click(function (e) {
                $(".container").toggleClass("state_signed-in");
                if($('#user').val().trim() !== '' && $('#pass').val().trim() !== '' ) {
                    sayHi();
                }
            });

            function sayHi() {
                event.preventDefault();
                var txtName = $('#user').val();
                if(txtName !== ''){
                    var html = "Hi there, " + txtName + "!"
                    $('#txtOutput').text(html);
                }
            }
        });
    </script>
</body>
</html>

答案 3 :(得分:0)

该表单未提交。

您的功能会在点击时触发。

您应该使用submit()

$(".form-signin").submit(function(e) {
  e.preventDefault();
  sayHi()
  $(".container").toggleClass("state_signed-in");
});


function sayHi() {
  var txtName = document.getElementById("user").value;
  var txtOutput = document.getElementById("txtOutput");
  txtOutput.value = "Hi there, " + txtName + "!"
} // end sayHi
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app ng-init="checked = false">
  <form class="form-signin" name="form">
    <label for="username">Username</label>
    <input class="form-styling" id="user" type="text" name="username" required />

    <label for="password">Password</label>
    <input class="form-styling" type="password" name="password" required />
    <div class="btn-animate">
      <button class="btn-signin" type="submit">Sign in</button>
    </div>
  </form>
  <input id="txtOutput" disabled>
</div>

我还更改了一些其他细节。

答案 4 :(得分:-1)

请检查以下代码: 我已将“提交”按钮更新为: <input class="btn-signin" onClick="sayHi()" value="Sign in" type="submit">

您的最后一个div也没有关闭,所以现在我关闭了它。 </div>

<div ng-app ng-init="checked = false">
    <form class="form-signin" name="form">
        <label  for="username" >Username</label>
        <input class="form-styling" id ="user" type="text" name="username" required>
        <label for="password">Password</label>
        <input class="form-styling" type="text" name="password" required />
        <div class="btn-animate">
        <input class="btn-signin" onClick="sayHi()" value="Sign in" type="submit">
    </div>
    </form>
</div>