Form Submit met Function
Ik heb het volgende:
In mijn index file roep ik een js file op in de head. In deze js file staan mijn functions.
1 hiervan regelt mijn gegevens formulier nl.:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function GegevensFormulier() {
e.preventDefault();
$.ajax({
type: "POST",
url: "gegevens.php",
data: $('#GegevensFormulier').serialize() + "&controle=" + "1",
success: function(data) {
document.getElementById('contentframe').innerHTML = data;
}
});
}
e.preventDefault();
$.ajax({
type: "POST",
url: "gegevens.php",
data: $('#GegevensFormulier').serialize() + "&controle=" + "1",
success: function(data) {
document.getElementById('contentframe').innerHTML = data;
}
});
}
Mijn formuliercode is als volgt:
Code (php)
1
2
3
4
2
3
4
<form name="GegevensFormulier" method="POST" onsubmit="GegevensFormulier();">
<input type="text" name="straat">
<input type="submit" name="submit" value="Doorgeven">
</form>
<input type="text" name="straat">
<input type="submit" name="submit" value="Doorgeven">
</form>
Als ik deze nu submit wil ik dat de pagina niet gerefreshd wordt, ook wil ik in mijn js (met serialize) alle variabelen ophalen.
Als ik dit op mijn pagina test, herlaad mijn pagina en zijn mijn variabelen niet (goed) gevuld.
Weet iemand wat ik fout doe?
Alvast bedankt!
Code (php)
1
<input type="submit" name="submit" value="Doorgeven">
1. maak van de type="submit" eerst type="button".
2. hang een onclick() event aan de button.
3. roep vanuit de event jouw functie GegevensFormulier() aan.
Toevoeging op 06/11/2014 20:27:45:
http://codepen.io/anon/pen/ncfDL
Dus: wel op 'submit' laten staan, maar laat Javascript er dan een button van maken!
En laat Javascript er een onclick() (of beter: onrelease() ) op zetten.
Eddy E op 06/11/2014 20:38:58:
Leuk is dat voor de mensen die Javascript uit hebben staan dan.
Dus: wel op 'submit' laten staan, maar laat Javascript er dan een button van maken!
En laat Javascript er een onclick() (of beter: onrelease() ) op zetten.
Dus: wel op 'submit' laten staan, maar laat Javascript er dan een button van maken!
En laat Javascript er een onclick() (of beter: onrelease() ) op zetten.
Mensen die javascript uit hebben staan? Welke website werkt nog fatsoenlijk zonder javascript?
Technisch wel mogelijk dat weet ik wel maar in de praktijk te verwaarlozen.
En dan is Javascript echt alleen maar lastig.
En Kindle's hebben toch ook geen Javascript?
Het is geen groot iets, maar ik heb altijd geleerd (en vind dat ook wel mooi) dat Javascript PROGRESSIVE ENHANCEMENT is.
Ik had namelijk geleden dat je altijd on submit moet gebruiken.
Eddy E op 06/11/2014 20:38:58:
Leuk is dat voor de mensen die Javascript uit hebben staan dan.
Dan moeten ze Javascript maar aan zetten, ik ga zomers toch ook niet in de auto klagen dat het warm is als ik mijn airco niet aan doe?
@TS, je gebruikt al jQuery, waarom dan niet alles in jQuery doen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
$('form[name="GegevensFormulier"]').on('submit', function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
url : 'gegevens.php',
data : $(this).serialize() + '&controle=' + 1,
success : function(data) {
$('#contentframe').html(data);
}
});
return false;
});
e.preventDefault();
$.ajax({
type : 'POST',
url : 'gegevens.php',
data : $(this).serialize() + '&controle=' + 1,
success : function(data) {
$('#contentframe').html(data);
}
});
return false;
});
Zoiets? Heb het niet getest, en volgens mij klopt
Code (php)
1
$('#GegevensFormulier').serialize() + "&controle=" + "1"
sowieso niet?
Gewijzigd op 06/11/2014 22:21:57 door Joakim Broden
Waarom zou de onderste regel eigenlijk niet kunnen?
Toevoeging op 06/11/2014 23:05:21:
Zoals jij hem nu hebt kan ik hem ook niet meer in mijn head zetten of wel?
Code (php)
1
$('#GegevensFormulier').serialize() + "&controle=" + "1",
controle = string
1 = string
Kan het dan niet beter gewoon zo
Code (php)
1
$('#GegevensFormulier').serialize() + "&controle=1",
Gewijzigd op 06/11/2014 23:12:31 door Joakim Broden
Alvast bedankt voor de hulp ik ga morgen alles even testen!
Toevoeging op 07/11/2014 06:52:13:
Ik heb dit nu toegevoegd, maar hij blijft nog refreshen.
Ik heb er als test een alert in gezet, maar ook deze doet hij niet...
Ik heb dit script nu in mijn head staan, weet niet wat je bedoelt met jquery ready.
Wat kan ik nog veranderen dat het wel werkt?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$('form[name="GegevensFormulier"]').on('submit', function(e) {
alert("OK");
e.preventDefault();
$.ajax({
type: 'POST',
url: 'gegevens.php',
data: $(this).serialize() + "&controle=1",
success: function(data) {
$('#contentframe').html(data);
}
});
return false;
});
alert("OK");
e.preventDefault();
$.ajax({
type: 'POST',
url: 'gegevens.php',
data: $(this).serialize() + "&controle=1",
success: function(data) {
$('#contentframe').html(data);
}
});
return false;
});
Maar dit lijkt niks te doen. Ik heb dit in mijn head staan. Moet ik nu nog iets toevoegen van jquery ready?
2 ) En heb je jQuery in geladen? Neem ik aan van wel aangezien je al jQuery Ajax gebruikte.
3 ) En hoe ziet je form er nu uit?
2) Ja die zijn geladen.
3)
Code (php)
1
2
3
2
3
$(document).ready(function() {
// Hier de uitvoerende jquery code
});
// Hier de uitvoerende jquery code
});
moet gebruiken.
dus:
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
$(document).ready(function() {
$('form[name="GegevensFormulier"]').on('submit', function(e) {
alert("OK");
e.preventDefault();
$.ajax({
type: 'POST',
url: 'gegevens.php',
data: $(this).serialize() + "&controle=1",
success: function(data) {
$('#contentframe').html(data);
}
});
return false;
});
});
$('form[name="GegevensFormulier"]').on('submit', function(e) {
alert("OK");
e.preventDefault();
$.ajax({
type: 'POST',
url: 'gegevens.php',
data: $(this).serialize() + "&controle=1",
success: function(data) {
$('#contentframe').html(data);
}
});
return false;
});
});
Ik heb deze code nu ook in mijn gegevens.php gezet tussen script tags, maar ook dan geen resultaat.
Helaas heb ik zelf te weinig kennis van javascript, dus hoop dat jullie hier (samen met mij) uit kunnen komen.
Alvast bedankt!
Toevoeging op 10/11/2014 18:52:55:
Ik heb de pagina trouwens even online gezet om te testen:
http://www.zscwesterhoven.nl/gegevens.php