submit φορμας με ajax

[slevinkelevra]

Καλησπερα

 

Προσπαθω να κανω submit μια html φορμα χρησιμοποιωντας ajax, αλλα μαλλον χωρις επιτυχια.

 

Αρχικα να πω οτι ειμαι πρωταρης στην ajax και να ζητησω συγνωμη που θα γινω αναλυτικος, αλλα μαλλον μονο ετσι θα καταλαβετε τι παιζει.

 

Αρχικα εχω javascript οπου μεσα σε μια function περνω επιτυχως το id του αντικειμενου που εκανε κλικ ο χρηστης. Μετα το στελνω στη φορμα. Και τελος καλω μια αλλη function, της ajax για να κανω submit τη φορμα.

 

//paradeigma, perno to id 
var sff = 1;

//gemizo to pedio tis formas
document.getElementById("blah").value=sff;

//kalo tin alli function
submitFormWithAjax();

 

Αυτη ειναι η html φορμα

<form id="hifo" name="hifo" action="map.php" method="post">
<input type="hidden" id="blah" name="blah" />
</form>

 

Απο κατω ακριβως ανοιγω script και βαζω ajax

 

<script>
function GetXmlHttpObject()
 {
 if (window.XMLHttpRequest)
 {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 return new XMLHttpRequest();
 }
 if (window.ActiveXObject)
 {
 // code for IE6, IE5
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 return null;
 }

function submitFormWithAjax(){
var myAjaxPostrequest=new GetXmlHttpObject();
 
var t2lFname=document.hifo.blah.value;

var parameters="para="+t2lFname;

myAjaxPostrequest.open("POST", "map.php", true);
 myAjaxPostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 myAjaxPostrequest.send(parameters);

}

 

Τελος απο κατω απο αυτο εχω php κωδικα

<?php

$blah=$_POST['para'];  

 $queryd='
  SELECT
   pins.p_name 
  FROM
    pins
	WHERE
	pins.p_id='.$blah;
//ktl ktl ktl

Θελω να παρω το value του blah που ξεκινησε ως javascript, μπηκε στη φορμα και μεσω ajax κατεληξε ξανα στο ιδιο αρχειο μεσω post. Θελω να το χρησιμοποιησω στο query. Το κανω με ajax για να μη ξαναφορτωνει η σελιδα. Να τονισω οτι ολα αυτα ειναι στο ιδιο αρχειο (το map.php).

 

Δεν ξερω καν τι να κανω και πως να συνεχισω, πως να πιασω την τιμη που ερχεται απο το request του ajax. Δεν ξερω καν αν αυτη ειναι η σωστη στρατιγικη.

 

Παρακαλω να ειστε αναλυτικοι, απλα και μονο μπας και χαμπαριασω κατι.

 

Ευχαριστω πολυ

[_tasos]

Ο κώδικας που δείχνεις φαίνεται να είναι σωστός. Τι ακριβώς δεν δουλεύει σε σένα;

 

Δοκίμασε να βάλεις το παρακάτω κομμάτι κώδικα πριν το

myAjaxPostrequest.send(parameters);

για να δεις τι απαντάει η ajax κλήση σου.

 

myAjaxPostrequest.onreadystatechange=function()
  {
alert('Ready state=' + xmlhttp.readyState + ' and status=' + xmlhttp.status)
  }

Αν η κλήση γίνεται χωρίς λάθη το ready state πρέπει να είναι 4 και το status 200.

[slevinkelevra]

Κολλαω στο σημειο που πρεπει να πιασω τη μια και μοναδικη μεταβλητη που ηρθε απο ajax και να τη πεταξω στην php μεταβλητη με το ονομα blah.

 

Να γεμισω το παρακατω δηλαδη

$blah=$_POST['para'];  

ωστε να εκτελεστει το query.

 

Οτι παραδειγμα εχω βρει μεχρι τωρα στο διαδικτυο σου λεει πως να εκτυπωσεις την μεταβλητη στην οθονη του χρηστη.

Εγω δε θελω κατι τετοιο, θελω να τη πεταξω στην php μεταβλητη. Και εκει ακριβως κολλαω.

Η

function GetXmlHttpObject

παντως καλειται κανονικα.

 

Ευχαριστω και παλι

[slevinkelevra]

UPDATE

 

Το ολο θεμα χειροτερεψε

 

Απο τη στιγμη που θελω να πιασω μονο μια μεταβλητη, εκανα το εξης με ajax και jQuery

 

//paradeigma, perno epitixos ti metabliti
var sff = 1;

//post me ajax meso jquery
jQuery.post("map.php", { jas : "sff" }, function(data) {
    alert(data);
  });

και παρακατω php

<?php
$blah = $_POST['jas']; 
echo $blah;
echo'test';
 $queryd='
  SELECT
   pins.p_name 
  FROM
    pins
	WHERE
	pins.p_id='.$blah;
// ktl ktl ktl

Ολα βρισκονται στο αρχειο map.php. Στο ΙΔΙΟ αρχειο ομως κανω include με php και το header (ξεχωριστο αρχειο php)

 include_once('header.php');

Μεσα στο header τωρα, υπαρχει ηδη η jQuery σε συνδυασμο με μια αλλη βιλβιοθηκη που παρεχει αυτοματα fallback content για HTML5 (επειδη φτιανχω το site σε HTML5)

 

<!--kodikas tou header-->
<script src="jquery-1.8.2.min.js"></script>	
<script>		
   // set options for html5shiv		
   if(!window.html5){ window.html5 = {}; }		
      window.html5.shivMethods = false;	
</script>	

Οποτε λεω ΟΚ, κανενα προβλημα, υπαρχει ηδη η jQuery, παμε

 

Το θεμα ειναι οτι το post του ajax μεσα στο map δε δουλευει. Κανει alert ΟΛΟ ΤΟ HEADER !!!!!! Κατα τα αλλα, κανενα λαθος στη κονσολα του chrome.

Δοκιμασα να δωσω αλλη εκδοση jquery μεσα στο map, τυπου

<script src="jquery-1.9.0.min.js"></script>	

και δεν εκτελειται τιποτα, η κονσολα του chrome μου λεει "Uncaught TypeError: Cannot call method 'register' of undefined "

Το jquery και την fallback βιβλιοθηκη στο header δε μπορω να τα ξεφορτωθω γιατι δε θα δουλευει το site σε παλιους browser.

 

 

Πονοκεφαλος??? Ειλικρινα θα στησω αγαλμα σε οποιον βρει μια λυση, εχω αγορασει και μαρμαρο απο τωρα.

[_tasos]

Καλή η ιδέα της jQuery, απλοποιεί αρκετά τον κώδικα σου.

 

Το γεγονός ότι γίνεται το alert σημαίνει πως το ajax call λειτουργεί σωστά.

 

Τι δεδομένα θέλεις να πάρεις από το map.php; Κατά πάσα πιθανότητα στο map.php δεν χρειάζεται να κάνεις include το header.

[slevinkelevra]

Ευχαριστω tasos!

Ναι αλλα θα επρεπε να κανει alert τον αριθμο του id, οχι ολο το header. Θελω απλα η php μεταβλητη να περνει τον αριθμο του id (του sff) για να γινει ακολουθως το query. Ολα μεσα στο ιδιο αρχειο. Ειναι λιγο αργα να αλλαξω ολη τη δομη του αρχειου...

 

Και επειδη με jquery εφαγε τη κομπλα της ζωης του , ξαναγυρισα σε απλη javascript/φορμα/ajax. Παμε ξανα

 

 

 

//perno epitixos to id
var sff = 1;
//to stelno forma
document.getElementById("blahhh").value=sff;
//kalo tin sinartisi ajax
loadXMLDoc();

Μετα η ajax

function loadXMLDoc(){
var xmlhttp2;
alert("inside");
var t2lFname=document.getElementById("blahhh").value;
var parb="blahhh="+t2lFname;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp2=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp2.open("POST","map.php",true);
xmlhttp2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp2.send(parb);

xmlhttp2.onreadystatechange=function()
  {
  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
    {
alert("epitixia");
    }
  }


}

Κανει alert και το inside που σημαινει οτι κληθηκε και το epitixia που σημαινει οτι σταλθηκε.

 

Αυτη ειναι η φορμα

<form id="hifo" name="hifo" method="post">
<input type="hidden" id="blahhh" name="blahhh" />
</form>

Και εδω η php

$blah = $_POST['parb']; 
echo $blah;
 $queryd='
  SELECT
   pins.p_name 
  FROM
    pins
	WHERE
	pins.p_id='.$blah;
// ktl ktl

Στην php δεν γινεται τιποτα. Ουτε echo, ουτε query. Στη κονσολα του chrome ειδα οτι γεμιζει κανονικα το parb της ajax. Αρα παιζει καποιο προβλημα στη php?

Εχω ψαξει, εχω τσεκαρει για λαθη και τιποτα. Πιο πανω στο αρχειο εχω και αλλο query. Εχωσα το παραπανω query διπλα στο αλλο και τιποτα. Δεν ξερω ρε παιδια, μαλλον θα πρεπε να δουλευει αλλα αρνηται. Καμια ιδεα? Εχω ακομη το μαρμαρο.....

[_tasos]

Δηλαδή, η map.php είναι η σελίδα μέσα από την οποία κάνεις το ajax call και κάνεις post στον εαυτό της;;

 

Αν ναι, πρέπει να βάλεις άλλο .php αρχείο για να χειρίζεται τα ajax calls, το οποίο αρχείο θα κάνει echo μόνο τα δεδομένα που θέλεις να διαβάσεις, τίποτε περιττό.

[slevinkelevra]

@ _tasos Συμφωνα με το w3schools ( http://www.w3schools.com/ajax/ajax_intro.asp ) δεν ειναι απαραιτητο να εχεις 2 ξεχωριστα αρχεια. No offence κιολας. Ωστοσο εκανα αυτο που ειπες και (μαντεψε) παλι τιποτα!

 

Εβαλα

 error_reporting(E_ALL);

 

οπου εχω php και δε μου γκρινιαζει για κατι.

 

Αν το κανω με απλη φορμα και ανανεωση σελιδας, χωρις ajax, τρεχει μια χαρα. Αρα? Πρεπει να βαλω ajax tags , οπως κανω για την javascript? Δηλαδη οπως ειναι αυτο

 <script type='text/javascript'>

κατι αντιστοιχο και για ajax? Αλλα αν ηταν ετσι, το ajax δε θα δουλευε καν, ουτε θα κανε alerts, σωστα?

 

Μηπως εχει να κανει με ρυθμισεις server?

Τρεχω apache/geoserver/openlayers/postgreSQL. Ολα στο ιδιο λαπτοπ. Πειραξα το αρχειο config του apache ωστε να επικοινωνει ανετα με geoserver (apache 80, geoserver 8080). Δεν ξερω τι αλλο να κανω, το επομενο βημα ειναι η προσευχη και η νηστεια. Αν εχετε καμια ιδεα, πειτε....

 

Ευχαριστω και παλι

[_tasos]

Δεν έχω να σου προτείνω κάτι άλλο. Αν θέλεις να δούμε αυτό που σου πρότεινα και να βρούμε τι φταίει, ευχαρίστως.

 

Υ.Γ. Σχετικά με το w3schools, δες εδώ http://w3fools.com/.

[kastorass]

Αν κατάλαβα καλά το πρόβλημα σου, άλλαξε τον παρακάτω κώδικα:

 

 

 

 

<form id="hifo" name="hifo" method="post">
<input type="hidden" id="blahhh" name="blahhh" />
</form>

 

 

σε

<div id="tks">
  <form id="hifo" name="hifo" method="post">
    <input type="hidden" id="blahhh" name="blahhh" />
  </form>
</div>

 

 

Και το:

 

function loadXMLDoc(){
var xmlhttp2;
alert("inside");
var t2lFname=document.getElementById("blahhh").value;
var parb="blahhh="+t2lFname;


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp2=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp2.open("POST","map.php",true);
xmlhttp2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp2.send(parb);


xmlhttp2.onreadystatechange=function()
  {
  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
    {
alert("epitixia");
    }
  }




}

 

σε:

 

function loadXMLDoc(){
var xmlhttp2;
alert("inside");
var t2lFname=document.getElementById("blahhh").value;
var parb="blahhh="+t2lFname;


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp2=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp2.open("POST","map.php",true);
xmlhttp2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp2.send(parb);


xmlhttp2.onreadystatechange=function()
  {
  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
    {
      document.getElementById("tks").innerHTML=xmlhttp2.responseText;
    }
  }




}

 

 

[slevinkelevra]

Καλησπερα και παλι

Καταρχας να πω οτι ο _tasos ειχε δικιο. Εγω δεν ειχα καταλαβει καλα τη γενικοτερη φιλοσοφια. Χρειαζοντα οντως 2 αρχεια.

 

Το πιο απλο tutorial που βρηκα ειναι αυτο http://wabism.com/ajax-tutorial-with-jquery/

 

Συμφωνα με αυτο, τροποποιησα ξανα τον κωδικα.

 

Μεσα στο map.php εβαλα

 

jQuery.post("testone.php", { jas : sff }, function(data) {
  alert(data);
  });

καθαρη απλη jquery...Να πω οτι το sff εχει τιμη 64.

 

Τωρα το αρχειο testone.php εχει τα εξης

 

<?php
  // Grab the posted data from the AJAX POST method ($.post)
  $jas = $_POST['jas'];
 
  // Validate 
  if($jas == 64) {
    // Print a success response
    print "ok";
	
  } else {
    // Print a denied response
    print "That is incorrect";
  }
?>

Το map.php κανει alert το ok αρα...ok! Βεβαια εχω μια τελευταια ερωτηση.

 

Θελω να περασω το sff (τον αριθμο 64) απο το testone πισω στο map.php σε μια php μεταβλητη πχ.

 

$blah = $_POST[jas]; 

ωστε να ενεργοποιηθει το query. Τα περισσοτερα tutorials που βρηκα δειχνουν πως να περασεις τη μεταβλητη σε html πχ. να τη βαλεις σε ενα div. Εγω θελω να περνα σε php με post ωστε να παρει μπρος το query.

 

Ευχαριστω και παλι.

[Uberalles_gr]

Επειδή διάβασα το post από την αρχή και για να πω την αλήθεια μπερδεύτηκα, εσύ θες από μία φόρμα που έχεις να κάνεις submit την φόρμα και να πηγαίνουν τα δεδομένα σε μια άλλη php αλλά όλο αυτό με ajax;;;

 

Και εάν ναι, για ποιο λόγο το θες ακριβώς αυτό; Τι θα σου χρησιμεύσει;

[slevinkelevra]

@Uberalles_gr Επειδη προκειται για μια και μονο μεταβλητη που θελω να περασω απο javascript σε php, δεν ειναι αναγκη να χρησιμοποιησω ολοκληρη φορμα, αλλα απλη jquery με ajax.  Αυτη η μεθοδος απαιτει 2 αρχεια. Ενα με την jquery (το map.php στη προκειμενη)και ενα αλλο (το testone.php)που δεχεται το post της jquery, το "επεξεργαζεται" και το στλενει πισω (χωρις ανανεωση σελιδας). Τα περισσοτερα tutorial που βρηκα επιστρεφουν τη μεταβλητη σε ενα div της html (αυτο που προτεινει ο kastorass ) ή την κανουν alert. Εγω θελω να την επιστρεψω σε μορφη μεταβλητης php ωστε ακολουθως να ενεργοποιησω ενα query...

 

Ευχαριστω και παλι.

[mad-proffessor]

Aν κατάλαβα καλά χρειάζεσαι μόνο να αποθήκευσεις τη μεταβλητή που θες στο $_SESSION array δε χρειάζεται να κάνεις post δεν υπάρχει λόγος. Το νόημα του ajax είναι να "ρωτάς" ένα σερβερ για μεταβλητές που έδωσε μέσω input ο χρήστης σε μια βάση(συνηθέστερα) και αυτός σου απαντάει ασύγχρονα ενώ παράλληλα ο χρήστης μπορεί να δίνει αλλού το input του,τυπώνοντας την απάντηση σε ένα άλλο αρχείο php και εσύ απλά τη χειρίζεσαι όταν επιστρέψει είτε με innerHTML, είτε με javascript κάπως αλλιώς στην αρχική σου σελίδα(που παίρνει το input του χρήστη).

[slevinkelevra]

@mad-proffessor Δοκιμασα να χρησιμοποιησω $_SESSION.

Εβαλα στο map.php

 

<?php
 error_reporting(E_ALL);
 include_once('header.php');
 session_start(); 
echo $_SESSION['jas'];
?>

//μετα το jquery

jQuery.post("testone.php", { jas : sff }, function(data) {
  alert(data);
  });

και στο testone.php

 

<?php
session_start();  
$_SESSION['jas'] = $_POST['jas']; 
?>

Οπως μαλλον ηδη καταλαβες, για να φανει καθε φορα και διαφορετικο id θα πρεπει να κανω refresh το map.php. Κατι που ηθελα να αποφυγω εξ αρχης. Εκτος αν εννοουσες κατι αλλο, που δεν καταλαβα.