Form Submit met Function

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

1.891 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!

Joakim Broden

09-11-2014 17:54

1 ) Ja, jquery ready moet je doen, heb je al google gekeken?

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?

D B

09-11-2014 19:35

1) Ik heb inderdaad naar jquery ready gekeken, maar begrijp niet zo goed wat ik hier in moet toevoegen.
2) Ja die zijn geladen.

3)

<?
echo '<form name="GegevensFormulier" method="POST">';
//hiertussen gewoon wat input velden
echo '</form>';
?>

Joakim Broden

10-11-2014 09:45

http://api.jquery.com/ready/ eerst hit op Google, van uit daar word duidelijk dat je


$(document).ready(function() {
	// Hier de uitvoerende jquery code
});

moet gebruiken.

dus:


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

D B

10-11-2014 17:58

Ik gebruik nu bovenstaande code, maar helaas zonder resultaat.

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

Reageren

Inloggen om te reageren