我的javascript是否已正确连接到HTML并正在触发？
我的javascript是否已正确连接到HTML并正在触发？
提问于 2018-06-21 04:44:46
我用id="contactForm"设置了我的表单。当我在相应的JS文件中编写$("#contactForm").submit(function(event){...}时，其中似乎没有任何东西是触发的。
这是怎么回事？
$("#contactForm").submit(function(event) {
// cancels the form submission
event.preventDefault();
console.log("submit hit");
alert("Submitted");
});<script src="js/jquery-3.2.1.min.js"></script>
^ I use this in production, not a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="modal-body">
<form role="form" action="form-process.php" method="POST" id="contactForm">
<div class="input-group mb-3">
<label for="name"></label>
<div class="input-group-prepend"> <span class="input-group-text">Name</span> </div>
<input type="text" class="form-control" id="name" aria-label="First and last name.">
<div class="invalid-feedback">Required</div>
<div class="valid-feedback"></div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text">Email</span> </div>
<input type="email" class="form-control" aria-label="Email address." id="email">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Subject</button>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Music</a> <a class="dropdown-item" href="#">Programming</a> <a class="dropdown-item" href="#">Just saying hi!</a> </div>
</div>
<input type="text" class="form-control" aria-label="Subject" id="subject">
</div>
<div class="input-group">
<div class="input-group-prepend mb-3"> <span class="input-group-text">Message</span> </div>
<textarea class="form-control" id="message" aria-label="Email message."></textarea>
</div>
</form>
<button class="btn btn-outline-primary" id="form-submit" type="submit" data-dismiss="modal">Send</button>
</div>
<script src="js/email.js"></script>
^ This has the contents of the form logic
这是到live site的链接。
回答 2
Stack Overflow用户
发布于 2018-06-21 04:53:12
您的提交按钮似乎在<form>之外。
它必须在<form>标记内，才能提交表单并触发提交事件。
(由于data-dismiss="modal"，该按钮仍会关闭模式。)
$("#contactForm").submit(function(event) {
// cancels the form submission
event.preventDefault();
console.log("submit hit");
alert("Submitted");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" action="form-process.php" method="POST" id="contactForm">
<div class="input-group mb-3">
<label for="name"></label>
<div class="input-group-prepend"> <span class="input-group-text">Name</span> </div>
<input type="text" class="form-control" id="name" aria-label="First and last name.">
<div class="invalid-feedback">Required</div>
<div class="valid-feedback"></div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"> <span class="input-group-text">Email</span> </div>
<input type="email" class="form-control" aria-label="Email address." id="email">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Subject</button>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Music</a> <a class="dropdown-item" href="#">Programming</a> <a class="dropdown-item" href="#">Just saying hi!</a> </div>
</div>
<input type="text" class="form-control" aria-label="Subject" id="subject">
</div>
<div class="input-group">
<div class="input-group-prepend mb-3"> <span class="input-group-text">Message</span> </div>
<textarea class="form-control" id="message" aria-label="Email message."></textarea>
</div>
<button class="btn btn-outline-primary" id="form-submit" type="submit" data-dismiss="modal">Send</button>
</form>
Stack Overflow用户
发布于 2018-06-21 05:07:03
提交表单的按钮#form-submit需要在<form></form>块内。试着修复它，它会工作得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50956768
复制相关文章
相似问题