我正在尝试实现一个按钮,该按钮允许用户在确认框中编辑他们的数据。单击按钮后,用户将获得一个确认框,其中显示了他先前输入的数据。如果用户想要确认,则单击保存按钮并保存输入数据,但如果用户不同意数据,则允许他们在确认框中编辑数据。到目前为止,我已经能够通过单击一个按钮创建一个确认框,该按钮允许用户填写他们的数据,一旦单击保存按钮,输入的数据就会填充到输入表单中。但是我无法从他们先前输入的数据的输入表单中填充确认框。输入框应该是隐藏的,表单很复杂,但为了这个问题,我输入了一个普通的输入框并保持表单简单。
- 我的初始表单,数据填充了我的确认框
- 我编辑的数据
- 我在表格中的新数据
这是我的html代码
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
</head>
<body>
<form id='formcheck'action="" method="post" >
Your Data:<br>
<input type="text" id="entered_data" value=""style=" font-size: 20px;width:51% "><br><br>
<button type="button" id="check_data" style="font-size: 20px;" > Check Data</button><br><br>
<button type='submit'style="font-size: 20px;"> submit</button>
</form>
</body>
</html>
这是我的脚本
<script>
$(document).ready(function(){
$("#check_data").click(function(event){
//get the already available data in a variable
var $data= $('#entered_data').val();
$.confirm({
title: 'Data Check',
content: '' +
'<form action="" id="confirm_form">' +
'<label style="font-size:13pt;">Please enter your data</label>' +
'<input type="text" style="width: 100%;font-size:13pt;" value="" class="data" required />' +
'</form>',
boxWidth: '25%',
useBootstrap: false,
buttons: {
Save: {
action: function(){
var data = this.$content.find('.data').val();
//enter the new data into the field
$('#entered_data').val(data);
}
},
Cancel: {
action: function(){
$( this ).remove();
}
}
},
});
});
});
</script>