Form in modal window/div
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>
$(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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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>';
}
?>
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>';
}
?>
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.
Toevoeging op 25/05/2016 13:44:20:
Het is mij al gelukt, weet niet waarom maar het werkt nu wel.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>
$(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>
Code (php)
1
2
3
4
5
2
3
4
5
<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>
<div class="mhead">H</div>
<div class="mcont"></div>
<div class="mfoot"><a class="sluiten" href="">X Sluiten</a></div>
</div></div>
Gewijzigd op 25/05/2016 13:47:41 door Ferdi R