使用输入字段中的数据填充 confirm/pop 向上框，并允许用户在 html 和 jquery 中进行编辑

Question

我正在尝试实现一个按钮，允许用户在确认框中编辑他们的数据。单击按钮后，用户会看到一个确认框，其中显示他之前输入的数据。如果用户想要确认，则他们单击保存按钮并保存输入的数据，但如果用户不同意该数据，则允许他们在确认框中编辑数据。到目前为止，我已经能够在单击按钮时创建一个确认框，允许用户填写他们的数据，一旦单击保存按钮，输入的数据就会填充到输入表单中。但是我无法从他们之前输入的数据的输入表单中填充确认框。输入框应该是隐藏的并且表单很复杂但是为了这个问题我输入了一个普通的输入框并保持表单简单。这里有 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>

Answer 1

我已经有一段时间没有使用 HTML 或 JQuery，但经过一段时间的折腾，我想我可能已经找到了你想要的东西。

变化：

' value="" '

收件人：

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

只需将弹出框的 HTML 中的“值”设置为输入字段中的任何内容即可。这是否回答了您的问题？

使用输入字段中的数据填充 confirm/pop 向上框，并允许用户在 html 和 jquery 中进行编辑

Populate a confirm/pop up box with data from the input field and allow user to edit in html and jquery

html

javascript

jquery

popup

confirmbutton