0

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

  1. 我的初始表单,数据填充了我的确认框

在此处输入图像描述

  1. 我编辑的数据

在此处输入图像描述

  1. 我在表格中的新数据

在此处输入图像描述

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

4

1 回答 1

0

我有一段时间没有使用 HTML 或 JQuery,但是在搞砸了一段时间之后,我想我可能已经管理了您正在寻找的东西。


改变:

' value="" '


到:

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


只需将弹出框在其 HTML 中的“值”设置为输入字段中的任何内容。这是否有机会回答您的问题?

于 2020-11-21T18:54:07.197 回答