Question : Passing multiple variables to AJAX

Thought for sure I would find the answer in searching here, but after an hour, I'm giving up...

To make this as simple as possible:

Have a simple form with comments text box. After entering comments, an onchange event calls an ajax request which essentially builds a mailto link.

A couple problem areas.

1. I want to pass a reference id number and a description with the ajax request to be used in building the mailto string.

2. I want to preserve formatting of the text box within the body of the email. Perhaps I should start two questions. Time will tell.

Samples of what I have so far are in the code section. I have tried a few methods of passing the variables, all which don't work. Originally, the variables were just PHP vars but I ended up loading them into hudden form variables, thinking JS could deal with these better. Then I realized I had no idea how to access hiden field vars with JS.

At ths time, I get the email opened up. The subject is missing the two variable values. The body has the textbox data with all line breaks and such removed. Close but no cigar.

Any help you can offer would be appreciated a great deal.

regards
Owen

Code Snippet:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:

===== Begin callinfo.php ========



   


   
      
      
      
         
            Comments:
            
         
         
             
            
         
         
             
            
         
      
   


 
===== End callinfo.php ========
 
 
===== Begin ajaxstuff.php ========
Send Email Response";
   $JSONstr .= "'}";
   $JSONstr .= "]";
   print "$JSONstr" ;
}
 
===== End ajaxstuff.php ========
 
 
===== Begin ajaxcript.js ======
var xmlHttp=null;
 
function fetchData(url,targetElem) {
   xmlHttp=GetXmlHttpObject();
   if (xmlHttp==null) {
      alert ("Your browser does not support AJAX!");
      return false;
   } else {
      //alert ("got in fetchdata!");
   }
   //add random number to avoid cached data
   if( -1==url.indexOf("?") )
      url += "?sid="+Math.random();
   else
      url=url+"&sid="+Math.random();
 
   xmlHttp.onreadystatechange=function(){stateChanged(targetElem);};
   xmlHttp.open("GET",url,true);
   xmlHttp.send('');
}
 
function stateChanged(containerElem) {
   if (xmlHttp.readyState==4) {
      //alert ("got in statechanged!"+containerElem);
 
      switch(containerElem) {
 
         case "to-set-focus-upon-returning":
            // ************ make sure to add div id="whatever" to

*************** var data = null; eval("data =" + xmlHttp.responseText + ";"); //at this point data is an array of objects, so you need to iterate through it for( var i=0; i < data.length; ++i) { document.getElementById(data[i].targetDiv).innerHTML = data[i].html; //alert(data[i].targetDiv) } if ( document.getElementById('countryname').value !='' ) { setTimeout("document.getElementById('civicnumber').focus()",500) } else { setTimeout("document.getElementById('country').focus()",500) } break; default: var data = null; eval("data =" + xmlHttp.responseText + ";"); for( var i=0; i < data.length; ++i) { document.getElementById(data[i].targetDiv).innerHTML = data[i].html; } break; } xmlHttp=null; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } ===== end ajaxcript.js ======

Open in New Window Select All

Answer : Passing multiple variables to AJAX

Attached would be how to call that in your js and pass to the php page based on the below hidden vars

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:

           
           
             var xmlHttp=null;
 
function fetchData(url,targetElem) {
   xmlHttp=GetXmlHttpObject();
   if (xmlHttp==null) {
      alert ("Your browser does not support AJAX!");
      return false;
   } else {
      //alert ("got in fetchdata!");
   }
 
   email_summary = document.getElementById("email_summary").value;
   record_id = document.getElementById("record_id").value;
 
   //add random number to avoid cached data
   if( -1==url.indexOf("?") )
      url += "?email_summary="+email_summary+"&record_id="+record_id+"&sid="+Math.random();
   else
      url=url+"email_summary="+email_summary+"&record_id="+record_id+"&sid="+Math.random();
 
   xmlHttp.onreadystatechange=function(){stateChanged(targetElem);};
   xmlHttp.open("GET",url,true);
   xmlHttp.send('');
}
 
function stateChanged(containerElem) {
   if (xmlHttp.readyState==4) {
      //alert ("got in statechanged!"+containerElem);
 
      switch(containerElem) {
 
         case "to-set-focus-upon-returning":
            // ************ make sure to add div id="whatever" to   ***************
            var data = null;
            eval("data =" + xmlHttp.responseText + ";");
 
            //at this point data is an array of objects, so you need to iterate through it
            for( var i=0; i < data.length; ++i) {
               document.getElementById(data[i].targetDiv).innerHTML = data[i].html;
               //alert(data[i].targetDiv)
            }
 
            if ( document.getElementById('countryname').value !='' ) {
               setTimeout("document.getElementById('civicnumber').focus()",500)
            } else {
               setTimeout("document.getElementById('country').focus()",500)
            }
            break;
         default:
            var data = null;
            eval("data =" + xmlHttp.responseText + ";");
            for( var i=0; i < data.length; ++i) {
               document.getElementById(data[i].targetDiv).innerHTML = data[i].html;
            }
            break;
      }
      xmlHttp=null;
   }
}
 
function GetXmlHttpObject() {
   var xmlHttp=null;
   try {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
   }
   catch (e) {
      // Internet Explorer
      try {
         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   return xmlHttp;
}

           
         

Open in New Window Select All