Lightbox
Ik wil mijn eigen lightbox maken waarin ik gewoon foto's kan vergroten of formulieren in kan openen. Bij dat 2de loop ik een beetje vast. Ik wil namelijk dat een formulier verstuurd word zonder dat de pagina opnieuw verstuurd word. Ik wil liever geen iframe gebruiken omdat je daarmee problemen krijgt om de lightbox af te sluiten. Heeft iemand misschien een idee hoe en wat? Ik heb al eens eerder geprobeerd dit te maken, toen succesvol omdat er maar weinig input velden waren en die afzonderlijk met Ajax verstuurde maar dit is iets anders heb ik het idee.
Code (php)
1
var form_naam = $(this).parents('form').attr("name");
Gewijzigd op 16/02/2013 12:59:31 door php knipper
Kan ik met jQuery een ajax call maken die een formulier (ingevuld) verstuurd naar de server zonder dat de pagina herlaad. Ik weet dat het met een iframe kan maar vanuit een iframe zelf kun je de lightbox dan niet meer uitzetten.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="lightbox-content">
<form>
Naam:<br>
<input type="text" name="naam"><br>
Adres:<br>
<input type="text" name="adres"><br>
Woonplaats:<br>
<input type="text" name="woonplaats"><br>
<button value="Versturen">
</form>
</div>
<form>
Naam:<br>
<input type="text" name="naam"><br>
Adres:<br>
<input type="text" name="adres"><br>
Woonplaats:<br>
<input type="text" name="woonplaats"><br>
<button value="Versturen">
</form>
</div>
Hoe kan ik zo'n formulier versturen met een Ajax call?
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$('.lightbox-content').children('form').children('button').click(function(){
// ajax call hier?
});
});
$('.lightbox-content').children('form').children('button').click(function(){
// ajax call hier?
});
});
ajaxform.html
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
39
40
41
42
43
44
45
46
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
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
/* submit function van ons formulier */
$("#myform").submit(function(event) {
/* Voorkom de normale submit */
event.preventDefault();
/* enkele waarden uitlezen */
var form = $( this ),
naam = form.find( 'input[name="naam"]' ).val(),
adres = form.find( 'input[name="adres"]' ).val(),
woonplaats = form.find( 'input[name="woonplaats"]' ).val(),
url = form.attr( 'action' );
/* Verzend de data met jquery's post() */
var posting = $.post( url, { naam: naam, adres: adres, woonplaats: woonplaats } );
/* Stop het antwoord in een div */
posting.done(function( data ) {
$( "#result" ).text( data );
});
});
});
</script>
</head>
<body>
<form action="process.php" id="myform">
Naam:<br>
<input type="text" name="naam"><br>
Adres:<br>
<input type="text" name="adres"><br>
Woonplaats:<br>
<input type="text" name="woonplaats"><br>
<input type="submit" value="Versturen" />
</form>
<!-- In deze div komt het resultaat van process.php -->
<div id="result"></div>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
/* submit function van ons formulier */
$("#myform").submit(function(event) {
/* Voorkom de normale submit */
event.preventDefault();
/* enkele waarden uitlezen */
var form = $( this ),
naam = form.find( 'input[name="naam"]' ).val(),
adres = form.find( 'input[name="adres"]' ).val(),
woonplaats = form.find( 'input[name="woonplaats"]' ).val(),
url = form.attr( 'action' );
/* Verzend de data met jquery's post() */
var posting = $.post( url, { naam: naam, adres: adres, woonplaats: woonplaats } );
/* Stop het antwoord in een div */
posting.done(function( data ) {
$( "#result" ).text( data );
});
});
});
</script>
</head>
<body>
<form action="process.php" id="myform">
Naam:<br>
<input type="text" name="naam"><br>
Adres:<br>
<input type="text" name="adres"><br>
Woonplaats:<br>
<input type="text" name="woonplaats"><br>
<input type="submit" value="Versturen" />
</form>
<!-- In deze div komt het resultaat van process.php -->
<div id="result"></div>
</body>
</html>
process.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['naam']) && isset($_POST['adres']) && isset($_POST['woonplaats'])) {
echo strtoupper($_POST['naam']).' ';
echo strtoupper($_POST['adres']).' ';
echo strtoupper($_POST['woonplaats']);
exit;
}
}
echo 'Foutje';
?>
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['naam']) && isset($_POST['adres']) && isset($_POST['woonplaats'])) {
echo strtoupper($_POST['naam']).' ';
echo strtoupper($_POST['adres']).' ';
echo strtoupper($_POST['woonplaats']);
exit;
}
}
echo 'Foutje';
?>
Toevoeging op 16/02/2013 17:20:57:
of met een JSON antwoord:
formajax.html:
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
39
40
41
42
43
44
45
46
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
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
/* submit function van ons formulier */
$("#myform").submit(function(event) {
/* Voorkom de normale submit */
event.preventDefault();
/* enkele waarden uitlezen */
var form = $( this ),
naam = form.find( 'input[name="naam"]' ).val(),
adres = form.find( 'input[name="adres"]' ).val(),
woonplaats = form.find( 'input[name="woonplaats"]' ).val(),
url = form.attr( 'action' );
/* Verzend de data met jquery's post() */
var posting = $.post( url, { naam: naam, adres: adres, woonplaats: woonplaats } );
/* Stop het antwoord in een div */
posting.done(function( data ) {
$( "#result" ).html( data['naam'] + '<br />' + data['adres'] + '<br />' + data['woonplaats'] );
});
});
});
</script>
</head>
<body>
<form action="process.php" id="myform">
Naam:<br>
<input type="text" name="naam"><br>
Adres:<br>
<input type="text" name="adres"><br>
Woonplaats:<br>
<input type="text" name="woonplaats"><br>
<input type="submit" value="Versturen" />
</form>
<!-- In deze div komt het resultaat van process.php -->
<div id="result"></div>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
/* submit function van ons formulier */
$("#myform").submit(function(event) {
/* Voorkom de normale submit */
event.preventDefault();
/* enkele waarden uitlezen */
var form = $( this ),
naam = form.find( 'input[name="naam"]' ).val(),
adres = form.find( 'input[name="adres"]' ).val(),
woonplaats = form.find( 'input[name="woonplaats"]' ).val(),
url = form.attr( 'action' );
/* Verzend de data met jquery's post() */
var posting = $.post( url, { naam: naam, adres: adres, woonplaats: woonplaats } );
/* Stop het antwoord in een div */
posting.done(function( data ) {
$( "#result" ).html( data['naam'] + '<br />' + data['adres'] + '<br />' + data['woonplaats'] );
});
});
});
</script>
</head>
<body>
<form action="process.php" id="myform">
Naam:<br>
<input type="text" name="naam"><br>
Adres:<br>
<input type="text" name="adres"><br>
Woonplaats:<br>
<input type="text" name="woonplaats"><br>
<input type="submit" value="Versturen" />
</form>
<!-- In deze div komt het resultaat van process.php -->
<div id="result"></div>
</body>
</html>
process.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
header('Content-Type: application/json');
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['naam']) && isset($_POST['adres']) && isset($_POST['woonplaats'])) {
$arr = array();
$arr['naam'] = strtoupper($_POST['naam']);
$arr['adres'] = strtoupper($_POST['adres']);
$arr['woonplaats'] = strtoupper($_POST['woonplaats']);
echo json_encode($arr);
exit;
}
}
echo 'Foutje';
?>
header('Content-Type: application/json');
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['naam']) && isset($_POST['adres']) && isset($_POST['woonplaats'])) {
$arr = array();
$arr['naam'] = strtoupper($_POST['naam']);
$arr['adres'] = strtoupper($_POST['adres']);
$arr['woonplaats'] = strtoupper($_POST['woonplaats']);
echo json_encode($arr);
exit;
}
}
echo 'Foutje';
?>
Gewijzigd op 16/02/2013 17:22:37 door Frank Nietbelangrijk
uiteraard let op dat je aan het form de juiste id geeft.
test desnoods even met alert('test'); welke code wel en niet uitgevoerd wordt
of laat me even meekijken
Gewijzigd op 16/02/2013 21:16:45 door Frank Nietbelangrijk
Toevoeging op 16/02/2013 22:08:23:
jeps zie pm