How to get different values in popup using jQuery

I've created a popup and want to get the input values from a form to a popup. But how to get these values in popup, I don't know. Give me a solution.

If you are also struggling with such questions then we got the perfect solution for you.

Related Topics:

How to get multiple checkbox values using jquery?

Add/Remove input fields dynamically using jquery in HTML for table

You can get different input values in your popup by using jquery. Jquery is a simple way to get the values in the popup. So here's the solution:

Use the following code to get input value from a form to a popup.

<!-- Below CSS and JS script is used to call the modal style and also to call the POP -->
<!-- You can use whole code for the trial -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!-- In input fields id attribute is used to get thevalue of field -->
<input type="text" name="mobile" id="visa_mobile" value="" required>
<input type="text" name="email" id="visa_email" value="" required>

<!-- Here "open-enquiry" is used in class to define button from where we get the values in popup -->
<!-- myModal2 is used to call the popup -->
<p> <a href="" class="btn btn-success btn-lg open-enquiry" data-target="#myModal2" 
data-toggle="modal" data-id="My Id" data-info="My Id"> Continue </a> </p>

<script>
$(document).on("click", ".open-enquiry", function() {
var myId = $(this).data('id'); // get the button value in a variable
// and also get the other values in another variables by using the input field id
var mobile = document.getElementById("visa_mobile").value; 
var email = document.getElementById("visa_email").value;

// here pass these values in popup by using the id's
$(".modal-dialog #get_my_id").val( myId );
$(".modal-dialog #mobile_id").val( mobile );
$(".modal-dialog #email_id").val( email );
});
</script>

And get in Popup
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">

<div class="modal-dialog">
    
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<input type="text" class="form-control" name="myid" id="get_my_id" readonly>
<input type="text" class="form-control" name="mobile" id="mobile_id" readonly>
<input type="text" class="form-control" name="email" id="email_id" readonly>
</div>
</div>
</div>
</div>
</div>