[PHP]Hilfe mit JQuery und Button Senden

Page 1 of 2

03/01/2014 14:01 EqoTime#1

Moin epvp,

ich lerne zurzeit php (noch recht neu) und wollte mal einfach eine function Addieren schreiben. So das funktioniert auch in einer normalen .php datei.

Wenn ich sie zb in meine JQuery anwendung (auch .php) reinkopiere und es so starte funktioniert es einfach nicht :( bin am verzweifeln.

Ich will einfach nur das, dass Ergebnis nach dem Submit Button direkt unter das Submit Button erscheint.

Bild:

Spoiler

Mein Code:

index.php

Spoiler

addieren.php

Spoiler

Danke schonmal im Vorraus

MfG

03/01/2014 14:58 Kexzwerg#2

Code:

 $('#submitbutton').on('click', function(){
    $.ajax({
      type: "POST",
      url: "addieren.php",
      data: { "value1" : $('#zahl1').val(), "value2" : $('#zahl2').val() },
      success: function(data) {
        $('#ergebnis').html(data);
      }
    });
    return false;
  });

In eine neue JavaScript Datei und "submitbutton" als ID an deinen Button

Code:

$zahl1 = $_POST['value1'];
$zahl2 = $_POST['value2'];
$ergebnis = $zahl1 + $zahl2;
echo $ergebnis;

in deine addieren.php

Code:

Ergebnis: <span id="ergebnis" ></span>

an die dementsprechende Stelle in deiner index.php

JavaScript Datei mit dem AJAX-Call in nat�rlich oben im Header noch einbinden. Dann sollte es funktionieren wie du das m�chtest.

Geht bestimmt auch einfacher oder sch�ner, aber in blankem PHP ist mir das als erstes eingefallen

Zum Nachlesen =>[Only registered and activated users can see links. Click Here To Register...]

03/01/2014 15:19 EqoTime#3

funktioniert wieder nicht jetzt kommt einfach nach dem klick eine blanke [Only registered and activated users can see links. Click Here To Register...] seite.

03/01/2014 16:16 Mikesch01#4

HTML Code:

<input type="submit" name="submitbtn" onclick="return false;" value="Addieren">

Glaube das m�sste das Absenden des Formulars abfangen, bin mir aber nicht sicher ob das reicht.

03/01/2014 16:19 EqoTime#5

Damit macht sich garnichts also man kann die ganze zeit aufs button klicken passiert garnichts.

MfG

03/01/2014 16:41 Mikesch01#6

Mit dem Code von Kexzwerg brauchst du dann folgendes:

HTML Code:

<input type="submit" name="submitbtn" id="submitbutton" value="Addieren">

03/01/2014 16:42 Kexzwerg#7

Quote:
Originally Posted by Mikesch01
HTML Code:
<input type="submit" name="submitbtn" onclick="return false;" value="Addieren">
Glaube das m�sste das Absenden des Formulars abfangen, bin mir aber nicht sicher ob das reicht.

Ne, das "return false;" im ajax call macht das gleiche^^

Hast du den JavaScript schnipsel auch richtig "eingepackt"?

Code:

$(function(){
 $('#submitbutton').on('click', function(){
    $.ajax({
      type: "POST",
      url: "addieren.php",
      data: { "value1" : $('#zahl1').val(), "value2" : $('#zahl2').val() },
      success: function(data) {
        $('#ergebnis').html(data);
      }
    });
    return false;
  });^
});

M�sstest du genau so in der JavaScript datei stehen haben.

Code:

$(function(){
});

macht ja nix anderes als "anzugeben", dass das nachfolgende JavaScript jQuery ist ... h�tte ich vielleicht oben schon eintragen sollen^^

Quote:
Originally Posted by Mikesch01
Mit dem Code von Kexzwerg brauchst du dann folgendes:
HTML Code:
<input type="submit" name="submitbtn" id="submitbutton" value="Addieren">

hatte ich ja auch oben geschrieben, dass "submitbutton" als ID an den button muss :)

03/01/2014 16:46 EqoTime#8

So siehts zurzeit bei mir aus funktioniert aber immernoch nicht :( bin am verzweifeln..

index.php

Spoiler

Code:

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Rechnung</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type='text/javascript' src='addieren.js'></script>

</head> 
<body> 

<div data-role="page" id="page">
	<div data-role="header">
		<h1>Rechnungen</h1>
	</div>
	<div data-role="content">	
		<ul data-role="listview">
			<li><a href="#page2">Addition</a></li>
            <li><a href="#page3">Subtraktion</a></li>
			<li><a href="#page4">Multiplikation</a></li>
		</ul>		
	</div>
	<div data-role="footer">
		<h4>Copyright &copy; by EKDesignProductions</h4>
	</div>
</div>

<div data-role="page" id="page2">
	<div data-role="header">
		<a href="#" data-rel="back">Zur�ck</a><h1>Addition</h1>
	</div>
	<div data-role="content">	
    	<form method="POST" action="addieren.php">
		<p>Zahl1: <input type="text" name="zahl1"></p>
        <p>Zahl2: <input type="text" name="zahl2"></p>
        <p><input type="submit" name="submitbtn" value="Addieren" id="submitbutton"></p>
        Ergebnis: <span id="ergebnis" ></span>
        </form>
	</div>
	<div data-role="footer">
		<h4>Copyright &copy; by EKDesignProductions</h4>
	</div>
</div>

<div data-role="page" id="page3">
	<div data-role="header">
		<a href="#" data-rel="back">Zur�ck</a><h1>Subtraktion</h1>
	</div>
	<div data-role="content">	
		Inhalt		
	</div>
	<div data-role="footer">
		<h4>Copyright &copy; by EKDesignProductions</h4>
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<a href="#" data-rel="back">Zur�ck</a><h1>Multiplikation</h1>
	</div>
	<div data-role="content">	
		Inhalt		
	</div>
	<div data-role="footer">
		<h4>Copyright &copy; by EKDesignProductions</h4>
	</div>
</div>

</body>
</html>

addieren.php

Spoiler

addieren.js

Spoiler

03/01/2014 16:49 Kexzwerg#9

Pack deinen JavaScript code in

Code:

$(function(){

});

ein (so wie ich das oben auch noch gemacht habe). Dann sollte es klappen

03/01/2014 16:51 EqoTime#10

habe es grade eingef�gt funktioniert immernoch nicht man kann die ganze zeit draufklicken.
habs auch versucht indem ich ins Button auch noch onclick="function();" reingeschrieben habe. funktioniert nicht :(

03/01/2014 16:53 Kexzwerg#11

Quote:

Originally Posted by karaenes1

habe es grade eingef�gt funktioniert immernoch nicht man kann die ganze zeit draufklicken.
habs auch versucht indem ich ins Button auch noch onclick="function();" reingeschrieben habe. funktioniert nicht :(

Wenn du das onclick an den Button f�gst, wird das JavaScript event aus der JS datei glaube ich �berschrieben.

Ich poste gleich noch mal die kompletten Dateien, wie ich die jetzt habe (bei mir funktionierts n�mlich, habs gerade ausprobiert^^). Bin aber gerade nicht am Mac ...

03/01/2014 16:54 EqoTime#12

Quote:

Originally Posted by Kexzwerg

Wenn du das onclick an den Button f�gst, wird das JavaScript event aus der JS datei glaube ich �berschrieben.

Ich poste gleich noch mal die kompletten Dateien, wie ich die jetzt habe (bei mir funktionierts n�mlich, habs gerade ausprobiert^^). Bin aber gerade nicht am Mac ...

bitte bitte bitteee schick es jetzt xD :D

03/01/2014 17:23 Kexzwerg#13

Ich hab deine index.php etwas gek�rzt. Die Formatierung ist leider beim Copy & Paste durch meinen editor etwas zerw�rfelt worden, davon also nicht irritieren lassen ...

index.php

Spoiler

addieren.php

Spoiler

addieren_script.js

Spoiler

03/01/2014 17:32 EqoTime#14

DANKE <3 hat geklappt hab vergessen die IF abfrage in der php datei zu l�schen. :facepalm:

03/01/2014 17:44 Kexzwerg#15

Tjoa, manchmal sinds auch solche Kleinigkeiten :-) Freut mich, dass es jetzt klappt.

Page 1 of 2