jquery - show the form response in modal window using Magnific Popup -
i trying submit form using ajax , show response on modal window using magnific popup. have posted code below. in regarding make work have click "send" button "popup" button. playing last 3 hours , couldn't make work. can please see doing wrong? want click send button , see php responses on 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>
you not seting correctly, based on documentation "inline type". have set items paramater contains type
, src
.
i created function createsrc called when button pressed. creates <div>
element used modal dialog. added style 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 using ajax, don't need <form>
tag. modified friends code. duplicting post request calls. fist click didn't post request , couldnt show error, because rewrote when initalized popup. second click got 1 post request, third click sent 2 post requests, forth 3 , on.
try 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 create pop-up funciont, without button. call function after click on submit. remember, not using action tag in form there no need have input type "submit". set ot "button" instead. submiting 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>
Comments
Post a Comment