hijacker83 hijacker83 - 1 month ago 9
Ajax Question

show the form response in modal window using Magnific Popup

I am trying to submit a form using ajax and show the response on modal window using Magnific Popup. I have posted the code below. In regarding to make it work I have to click "send" button then "popup" button. I was playing with for the last 3 hours and couldn't make it work. Can you please see what I am doing wrong? I want to click to send button and see the php responses on the modal popup window.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {

$(document).on('click', '.popup-modal', function (e) {

$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
var formdata = $(this).serialize();
$.ajax({
type:"POST",
url:"result.php",
data:formdata,
success: function(msg){
$("#modal-results").html(msg)

},
error:function(){
alert("failure");
}
});
});


});

$('.popup-modal').magnificPopup({
type: 'inline'

});
});
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input type="text" name="name" placeholder="NAME">
<input type="text" name="email" placeholder="EMAIL">
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
<input name="sendData" type="submit" value="SEND">
<button type="submit" class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</form>

</body>
</html>

Answer

you are not seting it correctly, based on documentation for "inline type". You have to set items paramater that contains type and src.

I created a function createSrc that is called when button is pressed. It creates an <div> element that is used for modal dialog. I also added the style for this window.

<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script> 
    <script type="text/javascript">
     jQuery(document).ready(function() {

                   $(document).on('click', '.popup-modal', function (e) {

                    $( "#indexform" ).on( "submit", function( event ) {
                  event.preventDefault();
                  var formdata = $(this).serialize();
                  $.ajax({
                        type:"POST",
                        url:"result.php",
                        data:formdata,
    success: function(msg){
                $("#modal-results").html(msg)

            },
            error:function(){
                alert("failure");
            }
                  });
                });


        });

        $('.popup-modal').magnificPopup({
        items: {
          src: createSrc(),
          type: 'inline'
      }

    });
});
    			
function createSrc(){
    				return "<div class='white-popup'>" + jQuery("#name").val() + "<br>" + "</div>";
}
    </script>
        <link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
        <style>
        div#modal-results {
        color: white;
    }

    .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;
    }

    </style>
    </head>  
    <body>
                    <form method="post" name="index" id="indexform">
                    <input id="name" type="text" name="name" placeholder="NAME">
                    <input id="email" type="text" name="email" placeholder="EMAIL">
                    <textarea id="message" rows="3" name="message" placeholder="MESSAGE"></textarea>
                    <input name="sendData" type="submit" value="SEND">
                    <button  type="submit" class="popup-modal" href="#modal-results">Popup</button>
                    <div id="modal-results"></div>
                    </form>
    
    </body>
    </html>

EDIT

Since you are using ajax, you don't need <form> tag. I modified your friends code. You were also duplicting POST request calls. Fist click didn't do a POST request and so couldnt show an error, because you rewrote it when you initalized the popup. The second click got 1 POST request, the third click sent 2 POST requests, the forth 3 and so on.

Try the code below:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script> 
<script type="text/javascript">

 jQuery(document).ready(function() {

    $( '.popup-modal').on('click', function(e) {
          
   		    console.log( $(this).serialize() );
            var formdata = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "http://demo.sbvan.com//result.php",
                data: formdata,
                success: function(msg) {
                    $("#modal-results").html(msg);
                    $('.popup-modal').magnificPopup({
                          type: 'inline'
                     });

                },
                error: function() {
                    $("#modal-results").html("failure");
                    $('.popup-modal').magnificPopup({
                          type: 'inline'
                     });
                }
            });      


    });

});
			
</script>

    <link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
    <style>
    div#modal-results {
    color: white;
}
</style>
</head>  
<body>
                
                <input type="text" name="name" placeholder="NAME">
                <input type="text" name="email" placeholder="EMAIL">
                <textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
                <!--<input name="sendData" type="submit" value="SEND">-->
                <button  class="popup-modal" href="#modal-results">Popup</button>
                <div id="modal-results"></div>
                
</body>
</html>

EDIT 2:

You can also create pop-up with funciont, without button. So call that function after you click on submit. But remember, you are not using any ACTION tag in your form so there is no need to have your input type "submit". Set it ot "button" instead. You are submiting it via AJAX.

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script> 

    <link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
    <style>
    .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;
    }
    #popup {
        visibility: hidden;     
    }

</style>
</head>  
<body>
                <form method="post" name="index" id="indexform">
                <input type="text" name="name" placeholder="NAME"><br/>
                <input type="text" name="email" placeholder="EMAIL"><br/>
                <textarea rows="3" name="message" placeholder="MESSAGE"></textarea><br/>
                <input name="sendData" id="sendData" type="button" value="SEND">                
                <div id="modal-results" class="white-popup mfp-hide">
                <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
                </div>
                </form>
                <script type="text/javascript">
                    jQuery(document).ready(function() {

                        $( '#sendData').on('click', function(e) {

                                console.log( $(this).serialize() );
                                var formdata = $(this).serialize();
                                $.ajax({
                                    type: "POST",
                                    url: "result.php",
                                    data: formdata,
                                    success: function(msg) {
                                        $("#modal-results").html(msg);
                                       $.magnificPopup.open({
                                        items: {
                                            src: '#modal-results',
                                            type: 'inline'

                                        }
                            });

                                    },
                                    error: function() {
                                        $("#modal-results").html("failour");
                                        $.magnificPopup.open({
                                            items: {
                                                src: '#modal-results',
                                                type: 'inline'

                                            }
                                        });
                                    }
                                });      


                        });

                    });
                </script>
</body>
</html>