Javascript 使用输入字段中的数据填充确认/弹出框，并允许用户在html和jquery中进行编辑_Javascript_Html_Jquery_Popup_Confirmbutton

Javascript 使用输入字段中的数据填充确认/弹出框，并允许用户在html和jquery中进行编辑

javascript html jquery

Javascript 使用输入字段中的数据填充确认/弹出框，并允许用户在html和jquery中进行编辑,javascript,html,jquery,popup,confirmbutton,Javascript,Html,Jquery,Popup,Confirmbutton,我试图实现一个按钮，允许用户在确认框中编辑他们的数据。单击按钮后，用户将获得一个确认框，其中显示其先前输入的数据。如果用户希望确认，则单击“保存”按钮并保存输入数据，但如果用户不同意数据，则允许他们在“确认”框中编辑数据。到目前为止，我已经能够创建一个确认框，点击一个按钮，允许用户填写他们的数据，一旦点击保存按钮，输入的数据将填充到输入表单中。但我无法从他们以前输入的数据的输入表单中填充确认框。输入框应该是隐藏的，表单很复杂，但是为了这个问题，我输入了一个普通的输入框，并保持表单的简单。这里有

我试图实现一个按钮，允许用户在确认框中编辑他们的数据。单击按钮后，用户将获得一个确认框，其中显示其先前输入的数据。如果用户希望确认，则单击“保存”按钮并保存输入数据，但如果用户不同意数据，则允许他们在“确认”框中编辑数据。到目前为止，我已经能够创建一个确认框，点击一个按钮，允许用户填写他们的数据，一旦点击保存按钮，输入的数据将填充到输入表单中。但我无法从他们以前输入的数据的输入表单中填充确认框。输入框应该是隐藏的，表单很复杂，但是为了这个问题，我输入了一个普通的输入框，并保持表单的简单。这里有3张图片，解释了我想要实现的目标

我的初始表单，数据填充我的确认框

我编辑的数据

我在表单中的新数据

这是我的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>


$（文档）.ready（函数（）{
$（“#检查#数据”）。单击（函数（事件）{
//获取变量中已经可用的数据
var$data=$（“#输入的_数据”）.val（）；
美元。确认({
标题：“数据检查”，
内容：“”+
'' +
'请输入您的数据'+
'' +
'',
箱宽：“25%”，
useBootstrap:false，
按钮：{
保存：{
行动：功能（）{
var data=this.$content.find（'.data'）.val（）；
//在字段中输入新数据
$（“#输入的#数据”）.val（数据）；
}        
},
取消：{
行动：功能（）{
$（this.remove（）；
}
}
}, 
});
});
});

我已经有一段时间没有使用HTML或JQuery了，但在使用它一段时间后，我想我可能已经管理好了您要找的内容

更改：

' value="" '

' value="' + $('#entered_data').val() + '" '

至：

' value="" '

' value="' + $('#entered_data').val() + '" '

只需将弹出框HTML中的“值”设置为输入字段中的任何值。

这有可能回答您的问题吗？

我是jquery新手。我不知道我们可以添加这样的额外字符串。这就是我要找的。非常感谢你。“你让我高兴极了！”当然是普拉哈贾瓦利！祝你的项目好运，编程愉快！