Ik ben nieuw met jquery en ajax, maar wat ik probeer te doen is mijn php script los te laten draaien zonder de pagina te refreshen.
Hier zie je een simpel voorbeeld hoe ik het nu heb :


<?php
if(isset($_POST['toevoegen'])) {
	if (isset($_POST['naam'],$_POST['leeftijd'])) {
		// </>
		// Voeg toe aan database
		// </>
		$msg = 'Succesvol toegevoegd!';
	} else {
		$msg = 'Vul alle verplichte velden in!';
	}
}

if(isset($_POST['verwijderen'])) {
	if (isset($_POST['naam'],$_POST['leeftijd'])) {
		// </>
		// Verwijder uit database
		// </>
		$msg = 'Succesvol verwijderd!';
	} else {
		$msg = 'Vul alle verplichte velden in!';
	}
}

if(isset($msg)) { 
	echo $msg;
} 
?>

<form action="" method="post">
	<label>Naam</label>
	<input type="text" name="naam"/>

	<label>Leeftijd</label>
	<input type="number" name="leeftijd"/>

	<button type="submit" name="toevoegen">Toevoegen</button>
	<button type="submit" name="verwijderen">Verwijderen</button>
</form>


Is het mogelijk op dit te draaien op submit zonder te refreshen ?


$(function() {
	$(".toevoegen").click(function() {
		$.ajax({ url: "action.php" }  
		});
	});
$(function() {
	$(".verwijderen").click(function() {
		$.ajax({ url: "action.php" }  
		});
	});
Ronald brt op 02/12/2014 10:41:47

Volgens mij bedoelt ze als ze op verwijderen/bewerken klikt dat het niet de juiste if functie triggered ?
Als dit het geval dan doe ik altijd print_r($_POST) dan weet ik wat er precies naar de action.php wordt gestuurd.
Aan de hand daarvan pas ik mijn if statement aan.

De IF functie werkt wel ik heb de code paar x doorgelezen, de vraag is hoe ze het laat uitvoeren zonder dat de pagina moet herladen
- Aar - op 02/12/2014 10:30:16

[quote="Redcoffe redcoffe op 02/12/2014 10:27:42"]
In m'n array heb ikzelf ook nog een message zitten

Leg eens uit?
[/quote]

Mijn json arrays die ik terug stuur zijn altijd als volgt:
'result' => 'true',
'msg' => 'De knop is succesvol toegevoegd/aangepast/verwijderd'

Of

'result' => 'false',
'msg' => 'Kon de knop niet vinden!'

'result' => 'false',
'msg' => 'Er is een SQL fout opegetreden: ' . $this->sth->errorInfo();

Zo heb ik dus na de hand een foutcontrole in mijn eigen scripts met een success/warning/alert popup met de bijgaande message


[/quote]
De IF functie werkt wel ik heb de code paar x doorgelezen, de vraag is hoe ze het laat uitvoeren zonder dat de pagina moet herladen

[/quote]
Ze kan eventueel een hidden field maken in haar form.

Aan de hand van wat geklikt wordt, ( #add of #delete ) deze field invullen.
En daarop de IF eroverheen gooien.
Die reactie van zojuist was op redcoffe, zie net was dat hij zinloos aan het 'papegaaien' is.

Maar het punt is dat Minouk niet moet triggeren op een form-ID, maar een id van een button.
Ik denk dat dit wel je antwoord is;

in je index.php

<script src="//code.jquery.com/jquery-1.10.2.js"></script>    
<script type="text/javascript">
$(function() {
	$("button").click(function(e){
		var clickName = e.target.name;
		var send = $('#userData');
		send.on('submit', function(e){
			e.preventDefault();
			$.ajax({
				url: 'action.php',
				type: "POST",
				data: send.serialize() + "&" + clickName + "=",
				success: function(data) { 
					console.log(data)
					resp = $('#response');
					resp.html(data);
				}
			});
		});
	});
});
</script>

in je action.php ook nog op empty checken

<?php
print_r($_POST);
if(isset($_POST['add'])) {
    if (isset($_POST['team'],$_POST['punten']) && !empty($_POST['team']) && !empty($_POST['punten'])){
        // </>
        // Voeg punten toe aan database
        // </>
        $msg = 'Succesvol toegevoegd!';
    } else {
        $msg = 'Vul alle verplichte velden in!';
    }
}

if(isset($_POST['delete'])) {
    if (isset($_POST['team'],$_POST['punten']) && !empty($_POST['team']) && !empty($_POST['punten'])) {
        // </>
        // Verwijder punten uit database
        // </>
        $msg = 'Succesvol verwijderd!';
    } else {
        $msg = 'Vul alle verplichte velden in!';
    }
}

if(isset($msg)) { 
    echo $msg;
} else {
    echo 'Geen informatie...';
}
?>


Misschien kan het beter ben ook maar aan het leren :)
Leuk een vrouwelijke developster!

Ik heb voor een "leerling" van mij een stukje code geschreven die de URL uit de link haalt en zo een POST doet naar een script die iets verwijderd uit de database.
Misschien heb je er iets aan.


$(".verwijder").click(function() {
	
		event.preventDefault();
		
		// Get url from the actual link
		var url = $(this).attr('href');
		
		$.ajax({
			url: url,
			type: 'POST',
			success: function(data) {
			//called when successful
				return true;
			},
			error: function(e) {
			//called when there is an error
			return true;
			console.log('Fout bij verwijderen');
			}
		})
		});
Verander op regel 36 / 37
<input type="submit" name="add" id="add" value="Add"/>
<input type="submit" name="delete" id="delete" value="Delete"/>

in
<input type="button" name="toevoegen">Toevoegen</button>
<input type="button" name="verwijderen">Verwijderen</button>

Omdat je form tags hebt zal je submit namelijk altijd je formulier versturen. Dit kun je oplossen door :
<input type="submit" name="add" id="add" value="Add" onclick="return false;"/>
<input type="button" name="add" id="add" value="Add"/>

De eerste oplossing zorgt er voor dat je pagina direct na het versturen weer stopt. De tweede zorgd er voor dat het helemaal niet word verstuurd, maar dat alleen de javascript onclick word uitgevoerd
** Ik ben zelf van mening dat als er iets verwijderd ofzo moet worden dat er geen formulieren gebruikt moeten worden maar gewoon <a href="">.
Je kan daarna met JavaScript of Jquery afhandelen welke actie eraan gekoppeld wordt.
Super om te zien hoeveel mensen mij proberen te helpen!
Ik heb Ronalds voorbeeld geprobeerd maar wilt helaas niet werken.

Als ik de print_r($_POST); functie gebruik krijg ik inderdaad de waarden te zien :
"Array ( [team] => team [points] => 13 )"

Maar alsnog kan ik de waarden van de button/submit niet onderscheiden.
Ook de post query in de url te zien ( Dit wil ik graag voorkomen ).

Wat Rickert beschrijft begrijp ik volkomen en zal ook misschien beter zijn voor dit soort simpele functies.
Ook dat wil ik graag vermijden omdat ik queries en url data graag wil verbergen.

Mijn einddoel is uiteindelijk om de action.php al het "check" werk te laten doen met if's en else :d

Jacco's suggestie werkt helaas niet voor mij, misschien omdat ik ook geen idee heb hoe ik dat alsnog kan doorgeven naar de action.php

Het is vervelend omdat ik zo dichtbij ben maar alsnog de "add" en "delete" niet kan vinden/onderscheiden in de action.php

Toch bedankt allemaal voor de suggesties en aandacht, phphulp is awesome!

Misschien omdat mijn submit types verkeerd zijn, hoe had jij die staan ?

<input type="submit" name="toevoegen" value="toevoegen"/>
<input type="submit" name="verwijderen" value="verwijderen"/>

Reageren