Checkbox außerhalb von Form posten

J

Joe

Erfahrenes Mitglied
Hallo Tutorials.de,

Kann man Checkboxen (2) ausserhalb einer Form posten?

Ich habe 2 Checkboxen und darunter einen Table den ich in einer Schleife durchgehe (foreach).
Wie kann ich den Wert der Checkboxen den Form-actions mitgeben?

PHP: 
// Checkboxen
	if ($Anzahl5AB) {
		echo "<span style=\" Font-Size:12pt;margin: 0 0 0 20px;color: Yellow\">AngriffsBooster: </span><span style=\"Font-Size:15pt; color: Orange\">$Anzahl5AB<span><span style=\"color: Yellow\"> Einsetzen: <input type=\"checkbox\" onclick=\"UpdateCheckBox2()\" id=\"ans2\" name=\"formDoor[]\" value=\"A\" $ABCheck/></span>";
	}
	if ($Anzahl6DB) {
		echo "<span style=\" Font-Size:12pt;margin: 0 0 0 20px;color: Yellow\">DefenseBooster: </span><span style=\"Font-Size:15pt; color: Orange\">$Anzahl6DB<span><span style=\"color: Yellow\"> Einsetzen: <input type=\"checkbox\" onclick=\"UpdateCheckBox2()\" id=\"ans2\" name=\"formDoor[]\" value=\"B\" $DBCheck/></span>";
	}

...

// Tabelle
echo "<table style=\"margin: 0 0 0 20px\"><tr>
	for($i=0; $i<$count; $i++){
		$User=$Enemy[$i]['Username'];
		$EnemyLVL=$Enemy[$i]['LVL'];
...
echo "<form action=\"main.php?section=combat\" method=\"post\">";
				echo "<tr>
						
						<td><span style=\"color: #EECFA1\"><FONT SIZE=2><b>$User</b></FONT></span></td>";
						echo "<td><span style=\"color: #EECFA1\"><FONT SIZE=2><b>**$EnemyLVL</b></FONT></span></td>
							<input type='hidden' name='User' value='$User'>
// Submit / Wie die Checkboxen von oben posten?
							<td><input type='submit' style='font-family: Verdana; font-size: 7pt' name='formaction' value='angreifen'></td>
							</form>
							</tr>";
					}
				}
	}
echo "</table>";

Würde mich freuen wenn mir jemand weiterhelfen könnte.
 
Zuletzt bearbeitet:
Am Rande:

PHP: 
<?php

// Ganz schlecht:
if ($Anzahl5AB) {
    echo "<span style=\" Font-Size:12pt;margin: 0 0 0 20px;color: Yellow\">AngriffsBooster: </span><span style=\"Font-Size:15pt; color: Orange\">$Anzahl5AB<span><span style=\"color: Yellow\"> Einsetzen: <input type=\"checkbox\" onclick=\"UpdateCheckBox2()\" id=\"ans2\" name=\"formDoor[]\" value=\"A\" $ABCheck/></span>";
}

// Etwas besser:
if ($Anzahl5AB) {
    echo '<span style="Font-Size:12pt;margin: 0 0 0 20px;color: Yellow">AngriffsBooster: </span>
          <span style="Font-Size:15pt; color: Orange">' . $Anzahl5AB . '</span>
          <span style="color: Yellow"> Einsetzen:
            <input type="checkbox" onclick="UpdateCheckBox2()" id="ans2" name="formDoor[]" value="A"' . $ABCheck . '/>
          </span>';
}

// Nicht unbedingt besser, aber auch möglich:

echo <<<EOT
<span style="Font-Size:12pt;margin: 0 0 0 20px;color: Yellow">AngriffsBooster: </span>
<span style="Font-Size:15pt; color: Orange">$Anzahl5AB</span>
<span style="color: Yellow"> Einsetzen:
    <input type="checkbox" onclick="UpdateCheckBox2()" id="ans2" name="formDoor[]" value="A" $ABCheck />
</span>
EOT;

// Gut:

?>

<span style="Font-Size:12pt;margin: 0 0 0 20px;color: Yellow">AngriffsBooster: </span>
<span style="Font-Size:15pt; color: Orange"><?=$Anzahl5AB?></span>
<span style="color: Yellow"> Einsetzen:
    <input type="checkbox" onclick="UpdateCheckBox2()" id="ans2" name="formDoor[]" value="A"<?=$ABCheck?>/>
</span>

Auch nicht gut: Inline-Styles (style="…") und Event-Handler-Attribute (onclick="…"). Nutze CSS und Event-Binding direkt über den DOM-Tree (beispielsweise via jQuery: http://api.jquery.com/bind/).

Du beachtest zudem den Kontextwechsel von PHP nach HTML nicht (htmlspecialchars).

- http://wiki.selfhtml.org/wiki/Artikel:Kontextwechsel
- https://de.wikipedia.org/wiki/Cross-Site-Scripting

Das font-Element sollte nicht mehr verwendet werden (wiederum CSS).

Zur Frage:

Kann man Checkboxen (2) ausserhalb einer Form posten?
Zum Vergrößern anklicken....

Du kannst den Inhalt der Checkboxen vor dem Absenden per JavaScript mit in das Formular „reintricksen“.

Geeignete Suchbegriffe dazu wären „javascript add element to form before submit“ und „javascript get value from checkbox“.

- http://stackoverflow.com/questions/993834/adding-post-parameters-before-submit
- http://stackoverflow.com/questions/4754699/how-do-i-get-if-a-checkbox-is-checked-or-not
- …

jQuery-Lösungen sind meines Erachtens zu empfehlen.

Du solltest aber bedenken, dass das dann nur mit JavaScript funktioniert. Willst du diese Abhängigkeit vermeiden, musst du den Code glaube ich so umbauen, dass sich alle Elemente in einem Formular befinden.
 
  • Gefällt mir
Reaktionen: Joe
Die Inline Styles kommen bei mir oft später hinzu, sicher eine schlechte Angewohnheit. Bin mir nicht ganz sicher aber möchte das vererben des Spans gern verhindern daher nutze ich auch gern Inline-Style.

Danke für den Tip mit den Event-Binding das kannte ich noch nicht.

Mir war garnicht bewusst das ein Kontextwechsel PHP-HTML eventuell auch XSS ermöglicht. Mir ist auch noch nicht ganz klar wie genau das passieren könnte. Trotz Lesens deiner Links und obwohl ich auch bereits etwas davon weiss hab ich da Probleme zu verstehen was dabei passiert oder passieren könnte.
Immerhin wird der Post aber dann nochmal escaped auf der weitergeleiteten Seite mit mysql_real_escape() und natürlich wenn notwendig nochmalige Datenbankabragen(Um zu sehen ob Daten wirklich stimmen die ankommen) gemacht.

Ich persönlich finde JQuery auch recht gut. Javascript ist ohnhin im Projekt unvermeidlich. Ich sehe auch nicht mehr ein wenn User auf Script verzichten müssen können sie eben die Seite nicht nutzen und gut.

Also ich habe nun dies gefunden:
http://stackoverflow.com/questions/...s-of-checkboxes-and-spit-them-into-a-differen
Code: 
$(function(){
    $('#YourFormID').bind('submit',function(){
    	var serializedCheckboxes = '';
    	$("input[type=checkbox]").each(function() {
    	 if($(this).attr("checked")) {
    		serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
    	 }
    	});
    	$("input[name=allchecks]").attr("value", serializedCheckboxes);
    });
});
Werde das mal versuchen. Muss ich dazu jeder Form des Tables eine feste ID geben also zb: 'SubCheckForm$i' ? Denn daraus ergibt sich ja wieder ein weiteres Problem ich müsste eine Schleife machen für das JQuery.


Erstmal Vielen Dank für die umfangreiche Erläuterung :)
 
Ok habe nun folgende Funktion:

Javascript: 
<script type="text/Javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
    $('#form1').submit(function(){
        if ($('#ans1').is(':checked')) {
			alert('do submit');
            var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("A").attr('checked','checked');
			$('#form1').append($(input));
        } else {
            var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("A");
			$('#form1').append($(input));
        }
		if ($('#ans2').is(':checked')) {
			alert('do submit');
            var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("B").attr('checked','checked');
			$('#form1').append($(input));
        } else {
            var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("B");
			$('#form1').append($(input));
        }
    });
});
</script>

Das Funktioniert auch soweit allerdings gibt es noch das Problem, wenn es mehrere Forms im Table gibt, arbeitet das Script nur bei der ersten Form richtig. Ich schätze das 2 gleichnamige ID's nicht von Javascript verarbeitet werden. Nun stehe ich vor dem Problem wie ich eine Schleife codiere das er alle IDs durchgeht. Zb ID='Form$i' wobei $i variabel ist. Wie kann ich obriges Script nun so umbauen das es alle Forms nach ihrer ID in einer Schleife durchgeht?

@Moderatoren Thema kann gerne verschoben werden.
Danke fürs verschieben.
 
Zuletzt bearbeitet von einem Moderator:
Habe die Lösung gefunden:

Javascript: 
$(function(){
	$(document).delegate('form', 'submit', function(event) {
		var $form = $(this);
		var id = $form.attr('id');
		if ($('#ans1').is(':checked')) {
			var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("A").attr('checked','checked');
			$('#'+id).append($(input));		
		} else {
			var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("A");
			$('#'+id).append($(input));
		}
		if ($('#ans2').is(':checked')) {
			var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("B").attr('checked','checked');
			$('#'+id).append($(input));
		} else {
			var input = $("<input>").attr("type", "checkbox").attr("name", "formDoor[]").val("B");
			$('#'+id).append($(input));
		}
	});
});
 
Wobei es nicht standardkonform ist, eine ID im selben Dokument mehrfach zu vergeben.

Wenn ich es richtig verstehe, machst du das ja.
 
@mermshaus
Die Funktion ermittelt die ID der Form wenn ein Submit-Button geklickt wurde .
Die ID der Formulare der Tabelle wurde variabel in der Schleife vergeben ID='form$i' .
Weiterhin prüft die Funktion dann meine 2 Checkboxen welche außerhalb der Tabelle sind.
Je nach Fall hänge ich an das Formular welches geklickt wurde (ID) dann 2 Checkboxen mit den Status Checked/Not Checked an.

Das ganze passiert bevor das Formular gesendet wird und IDs werden nicht mehrfach vergeben. Ich glaube das würde auch garnicht gehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück