javascript - 如何通过jQuery提交表单并获取表单值
问题描述
我正在尝试通过模式提交表单,但在提交时页面重新加载时出现问题,我阻止了默认操作,但页面仍然重新加载。
我不知道为什么这会给我带来问题,有人可以帮忙吗?
HTML 代码:
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal Area-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="close text-secondary" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">Close</span>
</button>
</div>
<div class="text-secondary font-weight-normal info" id="info"></div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4 col-sm-4 col-3 profile">
<ul>
<li class="side-link"><a href="#" id="home" >Profile</a></li>
<li class="side-link"><a href="#" id="design" >Account & Security</a></li>
<li class="side-link"><a href="#" id="account" >Notifications</a></li>
<li class="side-link"><a href="#" id="about" >Help</a></li>
<li class="side-link"><a href="#" id="logout" >Logout</a></li>
</ul>
</div>
<div class="col-md-8 col-sm-8 col-9" id="home-box">
<img src="https://source.unsplash.com/random/200x200">
<a href="#">Edit</a>
<h4 class="text-secondary mt-2 text-sm">PROFILE INFO</h4>
<div class="mt-2">
<form method="POST" action="#" id="edit-form">
<div class="form-group">
<label>First name</label>
<input type="text" name="fname" id="fname" class="form-control">
</div>
<div class="form-group">
<label>Last name</label>
<input type="text" name="lname" id="lname" class="form-control">
</div>
<div class="mt-2">
<h4>Additional Info</h4>
<div class="form-group-inline">
<label>Display name</label>
<input type="text" name="dname" id="dname" class="form-control">
</div>
<div class="form-group">
<label>Website</label>
<input type="text" name="website" id="website" class="form-control">
</div>
<div class="form-group">
<label>Bio </label>
<textarea class="form-control" name="description" id="description" rows="4" cols="5" placeholder="Enter a short description about yourself"></textarea>
</div>
</div>
<input type="submit" id="save-btn" class="btn btn-primary" value="save value">
</form>
</div>
</div>
<div class="col-md-8" style="display: none;" id="design-box">
</div>
<div class="col-md-8" id="account-box" style="display: none;">
<h3>Account Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dignissimos excepturi at, maiores nesciunt vel delectus consequuntur mollitia a exercitationem!</p>
</div>
<div class="col-md-8" id="about-box" style="display: none;">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal Area End -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
和 Javascript
$(document).ready(()=>{
$('#drop-down').click((e)=>{
e.preventDefault()
})
var def = $('#home').text()
$('#info').text(def)
//Home functions
$('#home').click((e)=>{
e.preventDefault()
$('#design-box').hide()
$('#account-box').hide()
$('#about-box').hide()
$('#home-box').show()
var infoDisplay = $('#home').text()
$('#info').text(infoDisplay)
$('#edit-form').submit((e)=>{
e.preventDefault()
console.log('form-submit',$('#edit-form').serializeArray())
})
})
//Design functions
$('#design').click((e)=>{
e.preventDefault()
$('#account-box').hide()
$('#about-box').hide()
$('#home-box').hide()
$('#design-box').show()
var infoDisplay = $('#design').text()
$('#info').text(infoDisplay)
console.log("show box")
})
//Account functions
$('#account').click((e)=>{
e.preventDefault()
$('#design-box').hide()
$('#home-box').hide()
$('#about-box').hide()
$('#account-box').show()
var infoDisplay = $('#account').text()
$('#info').text(infoDisplay)
})
//About function
$('#about').click((e)=>{
e.preventDefault()
$('#design-box').hide()
$('#home-box').hide()
$('#account-box').hide()
$('#about-box').show()
var infoDisplay = $('#about').text()
$('#info').text(infoDisplay)
})
// Logout functions
$('#logout').click((e)=>{
e.preventDefault()
if(confirm('Are you sure you want to quit?')){
console.log('redirects to home page')
}else{
console.log('clicked no')
}
})
})
解决方案
我制作了一个 jsfiddle 来向您展示如何获取 FormData 对象:
https://jsfiddle.net/ac81hk97/
$('form').on('submit', function(ev) {
ev.preventDefault();
const $form = $(this);
const formData = new FormData($form[0]);
const formObj = {};
for (var key of formData.keys()) {
console.log(key);
formObj[key] = formData.get(key);
}
const json = JSON.stringify(formObj);
$('#json').text(json);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="222" action="">
<input type="text" name="first_input">
<input type="text" name="second_input">
<button>submit</button>
</form>
<div id="json"></div>
如果您查看此答案,您可以看到如何使用form.serialize()
推荐阅读
- tsql - 如何有效地选择一组值 TSQL 的最新记录?
- cakephp - 使用 cakephp 检索数据
- mysql - 将值拆分为其他几列
- python - 下载适用于 Python 的 Tensorflow - 如何消除此错误?
- php - 如何在 xlsxwriter 类中使用 mysql while 循环?
- sql-server - 具有来自 2 个表的值的递归 cte
- symfony4 - Symfony 4 内置 Web 服务器如何更改日志级别?
- spring-boot - Gradle 4.7构建抛出错误执行任务bootRepackage
- python - 通过案例密集模式找到正确的路径
- java - JUnit 测试用例:参数不同!通缉: