[PHP+HTML] Klick on Button

Helios co. · 15. Juni 2008

Huhu,

ich schraube gerade an einem kleinen Programm und bin nun auf ein Problem gestoßen.

Das Programm soll folgendes Leisten:

Angezeigt werden 10 Buttons, welche in Rot dargestellt sind.
Der User soll einen oder mehrere dieser Buttons klicken können. Die Farbe der gedrückten Buttons soll sich dabei ändern (ich vermute, dass geht mit dem on click Befehl?).

Anschließend soll ein "weiter"-Button gedückt werden. Man kommt dann auf eine andere Seite, auf der der User seinen Namen eingeben soll.

Unter diesem Namen, sollen dann die entsprechenden Buttons (also die Werte der Buttons) in einer PostgreSQL Tabelle abgelegt werden.

Ich bin dankbar für jeden Rat!

Nikolas.W · 15. Juni 2008

die farbe der buttons und das sie geklickt wurden kannst du per Javascript erreichen, du änderst dann einfach style und value vom input-tag. die übergabe an die nächste seite realisierst du dann einfach per POST auf seite 1 und lässt sie auf seite 2 wieder auslesen per PHP und speicherst sie dann in ein inputfeld ab, du kannst es ja per type="hidden" verstecken.
sobald dann auf der seite 2 der Submit button gedrückt wurde verarbeitest du alles per PHP und lässt es schreiben.

falls du ein bsp. willst kann ich dir wohl eins zu morgen schreiben

claW. · 15. Juni 2008

Vesh schrieb:
die übergabe an die nächste seite realisierst du dann einfach per POST auf seite 1 und lässt sie auf seite 2 wieder auslesen per PHP und speicherst sie dann in ein inputfeld ab, du kannst es ja per type="hidden" verstecken.

das würde ich lieber per session lösen, da es ein wenig bandbreite spart und wohl auch schöner ist.

Nikolas.W · 15. Juni 2008

jop per session geht auch, hatte ich nicht dran gedacht.

wofür genau brauchst du sowas überhaupt, wenn ich fragen darf?

PW-toXic · 15. Juni 2008

ob man sowas mit sessions machen sollte.. hmm
sessions sollte man denke ich eher für so sachen wie einen warenkorb benutzen.

Warum gibst du nicht einfach bei der 1. seite schon ein eingabefeld für den namen ein und verarbeitest dann alles auf der 2. seite auf einmal?

PHP:

<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>
<div id="buttons">
	<button>button0</button>
	<button>button1</button>
	<button>button2</button>
	<button>button3</button>
</div>

<form id="inputs" enctype="multipart/form-data" action="/core/index/test2" method="post">	
	<input type="submit" value="abschicken" />
</form>

<script type="text/javascript">


//HOVER COLOR
var hoverColor = '#ffd0d0';


Function.prototype.bind = function(o) {
    var fn = this;
    var args = Array.prototype.slice.call(arguments, 1);

    return function() {
        fn.apply(o, Array.prototype.slice.call(arguments).concat(args));
    }
};


window.onload = function() {	
	buttonsdiv = document.getElementById('buttons');
	buttons = buttonsdiv.getElementsByTagName('button');

	for (var i = 0; buttons.length > i; i++) {
		
		var input = document.createElement('input');
		input.name = 'button[]';
		input.id = i;
		input.type = 'hidden';
		input.value = '0';
		document.getElementById('inputs').appendChild(input);
		
		buttons[i].onclick = test.bind(buttons[i], i);

	}
	
	function test(e, i) {
			input = document.getElementById('inputs').getElementById(i);

			if (this.style.background == '') {
				this.style.background=hoverColor;
				input.value = '1';
			}
			else {
				this.style.background='';
				input.value = '0';
			}	
	}		

}
</script>

Helios co. · 16. Juni 2008

Hallo,

wofür genau brauchst du sowas überhaupt, wenn ich fragen darf?

Klar, wenn ich schon um Hilfe bitte habt ihr auch das Rehct zu wissen wasich damit machen will.
Ich hatte hier vor längerem schon mal gepostet, wie man theoretisch einen elektronischen Sitzplan realisieren kann.

Genau das will ich jetzt auch praktisch ausprobieren. Nur halt zu Testzwecken, daher reichen auch 10 Button (sprich 10 Sitze).

Mit JScript kenne ich mich leider garnicht aus, dafür mit Java und von der Syntax scheint es ja sehr ähnlich zu sein

Warum gibst du nicht einfach bei der 1. seite schon ein eingabefeld für den namen ein und verarbeitest dann alles auf der 2. seite auf einmal?

Das ginge natürlich auch.Dadurch wird zwar die Sitzplanseite etwas überladen,aber das Design ist mir zunächst einmal egal.

@PW-toXic
Vielen dank für den Code.Da ich wie gesagt mich mit JScript kaum auskenne verstehe ich leider nicht alles. Könntest du vielleicht einige erläuternde Kommentare dazu schreiben, damit ich mir für meine Lösung etwas draus zusammenschustern kann, ohne mich wochenlang in JScript einarbeiten zu müssen?

Schon mal herzlichen Dank für euer reges Interesse und die zahlreichen Comments!

Nikolas.W · 16. Juni 2008

einen sitzplan elektronisch zu machen ginge am schönsten mit AJAX und XML finde ich. habe sowas schonmal für einen Abiball gesehen, macht echt was her.

wenn du es per PHP machst dann würde ich es echt so machen, dass du auf der ersten seite die sitze anklicken kannst und dann auf der 2ten seite die namen eingeben etc.

PW-toXic · 16. Juni 2008

Ich bin auch relativ neu in js, daher kann ich evtl nicht alles so toll kommentieren

PHP:

<?php 
echo '<pre>'; 
print_r($_POST); 
echo '</pre>'; 
?> 
<div id="buttons"> 
    <button>button0</button> 
    <button>button1</button> 
    <button>button2</button> 
    <button>button3</button> 
</div> 

<form id="inputs" enctype="multipart/form-data" action="/core/index/test2" method="post">     
    <input type="submit" value="abschicken" /> 
</form> 

<script type="text/javascript"> 


//HOVER COLOR 
var hoverColor = '#ffd0d0'; 

//dieser code wird benötigt, damit man bei einem event eine function mit parametern aufrufen kann
Function.prototype.bind = function(o) { 
    var fn = this; 
    var args = Array.prototype.slice.call(arguments, 1); 

    return function() { 
        fn.apply(o, Array.prototype.slice.call(arguments).concat(args)); 
    } 
}; 



//wenn die webseite geladen wird führe diesen code aus..
window.onload = function() {    
    //das element, in dem sich die ganzen buttons befinden
    buttonsdiv = document.getElementById('buttons'); 
    //innerhalb dieses divs befinden sich einige elemente vom typ <button> (tag name)
    //diese werden dann in dem array buttons gespeichert
    buttons = buttonsdiv.getElementsByTagName('button'); 

    //nun alle buttons ansehen.
    for (var i = 0; buttons.length > i; i++) { 
         
        //für jeden button möchten wir ein input Feld haben, das versteckt ist, und
        //die gewünschten Werte überträgt
        var input = document.createElement('input'); 
        //setzen von html werten von dem input feld
        input.name = 'button[]'; 
        input.id = i; 
        input.type = 'hidden'; 
        input.value = '0'; 
        //dieses neue Eingabefeld fügen wir dem Formular hinzu
        document.getElementById('inputs').appendChild(input); 
         
        //Für jeden der buttons definieren wir, was bei dem event onclick passieren soll.
        //dabei werden zwei parameter übergeben: einmal der button selbst, und die
        //nummer des arrays (damit wir diese unterscheiden können)
        buttons[i].onclick = test.bind(buttons[i], i); 

    } 
     
    //der erste parameter steht für ein art eventhandler, der hier nicht benötigt wird
    //Der zweite Parameter entspricht dem 2. parameter, den wir bei test.bind() angegeben haben
    //der ersten Parameter, den wir bei test.bind() angegeben haben (buttons[i])
    //ist hier mit "this" abrufbar. Dies gilt immer für den ersten Parameter, den man bei bind übergibt
    function test(e, i) { 
            //hole eine referenz zu dem oben erstellten input, das zu dem button i gehört
            input = document.getElementById('inputs').getElementById(i); 

            //einfache ampelschaltung...
            //wenn der hintergrund vorher leer war, dann mach ihn jetzt rot und setze den zu
            //übertragenden wert auf 1... else andersrum
            if (this.style.background == '') { 
                this.style.background=hoverColor; 
                input.value = '1'; 
            } 
            else { 
                this.style.background=''; 
                input.value = '0'; 
            }     
    }         

} 
</script>

Helios co. · 17. Juni 2008

Wow,

schon mal vielen Dank!
Werde es jetzt damit versuchen und euch bestimmt wieder mit anderen Fragen nerven

Thx!

nordicman · 1. Juli 2008

Hallo zusammen,

erstmal bin ich froh diesen Beitrag gefunden zu haben. Ich habe ein ähnliches Problem wie Helios co. und komme im Moment einfach nicht weiter.

Ich habe eine Tabelle mit vordefinierten Werten. Man kann nun einige Werte anklicken(in dem script sind es 6). Diese werden dann farblich makiert. Sofern man erneut auf diese Werte klickt, ändert sich die Farbe in den Ursprungszustand.

Sofern man sich für die entsprechenden Werte entschieden hat, sollen diese an ein php Dokument geschickt werden und auf einer anderen Seite weiterverarbeitet/ausgegeben werden.
Bsp. Man klickt auf 5,17,18,19,36,37 klickt dann auf absenden und kommt dann auf einer neuen seite(php) wo die Daten angezeigt/weiterverarbeitet(Sie haben folgende Zahlen gewählt: 5,17,18,19,36,37) werden.

Das Script ist soweit fertig. Es scheitert im Moment an der Weiterverarbeitung/Anzeige der ausgewählten Daten auf einer neuen Seite.

Ich hoffe ihr könnt mir hierbei weiterhelfen.

Anbei das Script.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Auswertung</title>
  <style type="text/css" title="cssStyle">

<!--
.cssTxtSelected
{
background-color:red;
color:black;
}
.cssTxtNotSelected
{
background-color:white;
color:black;
}
-->
</style>

<script language="javascript1.2" tyle="text/javascript" title="jsScript">
<!--
var curSelect = 0;
var maxSelect = 6;

function onSelectTxt(prmThis)
{
if ((typeof(prmThis)=="object") && (prmThis.type="text")) {
if (("cssTxtNotSelected"==prmThis.className) && (curSelect<maxSelect)) {

prmThis.className = "cssTxtSelected";
curSelect++;

} else if ("cssTxtSelected"==prmThis.className) {
prmThis.className = "cssTxtNotSelected";
curSelect--;
}
}
}
//-->
</script>


</head>

<body>
<form id="idForm" name="idForm" method="get" action="auswertung.php">

<table style="text-align: left; width: 168px; height: 199px;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td id="idTxt1" name="idTxt1" class="cssTxtNotSelected" onclick="onSelectTxt(this)">1</td>
      <td id="idTxt2" name="idTxt2" class="cssTxtNotSelected" onclick="onSelectTxt(this)">2</td>
      <td id="idTxt3" name="idTxt3" class="cssTxtNotSelected" onclick="onSelectTxt(this)">3</td>
      <td id="idTxt4" name="idTxt4" class="cssTxtNotSelected" onclick="onSelectTxt(this)">4</td>
      <td id="idTxt5" name="idTxt5" class="cssTxtNotSelected" onclick="onSelectTxt(this)">5</td>
      <td id="idTxt6" name="idTxt6" class="cssTxtNotSelected" onclick="onSelectTxt(this)">6</td>
      <td id="idTxt7" name="idTxt7" class="cssTxtNotSelected" onclick="onSelectTxt(this)">7</td>
    </tr>
   <tr>
      <td id="idTxt8" name="idTxt8" class="cssTxtNotSelected" onclick="onSelectTxt(this)">8</td>
      <td id="idTxt9" name="idTxt9" class="cssTxtNotSelected" onclick="onSelectTxt(this)">9</td>
      <td id="idTxt10" name="idTxt10" class="cssTxtNotSelected" onclick="onSelectTxt(this)">10</td>
      <td id="idTxt11" name="idTxt11" class="cssTxtNotSelected" onclick="onSelectTxt(this)">11</td>
      <td id="idTxt12" name="idTxt12" class="cssTxtNotSelected" onclick="onSelectTxt(this)">12</td>
      <td id="idTxt13" name="idTxt13" class="cssTxtNotSelected" onclick="onSelectTxt(this)">13</td>
      <td id="idTxt14" name="idTxt14" class="cssTxtNotSelected" onclick="onSelectTxt(this)">14</td>
    </tr>
    <tr>
      <td id="idTxt15" name="idTxt15" class="cssTxtNotSelected" onclick="onSelectTxt(this)">15</td>
      <td id="idTxt16" name="idTxt16" class="cssTxtNotSelected" onclick="onSelectTxt(this)">16</td>
      <td id="idTxt17" name="idTxt17" class="cssTxtNotSelected" onclick="onSelectTxt(this)">17</td>
      <td id="idTxt18" name="idTxt18" class="cssTxtNotSelected" onclick="onSelectTxt(this)">18</td>
      <td id="idTxt19" name="idTxt19" class="cssTxtNotSelected" onclick="onSelectTxt(this)">19</td>
      <td id="idTxt20" name="idTxt20" class="cssTxtNotSelected" onclick="onSelectTxt(this)">20</td>
      <td id="idTxt21" name="idTxt21" class="cssTxtNotSelected" onclick="onSelectTxt(this)">21</td>
    </tr>
    <tr>
      <td id="idTxt22" name="idTxt22" class="cssTxtNotSelected" onclick="onSelectTxt(this)">22</td>
      <td id="idTxt23" name="idTxt23" class="cssTxtNotSelected" onclick="onSelectTxt(this)">23</td>
      <td id="idTxt24" name="idTxt24" class="cssTxtNotSelected" onclick="onSelectTxt(this)">24</td>
      <td id="idTxt25" name="idTxt25" class="cssTxtNotSelected" onclick="onSelectTxt(this)">25</td>
      <td id="idTxt26" name="idTxt26" class="cssTxtNotSelected" onclick="onSelectTxt(this)">26</td>
      <td id="idTxt27" name="idTxt27" class="cssTxtNotSelected" onclick="onSelectTxt(this)">27</td>
      <td id="idTxt28" name="idTxt28" class="cssTxtNotSelected" onclick="onSelectTxt(this)">28</td>
    </tr>
    <tr>
      <td id="idTxt29" name="idTxt29" class="cssTxtNotSelected" onclick="onSelectTxt(this)">29</td>
      <td id="idTxt30" name="idTxt30" class="cssTxtNotSelected" onclick="onSelectTxt(this)">30</td>
      <td id="idTxt31" name="idTxt31" class="cssTxtNotSelected" onclick="onSelectTxt(this)">31</td>
      <td id="idTxt32" name="idTxt32" class="cssTxtNotSelected" onclick="onSelectTxt(this)">32</td>
      <td id="idTxt33" name="idTxt33" class="cssTxtNotSelected" onclick="onSelectTxt(this)">33</td>
      <td id="idTxt34" name="idTxt34" class="cssTxtNotSelected" onclick="onSelectTxt(this)">34</td>
      <td id="idTxt35" name="idTxt35" class="cssTxtNotSelected" onclick="onSelectTxt(this)">35</td>
    </tr>
    <tr>
      <td id="idTxt36" name="idTxt36" class="cssTxtNotSelected" onclick="onSelectTxt(this)">36</td>
      <td id="idTxt37" name="idTxt37" class="cssTxtNotSelected" onclick="onSelectTxt(this)">37</td>
      <td id="idTxt38" name="idTxt38" class="cssTxtNotSelected" onclick="onSelectTxt(this)">38</td>
      <td id="idTxt39" name="idTxt39" class="cssTxtNotSelected" onclick="onSelectTxt(this)">39</td>
      <td id="idTxt40" name="idTxt40" class="cssTxtNotSelected" onclick="onSelectTxt(this)">40</td>
      <td id="idTxt41" name="idTxt41" class="cssTxtNotSelected" onclick="onSelectTxt(this)">41</td>
      <td id="idTxt42" name="idTxt42" class="cssTxtNotSelected" onclick="onSelectTxt(this)">42</td>
    </tr>
    <tr>
      <td id="idTxt43" name="idTxt43" class="cssTxtNotSelected" onclick="onSelectTxt(this)">43</td>
      <td id="idTxt44" name="idTxt44" class="cssTxtNotSelected" onclick="onSelectTxt(this)">44</td>
      <td id="idTxt45" name="idTxt45" class="cssTxtNotSelected" onclick="onSelectTxt(this)">45</td>
      <td id="idTxt46" name="idTxt46" class="cssTxtNotSelected" onclick="onSelectTxt(this)">46</td>
      <td id="idTxt47" name="idTxt47" class="cssTxtNotSelected" onclick="onSelectTxt(this)">47</td>
      <td id="idTxt48" name="idTxt48" class="cssTxtNotSelected" onclick="onSelectTxt(this)">48</td>
      <td id="idTxt49" name="idTxt49" class="cssTxtNotSelected" onclick="onSelectTxt(this)">49</td>
    </tr>
  </tbody>
</table>
 <br /><br />
<button value="ganzeigen" name="ganzeigen" type="submit">Auswahl anzeigen</button>
</form>
</body>

</html>

PW-toXic · 1. Juli 2008

<form id="idForm" name="idForm" method="get" action="auswertung.php">

method="POST" und dann auf der auswertung.php
print_r($_POST);

nordicman · 1. Juli 2008

Hallo PW-toXic,

danke für dein Vorschlag. Wenn ich dieses so mache erscheint jedoch auf der Ausgabeseite.

Array ( [ganzeigen] => ganzeigen )

PW-toXic · 1. Juli 2008

du musst schon auch die formular elemente dafür erstellen damit das auch als post mitgeschickt wird..

also <input type=" name="...

nordicman · 1. Juli 2008

OK, die <input felder > habe ich jetzt mal als hidden vor jeder zelle geschrieben.
bsp:

Code:

<input type="hidden" name="1" value="">
      <td id="idTxt1" name="idTxt1" class="cssTxtNotSelected" onclick="onSelectTxt(this)">1</td>

Das bringt php dazu, mir anzuzeigen, dass array 1=> ist. Also wurde ja keine wert übergeben bzw. nicht geprüft ob 1 angeklickt war. Ansonsten hätte php ja sowas wie array 1=> 1 ausgeben müssen oder?

Wie bekomme ich jetzt den Wert 1 (wenn 1 wirklich angeklickt worden ist) in die abfrage bzw. auf der neuen seite in die ausgabe?

Danke für Deine Geduld PW-toXic.

claW. · 1. Juli 2008

nordicman schrieb:
Code:

<input type="hidden" name="1" value="">

Wie bekomme ich jetzt den Wert 1 (wenn 1 wirklich angeklickt worden ist) in die abfrage bzw. auf der neuen seite in die ausgabe?

du hast den namen zwar drin, aber keinen wert. den müsstest du schon mit übernehmen, sonst ist es klar, dass der index [1] leer ist.

nordicman · 1. Juli 2008

Hallo claW3581,

danke für deine Antwort.
Genau das ist mein derzeitiges Problem. Ich steh da im Moment voll auf dem Schlauch. Wie übergebe ich den Wert in das "hidden" feld bzw. was muss in value="" rein?

mfg

claW. · 1. Juli 2008

wenn du die daten im vorherigen formular sendest, kannst du die daten in $_POST auslesen (insofern du im formular die eigenschaft "method" auf "post" setzt; wenn du "get" benutzt, dann sind die variablen über $_GET ansprechbar; mit $_REQUEST bekommst du alle übergebenen daten). du musst nun also die daten aus den vorherigen feldern in das neue formular übergeben:

formular1.php:

PHP:

<form action="formular2.php" method="post">
<input type="text" name="feld1" value="feld1" />
<input type="text" name="feld2" value="feld2" />
....
</form>

formular2.php:

PHP:

<form action="formular3.php" method="post">
<input type="hidden" name="feld1" value="<?php echo $_POST['feld1']; ?>" />
<input type="hidden" name="feld2" value="<?php echo $_POST['feld2']; ?>" />

<input type="text" name="feld3" value="feld3" />
<input type="text" name="feld4" value="feld4" />
...
</form>

formular3.php:

PHP:

<form action="formular3.php" method="post">
<input type="hidden" name="feld1" value="<?php echo $_POST['feld1']; ?>" />
<input type="hidden" name="feld2" value="<?php echo $_POST['feld2']; ?>" />
<input type="hidden" name="feld3" value="<?php echo $_POST['feld3']; ?>" />
<input type="hidden" name="feld4" value="<?php echo $_POST['feld4']; ?>" />
...
</form>

usw.

wie du siehst ist es aufwändig, deswegen würde ich lieber auf sessions aufbauen. dort kannst du in jeder php einfach $_SESSION['xyz'] setzen und im letzten formular sind alle daten immer noch vorhanden, ohne dass du jedes feld mit dir mitschleppen musst. sieh dir dazu einfach mal session_start(), dort wird eigentlich alles beschrieben und google liefert auch reichlich treffer.

nordicman · 1. Juli 2008

Hallo claW3581,

wow+vielen Dank für deine Mühe!
Ist es echt so aufwändig um an die angelickten Daten(Zahlen) zu gelangen? Diese müssen ja nicht in einem neuen Formular erscheinen. Ich benötige die ausgewählten Zahlen um diese dann anzeigen zu lassen bzw. diese in php weiter zu verarbeiten(mit anderen werten vergleichen etc.). Obwohl ich php leicht besser beherrsche als js verstehe ich nicht ganz warum ich mehrere php dateien benötige.

Die Daten werden mittels POST weitergegeben. Ich ging davon aus, dass es mit js möglich wäre eine funktion/schleife etc. zu schreiben(wenn 1,2,3,4,5,6 angeklickt sind, dann gebe diese an auswertung.php?).

Die session_start() Seite habe ich mir angeschaut, jedoch für mich nicht ganz schlüssig, da ich wie oben geschrieben nicht verstehe warum es mehrere php dateien sein müssen. Auch erst verwertbar, sofern ich es geschafft habe, die gewünschten Werte zu übergeben(oder?).

Ich bin dir für jede weitere Hilfe sehr verbunden!

Suche

Helios co.

Lt. Commander

Nikolas.W

Lt. Commander

claW.

Gast

Nikolas.W

Lt. Commander

PW-toXic

Lieutenant

Helios co.

Lt. Commander

Nikolas.W

Lt. Commander

PW-toXic

Lieutenant

Helios co.

Lt. Commander

nordicman

Newbie

PW-toXic

Lieutenant

nordicman

Newbie

PW-toXic

Lieutenant

nordicman

Newbie

claW.

Gast

nordicman

Newbie

claW.

Gast

nordicman

Newbie

Ähnliche Themen