• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Fragen zur Formularverarbeitung mit jQuery

EvilBen

New member
Hallo Leute,

ich bin neu hier im Forum und möchte mich direkt vorstellen: Mein Name ist Ben, 28 Jahre alt, und eigentlich PHPler doch es lässt sich ja für gewöhnlich nicht vermeiden, einige Passagen mit JS oder Jquery zu realisieren, was mich hier zu meinem Problem und zu euch Experten führt - denn das bin ich, was JS betrifft, definitiv nicht.

Also folgendes: ich nutze Bootstrap (nur dass ihr euch nicht der CSS Klassen wegen wundert). Damit habe ich eine index.php erstellt, und in der Datei $_POST.php werden alle aufgerufenen Links verarbeitet, und eben die entsprechenden Seiten inkludiert. Hier meine Index.php
Code:
<?php 
error_reporting(E_ALL | E_STRICT);
session_start();
include 'db.php';
include '_functions.php';
//include 'php/classes.php';
include 'variables.php';


?>
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <title>Snango</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


    <!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
    <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <!-- ###################################################
  		###################################################
        Header-Navigation einblenden -->
        <div class="container">
        <?php 
  if ( ! isset ( $_SESSION['user'] ) ){
	  //include "php/tpl/login.tpl";
  }else{
	  include "tpl/loggedin.tpl";
  }
  ?>
        <div class="row">
        <div class="col-lg-12">
        <!-- HEAD Content -->
        <header class="head">
		<img src="img/images/head.png" /><br>
     	</header>
        </div><!-- col-lg Ende-->
        </div><!--Row Ende-->
        </div><!--Container Ende-->

	<!-- CONTENT -->
    <div class="container">
    <div class="row">
    <?php
       			if ( ! isset ( $_SESSION['user'] ) ){
					if(isset($_GET['login'])){
					//LOGIN
					include "login.php";	
					}else{
	  include "tpl/reglog.tpl";
					}
}else{
?>
        <div class="col-md-3 "><p class="o_navileft">
       Lorem ipsum dolor sit amet, detraxit scripserit in usu, no his impedit suscipit. Graeco vivendum persequeris vel ea, etiam mnesarchum his ad. Nostrum deseruisse mel no, mei reformidans consectetuer ad. Ne usu perfecto tacimates. Eu quaeque maiorum mel, an eos esse principes adipiscing, ei sea enim novum scripta.

Per eligendi intellegam ne, et ignota suavitate definiebas cum. Et vix error oporteat, vix ex integre veritus sensibus, dicat facilisis id eum. Ut dolores facilisi cum, has persius persecuti in, ea mundi oratio eum. Ut pri probo atqui, aeque decore verear te eam, per cu docendi tibique pericula. Quot quando eos cu.

Te malorum salutandi sententiae pro. His vero denique aliquando no. Aeque nemore te mei, an per illum appellantur. Solet singulis ne nec, utamur recusabo ei nec, ea quaestio atomorum eum.

In deserunt quaerendum vis. Cum ad offendit delectus. Vel et nisl voluptaria, debet mundi putant ea nec. Ut scripta delectus deserunt vis, nec an integre adipiscing. Per dolorum mediocrem at, eum in quot iusto adolescens, id legimus vivendo detraxit nec.

Eos ne quaestio eloquentiam interpretaris, an probo labore mei. Ne eos gubergren voluptatibus, cu modo nullam mei. Ad iisque accumsan quo, ius solum quaerendum cu. Eam id eius sanctus, nec ea accusata praesent, ne nostrum apeirian mei. Congue vocent vis cu, graeci sadipscing mei ad.</p>
       
       </div>
       <div class="col-md-9">
		
            <div>
            <?php 
			include "_POST.php";
}
			?>
<!-- CONTENT -->
  </div>

       
       
       </div>
       </div>
       </div>


    <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
    <script src="js/bootstrap.min.js"></script>
   <script type="text/javascript">
    var request = null;
// Ajaxfunktion start
    function send() {
 
        // Request erstellen mit Browserweise Mo/Sa/Op vs. IE
        if (window.XMLHttpRequest) {
            // Mo / Sa / Op
            request = new XMLHttpRequest(); 
        } else if (window.ActiveXObject) {
            try {
                // IE 5 und tiefer
                request = new ActiveXObject('Msxml2.XMLHTTP'); 
            } catch (e) {
                try {
                    // IE 6 und höher
                    request = new ActiveXObject('Microsoft.XMLHTTP'); 
                } catch (e) {}
            }
        }
		// Ist der request wirklich da?
        if (!request) {
            alert("FEHLER! Konnte Request nicht erstellen!");
        return false;
        } else {
            // Im Formular angegebene Datei öffnen, Sendemethode POST, Asynchrone Übertragung
            request.open('post', ajaxform.action, true);
            // Header senden
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // Alle Posts außer dem Sendebutton (letztes Element) in die Variable str schreiben
            str='';
            for (var i = 0; i < ajaxform.elements.length-1; i++) {
                str+=ajaxform.elements[i].name+'='+ajaxform.elements[i].value+'';
                t=i+2;
 
                if(document.ajaxform.elements[t]) {
                    str+='&';
                }
            }
 
            // Request senden
            request.send(str);
            // Request verwenden wenn readystate geändert
            request.onreadystatechange = defineRequest;
        }
    }
	 // Request auswerten
    function defineRequest() {
        switch (request.readyState) {
            // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
            case 4:
                if (request.status != 200) {
                    alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
                } else {
                    var content = request.responseText;
                    // den Inhalt des Requests in das <div> schreiben
                    document.getElementById('content').innerHTML = content;
 
                    // Formularfelder vom typ text oder textarea löschen
                    for (var i = 0; i < ajaxform.elements.length-1; i++) {
                        if(ajaxform.elements[i].type=='text' || ajaxform.elements[i].type=='textarea') {
                            ajaxform.elements[i].value='';
                        }
 
                    }
                }
                break;
            default:
                break;
        }
    }
</script>
  </body>
</html>

Die letzte JS Funktion ist die betreffende^^ Pack ich das ganze in eine separate Datei(en) funktioniert es einwandfrei. Hier das nötige Formular dazu:
Code:
<?php
//include "db.php"; // Datenbank includen

//include "_functions.php";
$sql="SELECT * FROM sn_post ORDER BY pos_date DESC LIMIT 100"; //Alle Posts laden LIMIT 100
	$result=$db->query($sql);
	$postzaehler=1; //Postzähler
	while($row=$result->fetch_assoc()){
		$foto="SELECT * FROM sn_users WHERE usr_id='".$row['pos_usr']."'";
		$foto=$db->query($foto);
		$foto=$foto->fetch_assoc();
		
		?>
        <br>
        <div class="panel panel-info">
        
<div class="panel-heading">
    <h3 class="panel-title">
	<table width="100%" border="0">
  <tr>
    <td align="left" width="50"><img width="40" height="40" src="./img/usr/thumbs/<?php echo $foto['usr_profilbild']; ?>"> </td>
    <td  style="font-size:11px;" valign="top"><?php echo $foto['usr_vorname']." ".$foto['usr_nachname']; ?><br>
	
	<?php 
	include "timestamp.php";
	
   ?></td>
  </tr>
</table
	></h3>
  </div>
  <div class="panel-body">
<?php 		echo $row['pos_post'];
?>
  </div>
  <!-- Kommentarfunktion - Button -->
  <div align="right" class="panel-footer">
         <a  role="button" data-toggle="collapse" href="#<?php echo $postzaehler; ?>" aria-expanded="false" aria-controls="collapseBeispiel">
    <button type="button" class="btn btn-default" aria-label="Kommentieren" >
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button></a>
<!-- Like - Button -->
  <button type="button" class="btn btn-default" aria-label="Links ausrichten" name="like">
  <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> <span class="badge">42</span>
</button>

<!-- Kommentarfunktion -->
<div class="collapse" id="<?php echo $postzaehler; ?>" >
  <div class="well" style="background-color:#fff;">
    <form method="POST" name="ajaxform" action="kommentieren.php" onSubmit="javascript:send(); return false;" >
  <div class="form-group" id="kommentieren">
    <input type="text" class="form-control"  placeholder="..."  name="kommi2"></input> 
    <input type="hidden" name="abs" value="<?php echo $_SESSION['id']; ?>"> 
    <input type="hidden" name="empf" value="<?php echo $foto['usr_id']; ?>">
    <input type="hidden" name="komid" value="<?php echo $row['pos_id']; ?>">
  <button type="submit" class="btn btn-default">Post!</button>
</form>
<hr>
<table class="table table-striped">
  

<?php
/*Kommentare laden */
$kom="SELECT * FROM sn_post_kommis WHERE kom_id='".$row['pos_id']."' ORDER BY kom_date ASC";
$komr=$db->query($kom);
$anzkom=$komr->num_rows;

if($anzkom > 0) {
while($kom=$komr->fetch_assoc()){
	echo "<div id=\"content\">";
	//User Daten laden
	$usersql="SELECT * FROM sn_users WHERE usr_id='".$kom['kom_abs']."'";
	$user_row=$db->query($usersql);
	$user=$user_row->fetch_assoc();
	
?>
<tr>
<td width="30px"><img width="30" height="30" src="./img/usr/thumbs/<?php echo $user['usr_profilbild']; ?>">

</td>
<td><div style="font-size:9px;"><?php echo $user['usr_vorname']." ".$user['usr_nachname']." schrieb ".datumundzeit($kom['kom_date']).":";?></div>
<hr><?php echo $kom['kom_kommi']; ?></td>
</tr>
<?php echo "</div>";



}
}else{
echo "Keine Kommentare";	
}
?>

</table>
  </div>
  </div>
</div>


  </div>
        </div>

       
        <?php
		$postzaehler++;
	}
    ?>

Das "Kommentarfunktion" - Formular soll also nun das PHP Script "ohne RELOAD oder Weiterleiten" ausführen - dadurch wird der Kommentar in die Datenbank gespeichert, später soll der DIV mit den Kommentaren noch reloaded werden - ist aber hier noch nicht eingebaut, so dass der Kommentar eben gleich erscheint.
Was das Script jetzt tut, wenn ich den Kommentar abschicke ist, es öffnet mir eben genau diese PHP Datei "kommentieren.php". Und die sieht halt so aus:

Code:
<?php
include "db.php";
$on="SELECT * FROM sn_online WHERE on_ip='".getenv ("REMOTE_ADDR")."' LIMIT 1";
$result=$db->query($on);
$row=$result->fetch_assoc();
$sql="INSERT INTO sn_post_kommis (kom_abs, kom_empf, kom_date, kom_kommi, kom_id) VALUES ('".$_POST['abs']."','".$_POST['empf']."',NOW(),'".$_POST['kommi2']."', '".$_POST['komid']."')";
$db->query($sql);

//echo $sql;

?>

Der Eintrag wird erstellt in der DB - das ist nicht das Problem, nur halt eben das das Script nicht wie gedacht im Background ausgeführt wird, sprich die "kommentieren.php".
Ich vermute mal, dass ich die Funktion falsch eingebunden habe, in der index.php, oder dass ich einfach den Aufruf falsch gemacht habe, irgendwas falsch geschrieben habe - vielleicht findet ihr was^^Wie gesagt lager ich das ganze aus, in eine separate Datei funktioniert es 1A

Ich danke euch für eure Hilfe ^^
 
Zuletzt bearbeitet von einem Moderator:
AW: JS Funktioniert nicht eindeutig.

Sorry für den Doppelpost, aber beim ausführen des Scripts mit Firefox, und einem zeitgleichem Blick in die Konsole, kommt:

TypeError: document.ajaxform.elements is undefined

nur wie fixe ich das !?
 
AW: JS Funktioniert nicht eindeutig.

ok also ich hab es jetzt ganz abgespeckt hinbekommen mit folgender Funktion:

Code:
  <script type="text/javascript">
      $(document).ready(function(){
        $("#form1").submit(function(e){
          e.preventDefault();

          $.post("kommentieren.php",$("#form1").serialize(),function(msg){
			form1.kommi2.value="";
          });
        });
      });
    </script>

Problem ist nur er löscht das Formular, bzw den Text nicht, Bezeichnungen sind Korrekt - aber der Aufruf vielleicht nicht? Möchte dass er eben Das Eingabefeld leert und anschließend den DIV ( "Kommentare") aktualisiert, wie schaffe ich das nur ?
 
AW: JS Funktioniert nicht eindeutig.

ne mit der in dem div inkludierten datei, die die für die ausgabe zuständig ist.

in kommentare.php wird in die Datenbank geschrieben und "comments.php" gibt die Kommentare aus der DB aus.

Code:
<script type="text/javascript">
      $(document).ready(function(){
        $("#form1").submit(function(e){
          e.preventDefault();

          $.post("kommentieren.php",$("#form1").serialize(),function(msg){
			form1.reset();
          });
        });
      });
    </script>

das funktioniert so leider nicht !? :/
 
AW: JS Funktioniert nicht eindeutig.

So sollte der Reset funktionieren:
Code:
	$(document).ready(function(){
		var form = $("#form1");
		form.submit(function(e){
			e.preventDefault();

			$.post("kommentieren.php", form.serialize(), function(msg){
				form.reset();
				// und so könnte das Aktualisieren aussehen
				$("#Kommentare").load("comments.php");
			});
		});
	});

- - - Aktualisiert - - -

https://api.jquery.com/load/
 
Ich habe doch noch eine Frage ^^, wenn ich nun in dem PHP Script, dass durch JS aufgerufen wird einen Cookie setze, kann ich ihn dann im Anschluss in der JS-Funktion behandeln?

Problem ist nämlich wenn ein Kommentar gegeben wird, aktualisiert er nur den ersten Post, und bei allen anderen kommt nur ne leere Seite. Ich vermute weil die DIVs eben alle gleich heißen ^^ Jetzt bekommen diese Divs von mir eine fortlaufende Nummer angehangen, als Beispiel: "content_1", die ID soll als Cookie gesetzt werden in dem PHP script, welches in die Datenbank schreibt, und anschließend soll das JS genau diesen Cookie auslesen, und dann die Div, die in dem Cookie hinterlegt ist, aktualisieren.

Habt ihr ne Idee?
 
Naja das war nur ein Lösungsgedanke!
Also nochmal zur Verdeutlichung:
Alle Beiträge werden aus der DB geladen in mehreren DIVs:

Content_X also
content_1
content_2
usw...
Wenn man jetzt auf einen dieser Post antwortet, funktioniert das nur beim 1. Beitrag alle nachfolgenden nicht, ich denke das liegt daran, da die Divs unterschiedliche Namen haben, die Funktion aber immer das selbe Div anspricht. Wenn sich PHP und JS eine Variabel teilen können, wäre mir das noch lieber - nichts desto trotz würde mir dabei aber der Lösungsansatz fehlen.

Diese Variable soll halt beim Absenden des Formulars in einem "hidden-feld" mit gegeben werden, um zu wissen, aus welchen DIV der Submit kommt
 
Code:
$(document).ready(function(){
        $("#form1").submit(function(e){
          e.preventDefault();

          $.post("comments_kommentieren.php",$("#form1").serialize(),function(msg){
			form1.reset();
			 
				$("#contentkommentare").load("comments_kommentare.php");

          });
        });
      });

Wo soll denn das bitte rein?
$.post("comments_kommentieren.php",$("#form1").serialize(),function(msg){
hier wird die PHP Datei aufgerufen in der via $_POST alle Felder (auch das Hidden) übermittelt. Von der PHP Datei soll der Value des Hidden Felds aber wieder zurück zur Funktion um hier:
$("#contentkommentare").load("comments_kommentare.php");
bei "contentkommentare" die ID des Posts anzuhängen, also dem Wert des Hiddenfelds. Ich bin echt kein Java Freak - deswegen frage ich !
 
Du kannst im PHP-Skript doch einfach den Wert des Feldes ausgeben lassen. Dann hast du ihn in msg drin. Kein Grund hier Cookies zu verwenden.
 
Zurück
Oben