Search jQuery

jQuery Forum

Using magnific popup type ajax in form Submit

in Using jQuery Plugins • 6 years ago

I have a question. I am not much aware of javascript. I want to open a new page (showresults.asp) with all form data transferred to, using magnifique popup Type Ajax. The new window should open on pressing the form Submit (Send) button.

I saw the following code in another post, it needs some modification for the requirements mentioned above. The link to post page is:

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

   <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" type="submit" value="SEND">
            <button type="submit" id="popup" class="popup-modal" href="#modal-results">Popup</button>
            <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">
                $("#indexform").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() {
                        $("#modal-results").html("Failure");
                    }

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

                    });
                    $('#popup').click();
                });
                });
            </script>
</body>
</html>

Replies(8)

watusiware

Re: Using magnific popup type ajax in form Submit

6 years ago

If you want to open a new page, don't use Ajax.

Ajax is for when you DON'T want to open a new page, but want to stay on the same page!

Ajax lets you send some data to a server (possibly from a form, but not necessarily) while staying on the same page. Your code can then process the response from the server and do something with it - or not.

babar ch

Re: Using magnific popup type ajax in form Submit

6 years ago

Hi,
I want to stay on the same page (xyz.asp) and open a popup (with page showresults.asp) when I press the form submit button. I am using magnific popup plugin.

Babar

watusiware

Re: Using magnific popup type ajax in form Submit

6 years ago

Please provide a link to the "other post", so that we can know what you are basing this on. The code out of context isn't very useful if we don't know what it was for or what problem it was supposed to solve.

What will showresults.asp contain? An HTML fragment for loading into the popup? A full HTML page, and so some HTML will have to be extracted from the page? Something else?

It is probably better to go read the Magnific Popup documentation than to copy code from another post which may or may not be relevant. Here's the documentation on the Ajax type:

http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax-type

It appears that the code that you posted above uses Magnific Popup to display results in the popup using inline type, but with the Ajax coded in jQuery. It seems it should be functionally equivalent. But it is incomplete. For example, it references #modal-results, but there is HTML element with the ID modal-results.

babar ch

Re: Re: Using magnific popup type ajax in form Submit

6 years ago

The link to post I was referring is HERE.

I am trying to open an new full page (showresults.asp) in popup that shows the results of form fields posted by submitting the form. The code posted was just for reference and is for inline type. I wanted Ajax type. The basic Ajax type code is like that.

$(document).ready(function() {
    $('.ajax-popup').magnificPopup({
        type: 'ajax',
       items: {
                src: 'showresults.asp'
           },
    });
});


Babar

watusiware

Re: Using magnific popup type ajax in form Submit

6 years ago

The Magnific Popup Ajax type is not meant for forms submission. It is meant to retrieve a page from it's URL.

The code you posted above seems to be a partial solution to submitting a form and then using Magnific Popup to display the result using inline type. This is the way you should proceed if you want to submit a form and display the result in a Magnific Popup.

Provide a link to the post you copied to code from. Then tell us what you want to change or what doesn't work.

It is best if you make a jsFiddle with your code.

watusiware

Re: Using magnific popup type ajax in form Submit

6 years ago

Why would you even consider using code from a Stackoverflow question with zero accepted answers?

As I stated earlier, the Magnific Popup Ajax type CANNOT be used to submit a form. Only to make a GET request. (OK, technically, it COULD - IF you first create URL parameters from the form, and IF your server will accept a GET rather than a POST... In any case, in order to use the popup Ajax type, you will need to supply a complete, fully-formed URL in src, and there is no way to provide a body).

Is there some reason you insist on using Ajax type rather than inline type? Is this a class assignment? (If so, post the class assignment, verbatim.)

Forget the SO question with zero accepted answers. Start with the Magnific Popup documentation. Ask questions about what parts you don't understand.

Actually, start with getting the Ajax request to work as you want, and just put the result into a console.write() to verify what you are getting from your server.

You CANNOT put a "full page" into the popup. It will make invalid HTML, as you would now have multiple <head> and <body>. You will first need to extract the part of the page that you want to put into the popup. (Perhaps the entire content of <body>).

babar ch

Re: Using magnific popup type ajax in form Submit

6 years ago

Ok,
Lets try a difference approach. How to send the form fields in real time using jquery or ajax when we press a link. For example:

<form method="post" name="form1" id="form1">
            <input type="text" name="name" id="name">
            <input type="text" name="email" id="email">
           <input type="text" name="ID" id="ID">
<input type="checkbox" name="stole" id="stole" value="1">
</form>

<a class="ajax-popup" href="custom-popup?name='name'&email='email'&ID='ID'&stole='stole' >CLICK HERE </a>

$(document).ready(function() {
    $('.ajax-popup').magnificPopup({
        type: 'ajax',
        overflowY: 'scroll'

    });
});

watusiware

Re: Using magnific popup type ajax in form Submit

6 years ago

Can you tell me what was wrong with the original? Does it not work? Does it not do exactly as you want?

I suggest you start by learning how to use Ajax to submit a form with jQuery.

Something like:

$('#form1').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: 'ajax-popup',
data: $(this).serialize(),
type: 'POST'
})
.done(function(response) {
console.log(response);
})
.fail function(xhr, status, errorThrown) {
console.log('Error:', errorThrown, 'status', status);
console.dir(xhr);
});

Once you have that working, then you can concern yourself with putting the response in a popup.

I've had to make some guesses, as I've asked you questions that you haven't answered. I guess your server code wants a POST. If that doesn't work, try GET. I can't guess what your server sends back as a response, which is why I suggest you log it to the console.

When it works, post what you get back from the server.

Top Reply

Response title

Attachments

jQuery Forum

Using magnific popup type ajax in form Submit

Replies(8)

Re: Using magnific popup type ajax in form Submit

Re: Using magnific popup type ajax in form Submit

Re: Using magnific popup type ajax in form Submit

Re: Re: Using magnific popup type ajax in form Submit

Re: Using magnific popup type ajax in form Submit

Re: Using magnific popup type ajax in form Submit

Re: Using magnific popup type ajax in form Submit

Re: Using magnific popup type ajax in form Submit

Statistics

Tags

Actions

Related Posts