javascript - 避免按下按钮时重新加载页面

标签 javascript html

正是当我单击按钮重新加载页面时出现的问题,解决方案是使用 preventDefault() 但因为“输入控制未正确执行,或者如果模式是不满意不出现任何错误

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
        //event.preventDefault();
        var use = $('#Username').val();
        var passwor = $('#Password').val();
        alert("Hi);
        // Ajax request here
     });
</script>
<div class="container">
		<div class="card"></div>
		<div class="card">
			<h1 class="title">Login</h1>
			<form>
			<div class="input-container">
				<input type="text" id="Username" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
				<label for="Username">Username</label>
				<div class="bar"></div>
			</div>
			<div class="input-container">
				<input type="password" id="Password" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
				<label for="Password">Password</label>
				<div class="bar"></div>
			</div>
			
			
			<div class="button-container">
				<button id="go" ><span>Login</span></button>
			</div>
		</form>
		</div>
	</div>

最佳答案

删除 src="jquery-1.11.3.min.js"它应该可以工作。 如果您必须添加 jquery 库,请给它一个单独的 scrip 元素。

<!DOCTYPE html>
<html>

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
        <div class="card"></div>
        <div class="card">
            <h1 class="title">Login</h1>
            <form>
            <div class="input-container">
                <input type="text" id="Username" />
                <label for="Username">Username</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" />
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>


            <div class="button-container">
                <button id="go" ><span>Login</span></button>
            </div>
        </form>
        </div>
    </div>

    <script>
    $('#go').on('click',function(e){
      var username=$("#Username").val();
      var password=$('#Password').val();
      e.preventDefault();
      alert('Hi');
      //write ajax code here
    });
    </script>

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


  </body>

</html>

听说是骗子链接:- http://plnkr.co/edit/FmdXu6YixLjlaYerLHFa?p=preview

关于javascript - 避免按下按钮时重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34595645/

相关文章:

javascript - document.head.appendChild 或 document.createElement 在 IE 中不起作用

c# - 将 QueryString 参数添加到 GridView ItemTemplate

html - 结果右对齐

javascript - 转义 html 标记

php - 从向另一个 php 发送请求的 php 中检索用户在 html 中输入的特定数据

javascript - 无法将数据从我的 Google 分析帐户提取到 Google 文档

javascript - 从 Orient DB 中的查询结果访问节点

c# - ASP :button and javascript popup

html - 我如何在 Bootstrap 中垂直和水平居中 asp 按钮

paypal 的 php 基本立即付款按钮