Form in modal window/div

Door Ferdi R op 24-05-2016 12:45

1.597 views

Ik wil via een modal window of popup een form tonen en posten. Nu heb ik de modal met form ervoor maar als ik wil posten vliegt de modal window weg en gebeurt er niets, wat doe ik fout?

<script>
	$(document).ready(function () {
	    $(document).on('click', '#modalclick', function() {
			event.preventDefault();
			$('.overlay').show();

			$('.modal').load($(this).data('href'));
			
			//$.get($(this).data('href'), function(data) {
			    //$('.modal').html(data);
			//});
	    });
	    
	    $(document).on('click', '.ok', function () {
            $('.overlay').fadeOut(4000, function(){
                $('.overlay').hide();
            });
	    });
	    
        $('#modalform').submit(function(e){
                e.preventDefault();
                var form = $(this);
                var post_url = form.data('action');
                var post_data = form.serialize();
                $('.modal').html('<p>Even geduld AUB...</p>');
                $.ajax({
                    type: 'POST',
                    url: post_url, 
                    data: post_data,
                    success: function(data) {
                        $('.modal').fadeOut(2000, function(){
                            $('.modal').html(data).fadeIn(2000).delay(2000);
                        });
                    }
               });
         });
    });
    </script>

Dit is de pagina/form die op word gehaald


<?php
if(isset($_POST['ptitel']))
{
	echo 'post';
}
else 
{


		        
	 echo '<form id="modalform" data-action="monitor/p2000-dialog.php" action="" method="post">';
	 echo '<input type="text" name="ptitel" value="'.$rowm['titel'].'" />';
	echo '<button type="submit">Klik</button>';
	 echo '</form>';
		        
	 echo '<li><a class="ok" href="">X Sluiten</a></p></li>';

}

?>

F Ferdi R

25-05-2016 13:08 gewijzigd op 25-05-2016 13:47

Hoe zou ik dit anders kunnen aanpakken? ik heb het ook geprobeerd met een iframe te laden in de modal/popup, maar een iframe is natuurlijk een beetje oud.

Het probleem wat ik nu heb is dat als ik een formulier van een andere pagina in de modal laad dat ik dan op de submit button klik dat de modal verdwijnt en de pagina refreshed, ook als ik alleen op de sluit modal link klik refreshed de huidige pagina.

[size=xsmall]Toevoeging op 25/05/2016 13:44:20:[/size]

Het is mij al gelukt, weet niet waarom maar het werkt nu wel.


	<script>
	$(document).ready(function () {
	    $(document).on('click', '#modalclick', function(event) {
			event.preventDefault();
			$('.overlay').show();
			$('.mcont').load($(this).attr('href'));

	    });
	    
	    $(document).on('click', '.sluiten', function (event) {
	    	event.preventDefault();
            $('.overlay').fadeOut(1000, function(){
            	$('.mcont').html('');
                $('.overlay').hide();
            });
	    });
	    
	    // ook voor .linkform
	    
	    $(document).on('submit', '#modalform', function (event) {
                event.preventDefault();
                var form = $(this);
                var post_url = form.attr('action');
                var post_data = form.serialize();
                $('.mcont').html('<p>Even geduld AUB...</p>');
                $.ajax({
                    type: 'POST',
                    url: post_url, 
                    data: post_data,
                    success: function(data) {
                        $('.mcont').fadeOut(1000, function(){
                            $('.mcont').html(data).fadeIn(1000).delay(1000);
                        });
                    }
               });
         });
    });
    </script>


<div class="overlay"><div class="modal">
	<div class="mhead">H</div>
	<div class="mcont"></div>
	<div class="mfoot"><a class="sluiten" href="">X Sluiten</a></div>
</div></div>

Reageren

Inloggen om te reageren