Javascript “提交表单一致性”对话框正在重定向到另一个页面，而不是等待确认弹出窗口 。输入用户详细信息{ 宽度：500px； 保证金：自动； 背景色：#eee； 文本对齐：居中； 填充：20px； } .modal main{ 位置：相对位置； 宽度：100%； 身高：100%； 显示：无； } .模态内部{ 位置：固定； 宽度：100%； 身高：100%； 背景色：rgba（0,0,0,0.52）； 排名：0； 左：0； } .模态体{ 背景色：#fff； 宽度：500px； 最小高度：100px； 保证金：0自动； 边缘顶部：100px； } .cansel btn{ 宽度：80px；背景色：#6c7135；填充：5px；字体重量：粗体； } .好的{ 背景色：#6c7135；填充：5px；宽度：80px；字体大小：粗体； } .基站{ 显示：内联块； 文本对齐：居中； } .表演{ 显示：块； } $（文档）.ready（函数（）{ $（“.submit”）。单击（函数（e）{ 用户名=$（'.userName'）.val（）； email=$（'.email'）.val（）； txt=“”； 如果（email.length>2&&userName.length>3）{ $（'.modal main'）.show（）； console.log（用户名）； }否则{ $（'.modal main'）.hide（）； txt=“你没有保存详细信息！”； document.getElementById（“demo”）.innerHTML=txt+''+localStorage.getItem（“用户名”）； 返回false； } $（'body'）。在（'click'，'cansel btn'，function（）上{ $（'.modal main'）.hide（）； txt=“你没有保存详细信息！”； document.getElementById（“demo”）.innerHTML=txt+''+localStorage.getItem（“用户名”）； 返回false； }); $（'body'）。在（'click'，'ok btn'，function（）上{ //$（'.modal main'）.hide（）； setItem（'userName'，userName）； var email=localStorage.setItem（'email'，email）； //document.getElementById（'mainForm'）.submit（）； }); }); });
单击按钮以显示确认框 试试看 您确定要提交。。。。。。。。？Javascript “提交表单一致性”对话框正在重定向到另一个页面，而不是等待确认弹出窗口 。输入用户详细信息{ 宽度：500px； 保证金：自动； 背景色：#eee； 文本对齐：居中； 填充：20px； } .modal main{ 位置：相对位置； 宽度：100%； 身高：100%； 显示：无； } .模态内部{ 位置：固定； 宽度：100%； 身高：100%； 背景色：rgba（0,0,0,0.52）； 排名：0； 左：0； } .模态体{ 背景色：#fff； 宽度：500px； 最小高度：100px； 保证金：0自动； 边缘顶部：100px； } .cansel btn{ 宽度：80px；背景色：#6c7135；填充：5px；字体重量：粗体； } .好的{ 背景色：#6c7135；填充：5px；宽度：80px；字体大小：粗体； } .基站{ 显示：内联块； 文本对齐：居中； } .表演{ 显示：块； } $（文档）.ready（函数（）{ $（“.submit”）。单击（函数（e）{ 用户名=$（'.userName'）.val（）； email=$（'.email'）.val（）； txt=“”； 如果（email.length>2&&userName.length>3）{ $（'.modal main'）.show（）； console.log（用户名）； }否则{ $（'.modal main'）.hide（）； txt=“你没有保存详细信息！”； document.getElementById（“demo”）.innerHTML=txt+''+localStorage.getItem（“用户名”）； 返回false； } $（'body'）。在（'click'，'cansel btn'，function（）上{ $（'.modal main'）.hide（）； txt=“你没有保存详细信息！”； document.getElementById（“demo”）.innerHTML=txt+''+localStorage.getItem（“用户名”）； 返回false； }); $（'body'）。在（'click'，'ok btn'，function（）上{ //$（'.modal main'）.hide（）； setItem（'userName'，userName）； var email=localStorage.setItem（'email'，email）； //document.getElementById（'mainForm'）.submit（）； }); }); });,javascript,php,jquery,Javascript,Php,Jquery,单击按钮以显示确认框 试试看 您确定要提交。。。。。。。。？ 取消 好啊 在上面的代码中，一切正常，但每当我提交表单时，一个弹出窗口将打开，每当我在弹出窗口上按ok时，它只需重定向到另一个页面，但现在每当我提交表单时，它将直接重定向，而无需弹出确认。希望此示例可以帮助： jsfiddle： $（文档）.ready（函数（）{ $（“.submit”）。单击（函数（e）{ 用户名=$（'.userName'）.val（）； email=$（'.email'）.val（）； txt=“”； 如
取消 好啊
在上面的代码中，一切正常，但每当我提交表单时，一个弹出窗口将打开，每当我在弹出窗口上按ok时，它只需重定向到另一个页面，但现在每当我提交表单时，它将直接重定向，而无需弹出确认。希望此示例可以帮助： jsfiddle：
$（文档）.ready（函数（）{
$（“.submit”）。单击（函数（e）{
用户名=$（'.userName'）.val（）；
email=$（'.email'）.val（）；
txt=“”；
如果（email.length>2&&userName.length>3）{
var r=确认（“您确定要提交……？”；
如果（r==true）{
返回true；
}否则{
返回false；
}
console.log（用户名）；
}否则{
$（'.modal main'）.hide（）；
txt=“请先填写表格！”；
document.getElementById（“demo”）.innerHTML=txt+''+localStorage.getItem（“用户名”）；
返回false；
}
$（'body'）。在（'click'，'cansel btn'，function（）上{
$（'.modal main'）.hide（）；
txt=“你没有保存详细信息！”；
document.getElementById（“demo”）.innerHTML=txt+''+localStorage.getItem（“用户名”）；
返回false；
});
$（'body'）。在（'click'，'ok btn'，function（）上{
//$（'.modal main'）.hide（）；
setItem（'userName'，userName）；
var email=localStorage.setItem（'email'，email）；
//document.getElementById（'mainForm'）.submit（）；
});
});
});
。输入用户详细信息{
宽度：500px；
保证金：自动；
背景色：#eee；
文本对齐：居中；
填充：20px；
}
.modal main{
位置：相对位置；
宽度：100%；
身高：100%；
显示：无；
}
.模态内部{
位置：固定；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.52）；
排名：0；
左：0；
}
.模态体{
背景色：#fff；
宽度：500px；
最小高度：100px；
保证金：0自动；
边缘顶部：100px；
}
.cansel btn{
宽度：80px；背景色：#6c7135；填充：5px；字体重量：粗体；
}
.好的{
背景色：#6c7135；填充：5px；宽度：80px；字体大小：粗体；
}
.基站{
显示：内联块；
文本对齐：居中；
}
.表演{
显示：块；
}
单击按钮以显示确认框
试试看
您确定要提交。。。。。。。。？
<!DOCTYPE html>
<html>
<head>
<style>
.enter-userdetails{
width:500px;
margin: auto;
background-color: #eee;
text-align: center;
padding: 20px;
}
.modal-main{
position: relative;
width: 100%;
height: 100%;
display: none;
}
.modal-inner{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.52);
top: 0;
left:0;
}
.modal-body{
background-color: #fff;
width: 500px;
min-height:100px;
margin: 0 auto;
margin-top:100px;
}
.cansel-btn{
width: 80px; background-color: #6c7135; padding: 5px;font-weight: bold;
}
.ok-btn{
background-color: #6c7135; padding: 5px; width: 80px; font-weight: bold;
}
.btns{
display: inline-block;
text-align: center;
}
.show{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".submit").click(function(e){
userName = $('.userName').val();
email = $('.email').val();
txt ="";
if(email.length > 2 && userName.length>3){
$('.modal-main').show();
console.log(userName);
}else{
$('.modal-main').hide();
txt = "heyy mahalingaaa You did not saved details!";
document.getElementById("demo").innerHTML = txt + ' '+ localStorage.getItem('userName');
return false;
}
$('body').on('click','.cansel-btn',function(){
$('.modal-main').hide();
txt = "heyy mahalingaaa You did not saved details!";
document.getElementById("demo").innerHTML = txt + ' '+ localStorage.getItem('userName');
return false;
});
$('body').on('click','.ok-btn',function(){
//$('.modal-main').hide();
localStorage.setItem('userName',userName );
var email =localStorage.setItem('email',email );
//document.getElementById('mainForm').submit();
});
});
});
</script>
</head>
<body>
<div class="enter-userdetails">
<p>Click the button to display a confirm box.</p>
<form class="form" action="savedData.html" id="mainForm">
<input class="userName" type="text"/>
<input class="email" type="text"/>
<button class="submit">Try it</button>
<div class="modal-main">
<div class="modal-inner">
<div class="modal-body">
<div class="btns">
Are you sure you want to SUBMIT........?
<br><br><br>
<button class="cansel-btn">
Cancel
</button>
</div>
<button class="ok-btn" type="submit">
Ok
</button>
</div>
</div>
</div>
</form>
<h2 id="demo" style="color:red"></h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.enter-userdetails{
width:500px;
margin: auto;
background-color: #eee;
text-align: center;
padding: 20px;
}
.modal-main{
position: relative;
width: 100%;
height: 100%;
display: none;
}
.modal-inner{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.52);
top: 0;
left:0;
}
.modal-body{
background-color: #fff;
width: 500px;
min-height:100px;
margin: 0 auto;
margin-top:100px;
}
.cansel-btn{
width: 80px; background-color: #6c7135; padding: 5px;font-weight: bold;
}
.ok-btn{
background-color: #6c7135; padding: 5px; width: 80px; font-weight: bold;
}
.btns{
display: inline-block;
text-align: center;
}
.show{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".submit").click(function(e){
userName = $('.userName').val();
email = $('.email').val();
txt ="";
// write ur validation code here
if(email.length > 2 && userName.length>3 ){
$('.modal-main').show();
e.preventDefault();
}else{
$('.modal-main').hide();
txt = "heyy fukker mahalingaaa You did not saved details!";
document.getElementById("demo").innerHTML = txt;
return false;
}
$('.cansel-btn').click(function(){
$('.modal-main').hide();
txt = "heyy fukker mahalingaaa You did not saved details!";
document.getElementById("demo").innerHTML = txt;
return false;
});
$('.ok-btn').click(function(){
localStorage.setItem('userName',userName );
localStorage.setItem('email',email );
});
});
});
</script>
</head>
<body>
<div class="enter-userdetails">
<p>Click the button to display a confirm box.</p>
<form class="form" action="savedData.html" id="mainForm">
<input class="userName" type="text"/>
<input class="email" type="text"/>
<button class="submit">Try it</button>
<div class="modal-main">
<div class="modal-inner">
<div class="modal-body">
<div class="btns">
Are you sure you want to SUBMIT........?
<br><br><br>
<button class="cansel-btn">
Cancel
</button>
</div>
<button class="ok-btn" type="submit">
Ok
</button>
</div>
</div>
</div>
</form>
<h2 id="demo" style="color:red"></h2>
</div>
</body>
</html>