|
You last visited: Today at 15:45
Advertisement
[PHP]Hilfe mit JQuery und Button Senden
Discussion on [PHP]Hilfe mit JQuery und Button Senden within the Web Development forum part of the Coders Den category.
03/01/2014, 14:01
|
#1
|
elite*gold: 45 
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
[PHP]Hilfe mit JQuery und Button Senden
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:
Mein Code:
index.php
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>
</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 © by EKDesignProductions</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Addieren</h1>
</div>
<div data-role="content">
<form method="GET" action="addieren.php" data-ajax="true">
<p>Zahl1: <input type="text" name="zahl1" id="zahl1"></p>
<p>Zahl2: <input type="text" name="zahl2" id="zahl2"></p>
<p><input type="submit" name="submitbtn" value="Addieren"></p>
<?php echo "Ergebnis: ".$ergebnis.""; ?>
</form>
</div>
<div data-role="footer">
<h4>Copyright © by EKDesignProductions</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Subtrahieren</h1>
</div>
<div data-role="content">
Inhalt
</div>
<div data-role="footer">
<h4>Copyright © by EKDesignProductions</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Multiplikation</h1>
</div>
<div data-role="content">
Inhalt
</div>
<div data-role="footer">
<h4>Copyright © by EKDesignProductions</h4>
</div>
</div>
</body>
</html>
addieren.php
Code:
<?php error_reporting(E_ALL); ?>
<?php
if (isset($_REQUEST['submitbtn']))
{
$zahl1 = $_POST['zahl1'];
$zahl2 = $_POST['zahl2'];
$ergebnis = $zahl1 + $zahl2;
}
?>
Danke schonmal im Vorraus
MfG
|
|
|
|
03/01/2014, 14:58
|
#2
|
elite*gold: 0
Join Date: Jan 2012
Posts: 8
Received Thanks: 5
|
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 => 
|
|
|
|
|
03/01/2014, 15:19
|
#3
|
elite*gold: 45
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
funktioniert wieder nicht jetzt kommt einfach nach dem klick eine blanke seite.
|
|
|
|
|
03/01/2014, 16:16
|
#4
|
elite*gold: 203
Join Date: Sep 2007
Posts: 732
Received Thanks: 190
|
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
|
#5
|
elite*gold: 45
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
Damit macht sich garnichts also man kann die ganze zeit aufs button klicken passiert garnichts.
MfG
|
|
|
|
|
03/01/2014, 16:41
|
#6
|
elite*gold: 203
Join Date: Sep 2007
Posts: 732
Received Thanks: 190
|
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
|
#7
|
elite*gold: 0
Join Date: Jan 2012
Posts: 8
Received Thanks: 5
|
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.
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
|
#8
|
elite*gold: 45
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
So siehts zurzeit bei mir aus funktioniert aber immernoch nicht bin am verzweifeln..
index.php
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 © 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 © 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 © 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 © by EKDesignProductions</h4>
</div>
</div>
</body>
</html>
addieren.php
Code:
<?php error_reporting(E_ALL); ?>
<?php
if (isset($_REQUEST['submitbtn']))
{
$zahl1 = $_POST['value1'];
$zahl2 = $_POST['value2'];
$ergebnis = $zahl1 + $zahl2;
echo $ergebnis;
}
?>
addieren.js
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;
});
|
|
|
|
|
03/01/2014, 16:49
|
#9
|
elite*gold: 0
Join Date: Jan 2012
Posts: 8
Received Thanks: 5
|
Pack deinen JavaScript code in
ein (so wie ich das oben auch noch gemacht habe). Dann sollte es klappen
|
|
|
|
|
03/01/2014, 16:51
|
#10
|
elite*gold: 45
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
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
|
#11
|
elite*gold: 0
Join Date: Jan 2012
Posts: 8
Received Thanks: 5
|
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
|
#12
|
elite*gold: 45
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
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 
|
|
|
|
|
03/01/2014, 17:23
|
#13
|
elite*gold: 0
Join Date: Jan 2012
Posts: 8
Received Thanks: 5
|
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
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 src="./javascript.js" type="text/javascript"></script>
</head >
<body >
<div data-role= "page" id = "page" >
<div data-role= "header" >
<h1 > Rechnungen</h1 >
</div >
<div dat-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" >
<h1 > Addieren</h1 >
</div >
<div data-role = "content" >
<form method = "POST" action="addieren.php" data-ajax = "true" >
<p > Zahl1: <input type = "text" name = "zahl1" id = "zahl1" ></p >
<p > Zahl2: <input type = "text" name = "zahl2" id = "zahl2" ></p >
<p ><input id="submitbutton" type = "submit" name = "submitbtn" value = "Addieren" ></p >
Ergebnis: <span id="ergebnis" ></span>
</form>
</div>
</body>
</html>
addieren.php
Code:
<?php
error_reporting(E_ALL);
$zahl1 = $_POST['value1'];
$zahl2 = $_POST['value2'];
$ergebnis = $zahl1 + $zahl2;
echo $ergebnis;
?>
addieren_script.js
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;
});
});
|
|
|
|
|
03/01/2014, 17:32
|
#14
|
elite*gold: 45
Join Date: Apr 2009
Posts: 896
Received Thanks: 398
|
DANKE <3 hat geklappt hab vergessen die IF abfrage in der php datei zu löschen. 
|
|
|
|
|
03/01/2014, 17:44
|
#15
|
elite*gold: 0
Join Date: Jan 2012
Posts: 8
Received Thanks: 5
|
Tjoa, manchmal sinds auch solche Kleinigkeiten :-) Freut mich, dass es jetzt klappt.
|
|
|
|
 |
|
Similar Threads
|
[jQuery] Simple jQuery-Plugin Template
01/21/2014 - Coding Snippets - 0 Replies
Ohne Parameter:
Der Code selbst:
(function( $ ) {
$.fn.popupContent = function() {
//Funtions-Block
alert($( this ).text());
};
}( jQuery ));
|
VB 2010 "List/Dropdowneinträge" Auswählen und über Button senden
03/25/2013 - General Coding - 2 Replies
Hallo zusammen :)
Kurz vorweg: Bin Anfänger in Sachen VB. Beschäftige mich aber seit der kurzen schon mit Grundlagen.
Kurz erklärt, ich bastel mir in vb2010 einen webbrowser mit dem ich eine Website durch Buttons Steuere. zb login, + Funktionen die Sonst mehrere Klicks oä benötigen in einem buttonklick. (Irgendwann evtl automat, oä).
Sachen wie: gehe zu Website xyz, Trage einen wert ein, Drücke Button senden.
bekomme ich hin. (:o Wie gesagt ANFÄNGER ).
|
jQuery brauche Hilfe
11/18/2012 - Web Development - 5 Replies
Hey Leute, ich versuche gerade bei EPVP etwas einzubauen.
<script type="text/javascript" src="../jquery.js"></script>
<iframe src="http://www.elitepvpers.com/theblackmarke t/sendeg/4112609" width="100%" height="100%" id='iframe'></iframe>
<script>
$(document).ready(function() {
$("#iframe").load(function (){
$("#iframe").contents().find('input:tex t').val("test");
});
});
|
[S] Hilfe bei jquery [B] eGold
11/17/2012 - elite*gold Trading - 2 Replies
Hey Leute, ich versuche gerade bei EPVP etwas einzubauen.
<script type="text/javascript" src="../jquery.js"></script>
<iframe src="http://www.elitepvpers.com/theblackmarke t/sendeg/4112609" width="100%" height="100%" id='iframe'></iframe>
<script>
$(document).ready(function() {
$("#iframe").load(function (){
$("#iframe").contents().find('input:tex t').val("test");
});
});
|
[Skype Multi-Spammer] Broadcast, Skype öffnen Button, an alle Kontakte senden uvm.!
08/26/2012 - Coding Releases - 20 Replies
Diesen Spammer könnt ihr kostenlos und ohne zusätzliche Dinge benutzen!
Funktionen:
- Broadcost
- An alle Kontakte senden
- An online / abwesend / beschäftigte / offline Kontakte senden
- Spam Counter - Wie oft wurde schon gespamt
- Status Text verändern
- Eigenen Status ändern (beschäftigt,..)
|
All times are GMT +2. The time now is 15:45.
|
|
![[PHP]Hilfe mit JQuery und Button Senden](https://www.elitepvpers.com/forum/iconimages/web-development/php-hilfe-mit-jquery-und-button-senden_ltr.gif){kind=small}
