Form Submit met Function

Door D B op 06-11-2014 18:31

1.892 views

Hallo,

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.:


function GegevensFormulier() {
	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:


<form name="GegevensFormulier" method="POST" onsubmit="GegevensFormulier();">
<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!

Frank Nietbelangrijk

06-11-2014 20:09


<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

Eddy E

06-11-2014 20:38

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.

Frank Nietbelangrijk

06-11-2014 20:42

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.

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.

Eddy E

06-11-2014 21:56

Er zijn ook nog dingen als 'cURL()' ;)
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.

D B

06-11-2014 22:06

Frank, als ik er onclick van maak werkt het met een enter niet of wel?

Ik had namelijk geleden dat je altijd on submit moet gebruiken.

Joakim Broden

06-11-2014 22:16 gewijzigd op 06-11-2014 22:21

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?


$('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;
});

Zoiets? Heb het niet getest, en volgens mij klopt


$('#GegevensFormulier').serialize() + "&controle=" + "1"

sowieso niet?

D B

06-11-2014 22:53

Ik ga dit morgen even testen.

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?

Joakim Broden

06-11-2014 23:12 gewijzigd op 06-11-2014 23:12

Jawel, gewoon tussen script tags (wel via jquery ready).


$('#GegevensFormulier').serialize() + "&controle=" + "1",

controle = string
1 = string

Kan het dan niet beter gewoon zo


$('#GegevensFormulier').serialize() + "&controle=1",

D B

06-11-2014 23:25

Dat had waarschijnlijk ook gekunt inderdaad.

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?

D B

09-11-2014 17:52

Ik gebruik nu het volgende:


$('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;
});

Maar dit lijkt niks te doen. Ik heb dit in mijn head staan. Moet ik nu nog iets toevoegen van jquery ready?

Reageren

Inloggen om te reageren