echter is de gehele website in een index gebouwd (HTML5)
Hiermee bedoel je een one-page-app?
Wat ik je kan zeggen dat je dit met Ajax moet oplossen wat heel goed kan met jQuery. Wil je meer hulp zal wat code wel handig zijn.
Kijk naar het voorbeeld bij de uitleg van de ajax functie van jqueryv;)
Stefan.J
Het gaat inderdaad om een one-page-app, echter is de website een 18+ content en deze kan ik dus niet plaatsen sorry.Is dit niet mogelijk met een klein stukje code dat PHP de rest uitvoert maar niet de hele pagina in een refresh gooit ?
Dat heeft niks met PHP te maken fils, luister naar wat BrokenTrack gezegd heeft. Het is puur ajax functies.
@Fils,
Speciaal voor jou een voorbeeld:
Online: http://jsfiddle.net/vDN2j/
JS/Jquery code:
$("#submit_form").click(function(event){
//validate process
var submitnaam = $("input#naam").val();
var submiturl = $("input#url").val();
var submitemail = $("input#email").val();
var submitonderwerp = $("input#onderwerp").val();
var submitcontent = $("textarea#content").val();
var valid = true;
//validate realistic length
if(submitnaam.length < 3)
{
$('div.naam_error').html('Name is too short.');
valid = false;
}
else
{
$('div.naam_error').html('<br>');
}
if(submiturl.length < 5)
{
$('div.url_error').html('URL is too short.');
valid = false;
}
else
{
$('div.url_error').html('<br>');
}
if(submitemail.length < 8)
{
$('div.email_error').html('Email is too short.');
valid = false;
}
else
{
$('div.email_error').html('<br>');
}
if(submitonderwerp.length < 3)
{
$('div.onderwerp_error').html('Subject is too short.');
valid = false;
}
else
{
$('div.onderwerp_error').html('<br>');
}
if(submitcontent.length < 3)
{
$('div.content_error').html('Content is too short.');
valid = false;
}
else
{
$('div.content_error').html('<br>');
}
if(valid)
{
//submit form
var datastring = 'name='+ submitnaam + '&url=' + submiturl + '&email=' + submitemail + '&onderwerp=' + submitonderwerp + '&content=' + submitcontent;
$.ajax({
type: "POST",
url: "submit.php",
data: datastring,
success: function() {
setTimeout(function(){$("div#succes").show();},1000);
$("form.formulier").hide("slow");
}
});
}
return false;
});
HTML Code:
<form class="formulier" method="post" action="#">
<input type="text" maxlength="20" name="naam" id="naam">
<label for="naam">Naam</label><br>
<div class="naam_error"><br></div><br>
<input type="url" maxlength="50" name="url" id="url">
<label for="url">URL</label><br>
<div class="url_error"><br></div><br>
<input type="email" maxlength="50" name="email" id="email">
<label for="email">Email</label><br>
<div class="email_error"><br></div><br>
<input type="text" maxlength="50" name="onderwerp" id="onderwerp">
<label for="onderwerp">Onderwerp</label><br>
<div class="onderwerp_error"><br></div><br>
<textarea name="content" id="content" rows="18" cols="50">
Geachte Meneer/mevrouw,
Dit is een test
Ik hoop snel van jullie terug te horen!
Met vriendelijke groeten,
test
</textarea><br>
<div class="content_error"><br></div><br>
<input type="submit" value="verzenden" id="submit_form">
</form>
Alsjeblieft 
Hij wordt gestuurd naar submit.php zoals je in de javascript ziet.
Wat jij zoekt is een combinatie van Jquery, Ajax en PHP.
Met jquery vang je de submit op. Dus dat zou bijvoorbeeld
$("body").on("submit", "#idattribuutvanformelement", function() {
}Om de refresh te cancelen die hij normaal doet. Plaats je return false in de submit.
$("body").on("submit", "#idattribuutvanformelement", function() {
return false;
}Dan daarin bouw je een ajax request. In combinatie zal dat iets zijn als:
$("body").on("submit", "#idattribuutvanformelement", function() {
$elements = $(this).serialize(); //Input velden enzovoort omzetten naar een string
$.ajax({type: 'POST',url: 'mijnvalidatie.php',
data: $elements,dataType: 'json',success: function(xhr) {//doe hier wat je wilt doen}});
return false;
}Zo heb ik je een beetje op weg geholpen. De rest moet je natuurlijk zien te regelen 
Offtopic
Bij het aanpassen van een bericht worden de enters ook uit de code gescoopt.
Deze gebruik ik altijd (die van Jopitan kan ook maar is meer schrijfwerk en geloof ik meer gericht op oudere jQuery versies):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
$.ajax({
url: 'http://website.nl/script.php',
type: "POST",
data: "titel="+$("#titel").val()+"&naam="+$("#naam").val(),
success: function(data){
alert("Uitgevoerd");
}
});
});
});
</script>
<b>Titel:</b><br />
<input type="text" id="titel" name="titel" /><br />
<b>Naam:</b><br />
<input type="text" id="naam" name="naam" /><br />
<br />
<input type="submit" name="submit" id="submit" value="Versturen" />Meer informatie:
http://api.jquery.com/jQuery.ajax/
Veel succes nog en als je een vraag hebt dan kan je die altijd aan me stellen :). Ik heb inmiddels 2 jaar jQuery ervaring en ik denk dat ik wel boven gemiddeld zit hier ;).
Mijn code is juist efficiënter in vergelijken met jouw code L. Groot en het is juist de nieuwste methode ('on' is een vervanging van 'live').
Wat jij hier doet:
data: "titel="+$("#titel").val()+"&naam="+$("#naam").val(),gebeurt bij mij hier:
$elements = $(this).serialize();Wat bij jou zou moeten gebeuren, als je een veld toevoegt aan een form, is elke keer je javascript code aanpassen. Wat bij mijn code niet hoeft.
$(this).serialize() zorgt automatisch voor het maken van een string van alle elements.
Bijvoorbeeld jij hebt het volgende formulier:
<form>
Voornaam <input name="voornaam" />
Achternaam <input name="achternaam" />
</form>Dan zou jouw code er zo uit moeten zien:
data: "voornaam=" + $("input[name=voornaam]").val() + "&achternaam=" + $("input[name=achternaam]").val(),Terwijl bij mij zou het altijd het volgende zijn:
$elements = $(this).serialize(); (buiten ajax)
data: $elements, (in de ajax call)Als jij nu een extra element zou toevoegen aan het formulier met de naam email is jouw code als volgt:
data: "voornaam=" + $("input[name=voornaam]").val() + "&achternaam=" + $("input[name=achternaam]").val() + '&email=' + $("input[name=email]").val() ,Terwijl bij mij zou het altijd het volgende zijn:
$elements = $(this).serialize(); (buiten ajax)
data: $elements, (in de ajax call)Mijn code blijft daarnaast ook nog werken als je bijvoorbeeld een formulier via een ajax request ophaalt. En mijn code kan efficient worden gebruikt voor meerdere formulieren op dezelfde pagina, zonder extra javascript toe te voegen
Ik zal hier straks even een voorbeeld onder plakken. Moet even de hond uitlaten.
<script type="text/javascript">
$(function() {
$("body").on("submit", ".ajaxForm", function() {
$this = $(this);
$elements = "formaction=" + $this.attr('rel') + "&" + $this.serialize();
$.ajax({
type: $this.attr('method'),
url: '/myAjaxCall.php',
data: $elements,
dataType: 'json',
success: function(xhr) {
}
});
return false;
});
});
</script>
<form method="POST" rel="saveCustomer" class="ajaxForm">
<p>
<label>Voornaam:</label><br />
<input type="text" name="voornaam" value="" />
</p>
<p>
<label>Achternaam:</label><br />
<input type="text" name="achternaam" value="" />
</p>
<p>
<input type="submit" name="submit" value="Opslaan" />
</p>
</form>
<form method="POST" rel="createUser" class="ajaxForm">
<p>
<label>Voornaam:</label><br />
<input type="text" name="voornaam" value="" />
</p>
<p>
<label>Achternaam:</label><br />
<input type="text" name="achternaam" value="" />
</p>
<p>
<label>Email:</label><br />
<input type="text" name="email" value="" />
</p>
<p>
<label>Geslacht:</label><br />
<select name="geslacht">
<option value="0">Van alles een beetje</option>
<option value="1">Man</option>
<option value="2">Vrouw</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="Opslaan" />
</p>
</form>Voor alles kan hetzelfde stukje javascript worden gebruikt.
Nog geen account? Registreer je nu en word deel van onze community!