Προς το περιεχόμενο

αποστολή δεδομένων σε php μέσω Ajax


chrism4111

Προτεινόμενες αναρτήσεις

Δημοσ.

Για σας .

 

Το πρόβλημα μου είναι το εξής .

 

Εχω λοιπον μία φορμα στην html οπου αυτή έχει μέσα ενα Input τύπου text.

Ενα κουμπι τύπου button απο διπλα απο το Input.

και ενα submit button.

 

><form name="myForm"><input type="text" name="choise1" /><button type="button">+</button><input type="submit" /></form>

 

Όταν πατάω το κουμπί + τότε με Jquery δημιουργώ ακόμα ένα text και ένα button με + οπου και αυτο εχει event για δημιουργια ας πουμε νέας σειράς.

 

Η λογική που δουλεύει το Jquery είναι κάπως έτσι

 

>
var count = 1;
$(doc).ready(function){
      $('button').live({
         click: function(){
            $('form').append('<input type="text" name="choise"'+count'" /><button type="button">+</button>');
            count++;
}
});
});

 

Τώρα εγώ θέλω με κάποιον τρόπο να στέλνω τα δεδομένα που εμπεριέχονται στα inputs σε ένα script στην PHP με Ajax

πχ σε μια συνάρτηση της Javascript του τύπου

>
    function inputsData(string  choice1, string choice2, ... ,string choiceN )
    {
       .
       .
       .
       xmlhttp.open('POST','function.php?choice1='+choise1+'&....&choiceN ='+choiceN,true);
       xmlhttp.send(); 
    }

Υπάρχει κάποιος τρόπος στο να επιτευχθεί κάτι τέτοιο;

Πιστεύω να έγινα κατανοητός

Δημοσ.

Πατώντας το κουμπί σου θα καλείς την παρακάτω function

>
function myfunction($id)
{
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
   alert ("Browser does not support HTTP Request")
   return
 }

 xmlHttp.open("POST", "myphp.php", true);
 //set t he proper headers:
 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;  charset=UTF-8');
 //send the request with the value of the container in the PHP variable $_POST['foo']
 xmlHttp.send("id="+$id);
 //when I get a response back, run the processMenuXML function
 xmlHttp.onreadystatechange = function ()	{

   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
     var data = xmlHttp.responseText;
     alert(data);		
   }
 }		
}

 

όπου περνάμε στην function την παράμετρο $id, καλούμε με POST την σελίδα myphp.php όπου περνάμε την παράμετρο id και το αποτέλεσμα το βάζουμε στην μεταβλητή data όπου το κάνουμε alert

Δημοσ.

Πατώντας το κουμπί σου θα καλείς την παρακάτω function

>
function myfunction($id)
{
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
   alert ("Browser does not support HTTP Request")
   return
 }

 xmlHttp.open("POST", "myphp.php", true);
 //set t he proper headers:
 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;  charset=UTF-8');
 //send the request with the value of the container in the PHP variable $_POST['foo']
 xmlHttp.send("id="+$id);
 //when I get a response back, run the processMenuXML function
 xmlHttp.onreadystatechange = function ()	{

   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
     var data = xmlHttp.responseText;
     alert(data);		
   }
 }		
}

 

όπου περνάμε στην function την παράμετρο $id, καλούμε με POST την σελίδα myphp.php όπου περνάμε την παράμετρο id και το αποτέλεσμα το βάζουμε στην μεταβλητή data όπου το κάνουμε alert

 

Ωραίο όλο αυτό αλλά στο onclick του button τη βάζουμε ?? αν για παράδειγμα δημιουργήσουμε και γράψουμε αλλα 4 inputs;

onclick="myfunction(????????)"

Δημοσ.

Ακριβώς,

 

στο onclick του button το βάζουμε.

 

Π.χ. μπορούμε να γράψουμε

>
<input type="button" onclick="myfunction('<?php echo $pr_id; ?>', document.ΟΝΟΜΑ_ΦΟΡΜΑΣ.ΟΝΟΜΑ_ΠΕΔΙΟΥ.value , document.getElementById('myid').value);" />

 

Στο κουμπί καλώ την συνάρτηση myfunction και περνάω 3 παραμέτρους.

Η 1η παράμετρο είναι μία μεταβλητή στην php

Η 2η παράμετρος είναι ένα πεδίο στην φόρμα μας

Η 3η παράμετρος είναι η τιμή ενός element με συγκεκριμένο id

Δημοσ.

Ακριβώς,

 

στο onclick του button το βάζουμε.

 

Π.χ. μπορούμε να γράψουμε

>
<input type="button" onclick="myfunction('<?php echo $pr_id; ?>', document.ΟΝΟΜΑ_ΦΟΡΜΑΣ.ΟΝΟΜΑ_ΠΕΔΙΟΥ.value , document.getElementById('myid').value);" />

 

Στο κουμπί καλώ την συνάρτηση myfunction και περνάω 3 παραμέτρους.

Η 1η παράμετρο είναι μία μεταβλητή στην php

Η 2η παράμετρος είναι ένα πεδίο στην φόρμα μας

Η 3η παράμετρος είναι η τιμή ενός element με συγκεκριμένο id

Τωρα είδα την απαντηση αλλα δεν κατάλαβα για ποιον λόγο να κάλεσω καποια μεταβλητη της php αφου αυτή θα ενεργησει μετά την υποβολή.

 

Το θέμα μου δεν είναι πως να στέλνω σταθερό αριθμό μεταβλητων σε μια συναρτηση στην Javascript, αλλα το πως θα στείλω αγνωστο αριθμο δεδομένων σε αυτη την συνάρτηση. Αρα τα inputs μπορει να ειναι αλλες φορες 5 αλλες φορες 2 και αλλες φορες 10 αναλογα με το πόσα choices θέλει ο χρήστης.Μπορω να αποθηκευσω ότι κάνει post μια φορμα σε πινακα array και μετα να στελνω αυτον τον πίνακα;

Πάντα φιλικά. Ισως και να μην καταλαβα σωστα την υποδειξη σου.

Δημοσ.
.Μπορω να αποθηκευσω ότι κάνει post μια φορμα σε πινακα array και μετα να στελνω αυτον τον πίνακα;

 

κατά τη γνώμη μου, ναί

εννοώ με php που κάπως καταλαβαίνω

για τα "απορρυπαντικά" δεν ξέρω

είμαι σχετικά άσχετος! :mrgreen:

 

.

Δημοσ.

Φίλε chrism4111,

 

σου έδειξα ότι καλώντας μία συνάρτηση μπορείς να περάσεις διάφορες παραμέτρους.

 

Δεν είσαι σαφής όμως για να καταλάβουμε και εμείς.

 

Θα έχει checkboxes; Θα έχεις radio buttons; Θα έχεις text;

 

Γενικά αυτό που κάνω εγώ είναι για κάθε φόρμα δημιουργώ και μία τέτοια συνάρτηση, για τον λόγο ότι άλλα πεδία έχω στην μία φόρμα άλλα έχω στην άλλη και πρέπει να ξέρω τι θα περιμένω για να κάνω και τους απαραίτητους ελέγχους.

 

Μην θέλουμε π.χ. σε ένα πεδίο ημερομηνία και ο άλλος μου περάσει "Καλημέρα"

 

Το ελέγχεις βέβαια με javascript αλλά εγώ θέλω να το ελέγχω και όταν ποστάρω τα data μου

Δημοσ.

Φίλε chrism4111,

 

σου έδειξα ότι καλώντας μία συνάρτηση μπορείς να περάσεις διάφορες παραμέτρους.

 

Δεν είσαι σαφής όμως για να καταλάβουμε και εμείς.

 

Θα έχει checkboxes; Θα έχεις radio buttons; Θα έχεις text;

 

Γενικά αυτό που κάνω εγώ είναι για κάθε φόρμα δημιουργώ και μία τέτοια συνάρτηση, για τον λόγο ότι άλλα πεδία έχω στην μία φόρμα άλλα έχω στην άλλη και πρέπει να ξέρω τι θα περιμένω για να κάνω και τους απαραίτητους ελέγχους.

 

Μην θέλουμε π.χ. σε ένα πεδίο ημερομηνία και ο άλλος μου περάσει "Καλημέρα"

 

Το ελέγχεις βέβαια με javascript αλλά εγώ θέλω να το ελέγχω και όταν ποστάρω τα data μου

 

σου ποσταρω τον κώδικα όπως τον έχω διαμορφωσει μέχρι στιγμης

Το εως τώρα Html

 

>
<form>
<fieldset class="createFieldset">
                       <legend class="createLegend">Δημιουργία</legend>
                       <table class="createTable" id="tablechOfChoice">
                       <tbody class="bodyCreateChoices" id="tbodych">
                               <tr id="row1">
                                   <td><input flag="1" type="text" name="choice1" class="inputChoice" id="choiceData1" /></td>
                                   <td><button style="display: none;" type="button" id="buttonchoice1" class="createNewChoice1">+</button></td>
                               </tr>
                       </tbody>
                       <thead>
                               <tr>
                                   <td colspan="2"><label class="createTitle">Τίτλος</label></td>
                               </tr>
                               <tr>
                                   <td colspan="2"><input name="title" type="text"  class="createInputTitle"/></td>
                               </tr>
                               <tr>
                                   <td colspan="2"><label>Επιλογές</label></td>
                               </tr>
                           </thead>
                           
                               <tr>
                                   <input type="submit" />
                               </tr>
                           
                       </table>
                   </fieldset>
</form>

Τα flag που βάζω ειναι για δικούς μου λόγους...

 

 

 

Το εως τωρα Jquery

 

 

>
var nameOftext= 1;
       $(document).ready(function(){
                   $('.createNewChoice1').live({
                       click: function(){
                           if($('.inputChoice:last').val() != '')
                           {
                               nameOftext++;
                               $(this).fadeOut(300);
                               $(this).prev('.remLastChoice1').fadeOut(600); 
                               $('.bodyCreateChoices').append('<tr id="row+'+nameOftext+'" class="row" style="height:0"><td><input flag="'+nameOftext+'" name="choice'+nameOftext+'" value="" type="text" class="inputChoice" id="choiceData'+nameOftext+'" /></td><td><button flag="'+nameOftext+'"  type="button" class="remLastChoice1">-</button> <button style="display:none" id="buttonchoice'+nameOftext+'" type="button" class="createNewChoice1">+</button></td></tr>');
                           }
                           else
                           {
                               $('.inputChoice:last').stop(true,false).animate({backgroundColor:'rgb(238,241,95)'},200);
                           }
                   }   
               });
               $('.remLastChoice1').live({
                  click: function(){
                   var remFlag = $(this).attr('flag');
                       $('.row:last').remove();
                       $('.createNewChoice1:last').fadeIn(600);
                       $('.remLastChoice1:last').fadeIn(600);
                       nameOftext--;
                  } 
               });
               $('.inputChoice').live({
                       keyup:function()
                       {
                           var flag = $(this).attr('flag');
                           if($(this).val() != '')
                           {
                               if(nameOftext == flag)
                               {
                                   $('#buttonchoice'+flag).fadeIn(300);
                               }
                               $(this).stop(true,false).animate({backgroundColor:'rgb(255,255,255)'},200);
                           }
                           if($(this).val() == '')
                           {
                               $('#buttonchoice'+flag).fadeOut(100);
                               $(this).stop(true,false).animate({backgroundColor:'rgb(238,241,95)'},200);
                           }
                           else{}
                       }    
               });
               $('.createNewChoice1,.remLastChoice1').live({
                   mousedown:function()
                   {
                       $(this).animate({backgroundColor:'rgb(0,0,0)',color:'rgb(154,218,135)'},200);
                   },
                   mouseup: function()
                   {
                       $(this).animate({backgroundColor:'rgb(154,218,135)',color:'rgb(0,0,0)'},200);
                   },
                   mouseout: function()
                   {
                       
                       $(this).animate({backgroundColor:'rgb(154,218,135)',color:'rgb(0,0,0)'},200);
                   }
               });
           });

 

 

 

Και μια συμπλιροματική συνάρτηση της Javascript που εφτιαξα μολις τωρα για να αποθηκευω τα input σε ενα array

 

>
function saveData()
           {
               var data = new Array();
               var numberOfRows = $('.tablechOfChoice tr').length - 4;
               var count = 0;
               for(var i = 1;i <= numberOfRows; i++)
               {
                   if(getElementById('choiceData'+(i)).value != '')
                   {
                       data[count] = getElementById('choiceData'+(i)).value;
                       count++;
                   }
               }
           }

 

 

Ολο αυτο μπορει να γίνει και χωρις να έχουμε φορμα ...

 

Δεν με ενδιαφέρει αν ο χρήστης γράψει ημερομηνια νουμερο απλα οτι γράφει θέλω να το αποθηκέυω ουσιαστικά σε μια βαση δεδομένων

Αυτο που θέλω ομως είναι όλο αυτο να γίνετε χωρίς να υπάρχει κάποιο refresh στην σελίδα αλλα να γινεται live.

Δημοσ.

Φίλε μου δεν θα καθήσω να διαβάσω όλο τον κώδικα σου και να σου πω τι να κάνεις..

 

Σου είπα πως μπορείς να κάνεις post τα data σου και να τα αποθηκεύσεις στην βάση σου χωρίς να υπάρχει κάποιο refresh στην σελίδα σου.

 

Ναι μπορεί να δημιουργήσεις έναν πίνακα και να τον ποστάρεις.

 

Και κάτι τελευταίο, όταν ας πούμε έχω μία φόρμα που μπορεί ο άλλος να προσθέσει κάποια επιπλέον elements (text,checkbox,radio) τότε εγώ ΓΝΩΡΙΖΩ σε μία κρυφή μεταβλητή(hidden) πόσα έχει προσθέσει ο χρήστης για να ξέρω τι θα ποστάρω.

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

  • Δημιουργία νέου...