preventDefault() nach Ajax request

[_j4nk3y]

Morgen,

Das heißt, du unterdrückst vielleicht erfolgreich die Default-Aktion, aber nicht deine benutzerdefinierte Funktion, die im Prinzip das gleiche macht.

Leider wird die Default- Aktion nicht unterdrückt und das Formular regulär abgeschickt. Sonst hätte ich ja kein Problem und müsste nicht Nachfragen.

Vorschlag zur Güte: Räume erstmal auf. JavaScript mit PHP zu generieren ist eine ganz schlechte Idee, das macht es unglaublich schwierig vorherzusehen, wie das Programm reagiert. Und Event-Handler im HTML zu notieren, ist aus ähnlichen Gründen ein stilistisches No-Go. Besser wäre du registrierst alle Event-Handler aus deinem JavaScript heraus und benutzt Event-Delegation, um mit den dynamisch nachgeladenen Buttons zu interagieren.

Also in etwa so?

a.php

$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>';

		$isButton = 'TRUE';
	}
	else
	{
		$isButton = 'FALSE';
	}

	$response[$value]['markUp'] = $markUp;
	$response[$value]['isButton'] = $isButton;
}

echo json_encode($response);

Funktionsaufruf im Input entfernt*

Nun der Ajax request:

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'];	
				
			}
			click();
		}
	}
	
	hr.open("POST", url, true)
	hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	hr.send();
}

Was ich nach kurzer Recherche gefunden Hab.

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;
   } 
   if (button) {
      document.getElementById(button).addEventListener("click", function(event){
		event.preventDefault()
	});
      return false;
   }
}

und ein Auschnitt der Seite auf der alles eingebunden werden soll:

<section id="content_wrapper">
	<script>
		list();
		document.getElementById("content_wrapper").onclick = buttonClick;
	</script>
<section>

Gruß
Jo