javascript - 防止表单提交后重新加载模式

我正在尝试构建一个具有模式的工具，该模式在页面加载时打开，然后用户将文本粘贴到文本区域并提交。之后，应该运行一个函数，返回该文本的特定字符数的子字符串。

当前我正在控制台记录正确的子字符串，但是在单击提交按钮后，模式再次运行。我只希望模式在页面加载时运行一次。

有人可以提供一些指导吗？

$(window).on('load',function() {
	$('#myModal').modal('show');
	
	
});

function myFunction(info) {
	var info = $('#textArea').val();
  var result = info.substring(0, 66);
	
	
	$('#result').html(result);
	console.log(result);
	
}

.container >* {
	margin:20px auto;
	width: 80%;
}

<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>

<body>

	<!-- The Modal -->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header">
					<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body">
					<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
					<p>Close the modal to see what your 66 characters look like.</p>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				</div> <!-- footer end -->
			</div> <!-- modal-content end -->
		</div> <!-- modal dialog end -->
	</div> <!-- mymodal end -->
	
	<div class="container">
		<header><h1>Bringhurst Rule</h1></header>
		<form class="align-center">
			<div class="form-group">
				<label for="textArea"></label>
				<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
			</div>
			<button type="submit" class="btn btn-info" onclick="myFunction()">Get the substring!</button>
		</form>
		
		
	</div>
	<div id="result"></div>
	
</body>

最佳答案

有更好的方法可以完成您正在做的事情，例如使用 jQuery 的精美事件处理程序而不是使用内联事件处理程序，但对您的问题最简单的答案是在事件上返回 false ..通过进行两项更改来做到这一点..

通过更改 HTML 使事件监听器返回事件处理程序的结果，如下所示。onclick="return myFunction()"(在此处添加了 return)
从函数本身返回 false。

通过返回 false，您将阻止默认操作，即提交表单。

或者，您可以删除表单本身或将提交按钮更改为常规按钮。

$(window).on('load',function() {
	$('#myModal').modal('show');
	
	
});

function myFunction(info) {
	var info = $('#textArea').val();
  var result = info.substring(0, 66);
	
	
	$('#result').html(result);
	console.log(result);
	return false;
}

.container >* {
	margin:20px auto;
	width: 80%;
}

<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>

<body>

	<!-- The Modal -->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header">
					<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body">
					<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
					<p>Close the modal to see what your 66 characters look like.</p>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				</div> <!-- footer end -->
			</div> <!-- modal-content end -->
		</div> <!-- modal dialog end -->
	</div> <!-- mymodal end -->
	
	<div class="container">
		<header><h1>Bringhurst Rule</h1></header>
		<form class="align-center">
			<div class="form-group">
				<label for="textArea"></label>
				<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
			</div>
			<button type="submit" class="btn btn-info" onclick="return myFunction()">Get the substring!</button>
		</form>
		
		
	</div>
	<div id="result"></div>
	
</body>

关于javascript - 防止表单提交后重新加载模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48269391/

javascript - 防止表单提交后重新加载模式

上一篇：javascript - Zoom api : I can create, 列出、删除等 session 。但是我无法从api获取视频

下一篇：javascript - 发送表单后难以显示成功消息