Na submit een pop up openen met de gegevens van het form
Is het mogelijk dat als ik op de submit knop druk dat er een
pop up wordt geopend. Zodat ik zegmaar een soort confermatie heb.
Voorbeeld.
<form method="post" action="">
naam: <input type="text" name="naam" />
punten: <input type="select" name="price" />
<option name="punten" value="10">10 punten</option>
</select>
<input type="submit" name="verstuur" value="versturen" />
</form>
En dan met de pop up
Hallo naam
Weet u zeker dat u 10 punten wil versturen.
Ik heb nu wel een pop up gemaakt maar de form velden wil die niet echoën.
Alvast bedankt,
Thomas de Vries.
Want er is een kans dat mensen een popupblocker aan hebben staan.
En als je mensen toch wilt verplichten om de bevestigen dat ze iets willen versturen kun je beter een alert gebruiken.
Maar nog niet wat ik zoek
Ik zal het wat beter uitleggen.
bezoekers vullen het form in.
Dan klikken ze op submit.
Dan moet er een pop up komen, dit kan eventueel ook met JS.
en in dat pop up moet dus alle gegevens komen te staan.
en als ze dan ook op ok klikken dan wordt het formulier pas helemaal gestuurd.
heb al wat gedaan met JS maar dan refresht ie de pagina als ik op submit klik en krijg ik geen pop-up. wel als ik een hyperlink maak.
het gaat hier om een JS popup wat ik ook wil ivm pop-up blockers.
a) Waarom moeten mensen die het formulier versturen eerst iets bevestigen?
b) Waarom een alert en niet een aparte pagina?
anders wil het niet.
Toevoeging op 05/05/2011 10:40:31:
(b) ik wil geen alert vindt dat niet mooi.
Moet een pagina zijn die met een div-pop-up wordt geopend.
dat zou het mooiste zijn.
Mensen kopen iets... verzenden het formulier... en vervolgens ga jij nog een keer vragen of het wel allemaal klopt wat ze hebben ingevuld?
Wat betreft b. Ik heb het ook niet over een alert... Mijn vraag is waarom je niet een volgende pagina toont, in plaats van een alert / pop-up.
Ik ben dus bezig met een betaal systeem. van one-bip.
dit zijn de velden die dus allemaal verplicht zijn.
dit is het koop form
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
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
<form method="post" action="https://www.onebip.com/otms/"><!--- Hier wordt het form naar toe gestuurd met alle verborgen velden-->
<table width="100%">
<tr>
<td><input type="text" name="item_name" value="raventh" /></td>
<td><select name='price'>
<?php
//Donatie punten uit de tabel onebip halen//
//Let wel op wel een eigen query gebruiken dit ivm ik gebruik geen mssql maar mysql. het principe blijft hetzelfde.//
$sql = "SELECT * FROM onebip";
if(!$result = $mysqli->query($sql))
{
echo 'fout'; //Fout afhandeling
}
else
{
//doorgaan als er geen fout is
while ($row = $result->fetch_assoc())
{
echo '
<option value="'.$row['price'].'">"'.$row['tekst'].'"</option>';
}
}
?>
</select>
</td>
<td><input type='image' name='submit' src='http://www.onebip.com/tools/bts/btn06.gif' alt='Pay with Onebip' border='0' onclick="popup('popUpDiv')"/></td>
</tr>
</table>
<input type="hidden" name="description" value="Mystical points" />
<input type="hidden" name="username" value="[email protected]" />
<input type="hidden" name="currency" value="USD" />
<input type="hidden" name="command" value="express_pay" />
<input type="hidden" name="custom[naam]" value="raventh" />
<input type="hidden" name="return_url" value="http://localhost/pay.php" />
<input type="hidden" name="notify_url" value="http://apolloteam.cjb.net/notify.php" />
</form>
<table width="100%">
<tr>
<td><input type="text" name="item_name" value="raventh" /></td>
<td><select name='price'>
<?php
//Donatie punten uit de tabel onebip halen//
//Let wel op wel een eigen query gebruiken dit ivm ik gebruik geen mssql maar mysql. het principe blijft hetzelfde.//
$sql = "SELECT * FROM onebip";
if(!$result = $mysqli->query($sql))
{
echo 'fout'; //Fout afhandeling
}
else
{
//doorgaan als er geen fout is
while ($row = $result->fetch_assoc())
{
echo '
<option value="'.$row['price'].'">"'.$row['tekst'].'"</option>';
}
}
?>
</select>
</td>
<td><input type='image' name='submit' src='http://www.onebip.com/tools/bts/btn06.gif' alt='Pay with Onebip' border='0' onclick="popup('popUpDiv')"/></td>
</tr>
</table>
<input type="hidden" name="description" value="Mystical points" />
<input type="hidden" name="username" value="[email protected]" />
<input type="hidden" name="currency" value="USD" />
<input type="hidden" name="command" value="express_pay" />
<input type="hidden" name="custom[naam]" value="raventh" />
<input type="hidden" name="return_url" value="http://localhost/pay.php" />
<input type="hidden" name="notify_url" value="http://apolloteam.cjb.net/notify.php" />
</form>
Zodra onebip dit formulier heeft wordt er vanuit hun website uit. een validatie code gestuurd met de nodige informatie naar mijn url die notify.php heet.
Maar ik krijg het niet voor elkaar om dus als bezoekers een price hebben genomen.
dat ook de punten die er bij zitten worden meegestuurd.
De punten moeten ook in een hidden veld worden meegestuurd.
Daarom wou ik ook dat ik het via een div pop-up wordt gecontroleerd zodat ik de punten mee kan sturen. Op deze manier wil het namelijk niet.
Gaat het erom dat onebip die punten nodig heeft? Of hoef jij alleen zelf het aantal punten te weten?
Dus het eerste formulier krijgt als action de nieuwe (controle)pagina mee. Het formulier op de controlepagina vul je vervolgens met de gegevens uit het eerste formulier en krijgt als action de url naar onebip.
Gewijzigd op 05/05/2011 11:16:16 door Joren de Wit
wilde het mooier maken doormiddel van een div pop-up
Dus je kan beter voor een nieuwe pagina gaan als voor een div pop-up
<form action="doel.php" method="post" target="mijn_popup" onsubmit="window.open('about:blank','mijn_popup','width=200,height=300')">
<input name="tekstveld" type="text" />
<input name="submit" type="submit" value="Verstuur!" />
</form>
Verdere uitleg staat op deze site
Bas Matthee op 16/06/2011 12:32:09:
Ik doe het zelf altijd op deze manier:
<form action="doel.php" method="post" target="mijn_popup" onsubmit="window.open('about:blank','mijn_popup','width=200,height=300')">
<input name="tekstveld" type="text" />
<input name="submit" type="submit" value="Verstuur!" />
</form>
Verdere uitleg staat op deze site
<form action="doel.php" method="post" target="mijn_popup" onsubmit="window.open('about:blank','mijn_popup','width=200,height=300')">
<input name="tekstveld" type="text" />
<input name="submit" type="submit" value="Verstuur!" />
</form>
Verdere uitleg staat op deze site
En toen werden popups afgeschoten door je browser en gebeurde er niks....
Hier is hoe je het kan maken. Maak met HTML/CSS een div die over de pagina gezet kan worden. Iets als dit:
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<!-- Helemaal bovenaan in de body van je HTML zetten
<div id="overlay"></div>
<div id="confirmation">
<h2>Wilt u het formulier met deze gegevens versturen?</h2>
<!-- Hier moet je met javascript de gegevens inzetten als de submit knop ingedrukt wordt. -->
<p id="description"></p>
<p id="concurrency"></p>
<!-- enz... -->
<input type="submit" value="Ja, versturen" />
<input type="button" id="cancel" value="Nee, cancel" />
</div>
<div id="overlay"></div>
<div id="confirmation">
<h2>Wilt u het formulier met deze gegevens versturen?</h2>
<!-- Hier moet je met javascript de gegevens inzetten als de submit knop ingedrukt wordt. -->
<p id="description"></p>
<p id="concurrency"></p>
<!-- enz... -->
<input type="submit" value="Ja, versturen" />
<input type="button" id="cancel" value="Nee, cancel" />
</div>
CSS
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .88;
filter: alpha(opacity=88);
-moz-opacity: 0.88;
display: none;
}
#confirmation {
background: #fff;
position: fixed;
width: 400px;
left: 50%;
margin-left: -200px; /* Dit moet min de helft van de breedte van de div zijn (om de div te centreren). */
top: 100px;
display: none;
}
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .88;
filter: alpha(opacity=88);
-moz-opacity: 0.88;
display: none;
}
#confirmation {
background: #fff;
position: fixed;
width: 400px;
left: 50%;
margin-left: -200px; /* Dit moet min de helft van de breedte van de div zijn (om de div te centreren). */
top: 100px;
display: none;
}
Vervolgens moet je met javascript zorgen dat op het moment dat je op de submit klikt deze divs getoond worden en dat je niet doorgestuurd wordt. Dat kan makkelijk met jQuery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$("#idvansubmit").submit(function() {
//Laat de overlay zien met een mooi effect.
$('#overlay, #confirmation').fadeIn(100);
//Nu alle gegevens in de overlay zetten.
$("#description").html($("input[name=description]").val());
//Enz... voor alle velden.
//Voorkom standaard gedrag (doorsturen).
return false;
});
//Laat de overlay zien met een mooi effect.
$('#overlay, #confirmation').fadeIn(100);
//Nu alle gegevens in de overlay zetten.
$("#description").html($("input[name=description]").val());
//Enz... voor alle velden.
//Voorkom standaard gedrag (doorsturen).
return false;
});
Je moet dus een submitknop hebben op het formulier en die een id geven en die overeen laten komen met #idvansubmit in de javascript. In de overlay staat ook een submitknop. Als iemand daar op drukt gaat bovenstaande event dus niet af (want die is alleen voor de submitknop met id "idvansubmit" (of hoe je het ook noemt). Je moet de overlay dus wel in het formulier zetten!
Vervolgens heb je alleen nog code nodig voor het geval dat iemand op de cancel knop klikt:
Code (php)
1
2
3
2
3
$("#cancel").click(function() {
$("#overlay, #confirmation").fadeOut(100);
});
$("#overlay, #confirmation").fadeOut(100);
});
Klaar is Thomas!