Plaatje gebruiken als submit button, maar anders.

Om te beginnen, maak ik eerst een voorbeeldje.

Stel: Je hebt een mail systeem gemaakt, je toont 10 mails die je kan selecteren met een checkbox. '
De geselecteerde berichten kan je dan verwijderen en verplaatsen, je gebruikt hier knoppen voor.

<?php
//$_GET['email'] = '[email protected]';

include("config.php"); //Hier staan alle database verbindingen in
if($_SERVER['REQUEST_METHOD'] == "POST") //als je op "submit" drukt geeft $_SERVER['REQUEST_METHOD']
										 //de waarde "POST" dus we kijken waneer iemand op submit heeft
										 //gedurkt
{
	if(isset($_POST['del'])) //als hij op de submit button "del" heeft gedrukt, stuurt de browser
							//alleen $_POST['del'] terug, we kijken dus als die bestaat
	{
		echo 'Verwijderd';
	}
	if(isset($_POST['ver'])) //hetzelfde als bij $_POST['del']
	{
		echo 'Verplaats';
	}
}
$sql = "SELECT  `van` ,  `onderwerp`,`verzend_tijd`  FROM mail WHERE email='".addslashes($_GET['email'])."';"; //dit is een sql opdracht voor de mails op te halen
																											
/*
Van = Het email adres waarvan het gestuurt is
Onderwerp = Het onderwerp van het bericht
Verzend_tijd = De tijd waarop de mail ontvangen is
*/																												
																										
$query = mysql_query($sql);
echo '<form method="POST"><table>';
$i = 0;
while($row = mysql_fetch_array($query))
{
	
	echo '<Tr>
		<td><input type="checkbox" name="box[]" value="'.$i.'"></td>
		<td>'.$row['onderwerp'].'</td>
		<td>'.$row['van'].'</td>
		<td>'.$row['verzend_tijd'].'</td>
	</Tr>';
	$i++;
	//als je op "Submit" hebt gedrukt wordt box[] een array met het id ($i) van welke checkboxen zijn geslecteerd
}
echo '</table>
<input type="submit" name="del" value="Verwijder">
<input type="submit" name="ver" value="Stuur naar een andere map">
</form>';
//Hier zie je dat er 2 submit knoppen zijn gemaakt, alleen de name en value is anders

?>

voorbeeld: http://theunissenvastgoed.nl/phphulp/form/stap1.php

Alleen die knoppen zien er lelijk uit, ik ga je uitleggen hoe je die grijzen knoppen leuk kan maken (of gewoon met tekst)

Je kan een submit knop veranderen in een plaatje via deze code:
<input type=image src="del.jpg" name="del">
alleen, de naam wordt niet meer meegestuurd als je op het plaatje klikt, en dat wil je juist!!

Ik leg je uit hoe je dat oplost in de volgende pagina

Javascript kent een functie waarmee hij een formulier kan later versturen, dit is:

document.myform.submit();

Maar hoe laat je deze code werken?
eerst zetten we de naam van onze form naar myform:

<form method="POST" name="myform">

daarna maken we een function in javascript:

<script type="text/javascript">
function submit()
{
}
</script>

<script type="text/javascript"> -> Hiermee maken we de browser duidelijk dat we een javscript uit gaan voeren

function submit() -> Dit maakt de functie submit, die we later kunnen oproepen

{ ->Openen we de functie, hierin gaan we alle code schrijven die worden opgeroepen als je de functie gebruikt
} -> Sluiten
</script> -> Laat de browser weten dat we geen javascript code meer uitvoeren

In die functie zetten we de "submit" optie:

<script type="text/javascript">
function submit()
{
     document.myform.submit();
}
</script>

Dan moeten we deze functie ergens aanroepen, dit kan via onClick:

<a onclick="submit">Verstuur het formulier</a>

Via onclick roepen we de functie submit() aan, deze zorgt er dan voor dat het formulier "myform" wordt verstuurt

De totale code:

<script type="text/javascript">
function submit()
{
     document.myform.submit();
}
</script>

<a onclick="submit">Verstuur het formulier</a>
<form method="post" name="myform">
...hier alle form code
</form>

Maar, dat is niet wat we willen bereiken, we willen de naam doorsturen

Dit wordt de uiteindelijke code:

<script type="text/javascript">
function submit(wat)
{
     document.getElementById("stuur").value = wat;
     document.myform.submit();
}
</script>

<a onclick="submit('verstuur')">Verstuur het formulier</a>
<form method="post" name="myform">
<input type="hidden" name="action" id="stuur" value="Niks verstuurt">
...hier alle form code
</form>

Je hebt een functie genaamd submit(), tussen de haakjes zet je "wat" (zonder ") neer, als nu deze functie wordt aangeroepen, kan je via "wat" informatie doorsturen.

In die functie moet je

document.getElementById("stuur").value = wat;

neerzetten, dit maakt zet in het id "stuur" de value (waarde) wat in "wat" staat

Maar we moeten wel een id "stuur" maken, dat doen we in het form. Het is een hidden field waarin de "actie" wordt opgeslagen

<input type="hidden" name="action" id="stuur" value="Niks verstuurt">

Nu moeten we het formulier versturen, dat doe je zo:

<a onclick="submit('verstuur')">Verstuur het formulier</a>

via submit('wat') je kan "wat" veranderen

Wat gebuurt er nu?
1. De gebruiker drukt op "verstuur het formulier"
2. Daarna zet javascript de waarde van het input field met het id "stuur" naar wat "wat" heeft
3. Javascript verzend het formulier
4. PHP kan nu de $_POST['action'] uitlezen om te weten te komen waarop de gebruiker heeft geklikt

We hebben alleen maal tekst gebruikt, maar je wilt een plaatje hebben.

we maken inplaats van:

<a onclick="submit(\'del\')">Verwijder</a>

dit:

<a onclick="submit(\'del\')"><img src="plaat.png"></a>

<?php
//$_GET['email'] = '[email protected]';

include("config.php"); //Hier staan alle database verbindingen in
if($_SERVER['REQUEST_METHOD'] == "POST") //als je op "submit" drukt geeft $_SERVER['REQUEST_METHOD']
{										 //de waarde "POST" dus we kijken waneer iemand op submit heeft
										 //gedurkt
	if(isset($_POST['action']))
	{
		switch($_POST['action'])
		{
			case 'del':
			echo 'Verwijder';
			break;
			
			case 'ver':
			echo 'Verplaats naar een andere map';
			break;
		}
	}
}
$sql = "SELECT  `van` ,  `onderwerp`,`verzend_tijd`  FROM mail WHERE email='".addslashes($_GET['email'])."';"; //dit is een sql opdracht voor de mails op te halen
																											
/*
Van = Het email adres waarvan het gestuurt is
Onderwerp = Het onderwerp van het bericht
Verzend_tijd = De tijd waarop de mail ontvangen is
*/																												
																										
$query = mysql_query($sql);
echo '<script type="text/javascript">
function submit(wat)
{
	 document.getElementById("stuur").value = wat;
     document.myform.submit();
}
</script>';
echo '<form method="POST" name="myform"><input type="hidden" name="action" id="stuur" value="Niks verstuurt"><table>';
$i = 0;
while($row = mysql_fetch_array($query))
{
	
	echo '<Tr>
		<td><input type="checkbox" name="box[]" value="'.$i.'"></td>
		<td>'.$row['onderwerp'].'</td>
		<td>'.$row['van'].'</td>
		<td>'.$row['verzend_tijd'].'</td>
	</Tr>';
	$i++;
	//als je op "Submit" hebt gedrukt wordt box[] een array met het id ($i) van welke checkboxen zijn geslecteerd
}
echo '</table>
<a onclick="submit(\'del\')">Verwijder</a>
<a onclick="submit(\'ver\')">Stuur naar andere map</a>
</form>';
//Hier zie je dat er 2 submit knoppen zijn gemaakt, alleen de name en value is anders

?>

http://theunissenvastgoed.nl/phphulp/form/stap2.php

Hopelijk heb ik je geholpen met javascript, maar vergeet niet dat dit heel nuttig is voor PHP.

Via dit systeem kan je tekst/plaatjes gebruiken en dan nog steeds gebruik maken met dat "naam truckje"

Mijn eerste tutorial, 2x over moeten doen omdat internet eruit vloog.

Carlo