preventDefault() nach Ajax request

[Sigg]

Hallo _j4nk3y

$arr = array(a,b,c,d,e,f);
$response = array();
foreach($arr as $value)
{
	$markUp = '';
	if($value == 'a' OR $value == 'c')
	{
		$markUp = $markUp.'<form action="b.php" method="post">
					<input class="button" id="submit_'.$value.'" type="submit"/>
				<form>';

Wenn ich das richtig sehe brauchst du hier das <form> nicht. Das Absenden machst du nämlich rein mit Javascript. Es reicht ein <input type="button"> oder <button> ohne <form>.

Ich würde hier den Wert in einem data-Attribut unterbringen, dann kannst du ihn später mit Javascript auslesen:

<button data-value="DER WERT" class="button">...</button>

Hab keine Ahnung von PHP aber da siehts vielleicht so aus

'<button data-value="' . htmlspecialchars($value) . '" class="button">...</button>'

function list()
{
	var hr = new XMLHttpRequest();
	var url = "a.php";
	
	hr.onreadystatechange = function()
	{
		if (hr.readyState == 4 && hr.status == 200)
		{
			var div = document.getElementById("content_wrapper");
			
			var response = JSON.parse(hr.responseText);
			
			for(var key in response){
					
				div.innerHTML += response[key]['markUp'];

Wenn du letztlich ein String baust und an innerHTML zuweist... wieso sendet der Server dann ein JSON und nicht einfach direkt HTML? Dann sparst du dieses mehrfache Zuweisen von HTML. dann würde reichen

div.innerHTML = hr.responseText;

funktion buttonClick (e) {
   
   var e = e || window.event;
   var target = e.target || e.srcElement;

   var elementName = target.nodeName,
       button = false;
   if ( button == "INPUT") {
       button = target;
   } 

Ich glaub du willst hier testen, ob das target einer der Buttons ist. Das ist schon ganz richtig, aber der Test funktioniert so nicht.

Ich würde auf die Klasse prüfen. Denn der Tag-Name ist nicht unbedingt eindeutig. Es gibt wahrscheinlich noch andere INPUTs die nicht diesen Ajaxrequest auslösen sollen.

Wenn die Bedingung nicht zutrifft würd ich die Funktion einfach beenden:

if (target.className !== 'button') {
  return;
}

if (button) { document.getElementById(button).addEventListener("click", function(event){ event.preventDefault() }); return false; }

Das ist unnötig. Du bist hier bereits im Handler für den Clickevent und weißt dass einer der Buttons geklickt wurde. Du hast bereits das Eventobjekt als "e". Du kannst direkt das machen was du tun willst.

Beim Event Delegation brauchen die einzelnen Buttons keine eigenen Clickhandler. Alles läuft durch den einen zentralen.

event.preventDefault();
// Wert aus dem data Attribut auslesen
var value = target.getAttribute('data-value');
// Mach was mit dem wert
submit(value);

  document.getElementById("content_wrapper").onclick = buttonClick;

Das ist okay!

Viel Erfolg noch Sigg