0

I am trying to implement a button which allows user to edit their data in a confirm box. Once the button is clicked the user gets a confirmation box which shows his previously entered data. If the users wants to confirm then they click on the save button and the input data is saved but if the users do not agree with the data then they are allowed to edit the data in the confirm box itself. Till now I have been able to create a confirm box on a click of a button which allows user to fill their data and once the save button is clicked the entered data is populated into the input form. But i have not been able to populate the confirm box from the input form of their previously entered data. The input box is supposed to be hidden and the form is complex but for the sake of the question I have entered a normal input box and kept the form simple. Here are 3 images which explains what i am trying to achieve.

  1. my initial form with data populating my confirm box

enter image description here

  1. my edited data

enter image description here

  1. my new data in the form

enter image description here

here is my html code


    <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>

and here is my script

<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>
Prakhar Gyawali
  • 527
  • 4
  • 18

1 Answers1

0

I haven't used HTML or JQuery in a while, but after messing around with it for a while, I think I may have managed what you are looking for.


Change:

' value="" '


To:

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


Simply set the popup box's "value" in its HTML to whatever was in the input field. Does this answer your question by any chance?

KalamariKing
  • 146
  • 2
  • 9