469,306 Members | 1,930 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

AJAX Form Problem??

384 256MB
I have this below code that calls an ajax page my problem is how do i pass the form values into the ajax page? I've tried $_REQUEST but it wont pick them up??

Expand|Select|Wrap|Line Numbers
  1. <form method="post" action="ajax-101-null/" enctype="multipart/form-data">
  2.                 <div class="teamdb_line_wrapper">
  3.                     <div class="teamdb_line_name">Group Name:</div>
  4.                     <div class="teamdb_line_text"><input type="text" id="name" name="name" size="40" maxlength="80" /></div>
  5.                 </div>
  6. </form>
May 8 '09 #1
16 1829
gits
5,390 Expert Mod 4TB
what do you mean with an 'AJAX-page'? an AJAX-call is made with the XMLHttpRequest-object and doesn't need a page or smething similar and you could pass values of the form-fields as params with the request ... have a look here for a basic AJAX-example

kind regards
May 8 '09 #2
ziycon
384 256MB
I'm just not sure how to explain my problem. I have the AJAX working fine. I click submit on the page and the relevant page opens but the $_REQUEST doesn't work on this page. It says that undefined variable?
May 8 '09 #3
gits
5,390 Expert Mod 4TB
as i said ... when you make an AJAX-call to request something at the server you need to add the values to the request ... the form is not posted and so the values are not posted ...

kind regards
May 8 '09 #4
ziycon
384 256MB
Thanks for that. I've added the values into the query using javascipt and it wil create a link like /ajax-101-name;23/
Out of the name;23 string, the first bit is being displayed, but anything after the semi-colon is being stripped, I've tried other characters but i get a page forbidden error??
May 8 '09 #5
gits
5,390 Expert Mod 4TB
?? i think i don't get what you did ... what is that link? and how did you pass the params to the request-object?

kind regards
May 8 '09 #6
Ciary
247 Expert 100+
by 'pass values of the form-fields as params with the request', gits means you need to add them to your URL. on the AJAX-page you'll be able to get them using $_GET

example URL:
Expand|Select|Wrap|Line Numbers
  1. 'yourpage.php?avariable='+document.getElementById('input').value+"&another="+document.getElementById('input2').value
May 8 '09 #7
ziycon
384 256MB
@Ciary
I was using mod_rewrite which was causing issues with the link but got it sorted now. Thanks for the help.
May 8 '09 #8
ziycon
384 256MB
While i have you here, is it possible to pass an image through a link? Or how would you go about it i this situation?
May 8 '09 #9
gits
5,390 Expert Mod 4TB
what do you mean with pass an image? i guess you mean an upload? that needs to be done with a 'normal' file upload ...

kind regards
May 8 '09 #10
ziycon
384 256MB
I know how to upload image through a normal form thats fine, I'm getting very confused when i try to do it with the way i have the ajax setup, any advice on how i would go about it?

Is this possible to upload an image with the way I'm using ajax at the moment?
May 8 '09 #11
gits
5,390 Expert Mod 4TB
hmmm ... i just don't have enough info about your 'setup' or what you mean with that or how you use AJAX at the moment ... may be this link is useful and answers your question?

kind regards
May 8 '09 #12
ziycon
384 256MB
Everything works fine except i don't know how to go about getting the file uploaded??

This is my setup:
Expand|Select|Wrap|Line Numbers
  1. <div id="teamdb_container">
  2.                 <form method="post" onsubmit="getcontent(\'sys/ajaxCalls.php?acid=101&value=\'+document.getElementById(\'name\').value+\'-\'+document.getElementById(\'url\').value+\'-\'+document.getElementById(\'body\').value,\'teamdb_container\')">
  3.                 <div id="teamdb_title">/New Team</div>
  4.                 <div class="teamdb_line_wrapper">
  5.                     <div class="teamdb_line_name">Group Name:</div>
  6.                     <div class="teamdb_line_text"><input type="text" id="name" name="name" size="40" maxlength="80" /></div>
  7.                 </div>
  8.                 <div class="teamdb_line_wrapper">
  9.                     <div class="teamdb_line_name">Website:</div>
  10.                     <div class="teamdb_line_text"><input type="text" id="url" name="url" size="40" maxlength="80" /></div>
  11.                 </div>
  12.                 <div class="teamdb_line_wrapper">
  13.                     <div class="teamdb_line_name">Banner:</div>
  14.                     <div class="teamdb_line_text"><input type="file" name="banner" size="50">
  15.                     <input type="hidden" name="MAX_FILE_SIZE" value="1000000"></div>
  16.                 </div>
  17.                 <div class="teamdb_line_wrapper">
  18.                     <div class="teamdb_line_name">About Us:</div>
  19.                     <div class="teamdb_line_text"><textarea id="body" name="body" rows="10" cols="60"></textarea></div>
  20.                 </div>
  21.                 <div class="teamdb_line_wrapper">
  22.                     <div class="teamdb_line_button"><input type="submit" value="Add New Team" /></div>
  23.                 </div>
  24.                 </form>
  25.             </div>
Then in the ajaxCalls.php file i have:
Expand|Select|Wrap|Line Numbers
  1. if($acid == 101) {
  2.           $value = explode('-',$value);
  3.           if(($value[0]!='') && ($value[1]!='') && ($value[2]!='')) {
  4.               //Query to add to db here
  5.               echo '<div id="teamdb_container">
  6.                       <meta http-equiv="refresh" content="2;url=teamdb.html">
  7.                       <div id="db_add_successful">Team has been added successfully!</div>
  8.                       <div id="redirect_msgs">You will be redirected in 2 seconds...</div>
  9.                     </div>';
  10.           }
  11.           else {
  12.               echo '<div id="teamdb_container">
  13.                 <form method="post" onsubmit="getcontent(\'sys/ajaxCalls.php?acid=101&value=\'+document.getElementById(\'name\').value+\'-\'+document.getElementById(\'url\').value+\'-\'+document.getElementById(\'body\').value,\'teamdb_container\')">
  14.                 <div id="teamdb_title">/New Team</div>
  15.                 <div class="teamdb_line_wrapper">
  16.                     <div class="teamdb_line_name">Group Name:</div>
  17.                     <div class="teamdb_line_text"><input type="text" id="name" name="name" value="'.$value[0].'" size="40" maxlength="80" /></div>
  18.                 </div>
  19.                 <div class="teamdb_line_wrapper">
  20.                     <div class="teamdb_line_name">Website:</div>
  21.                     <div class="teamdb_line_text"><input type="text" id="url" name="url" value="'.$value[1].'" size="40" maxlength="80" /></div>
  22.                 </div>
  23.                 <div class="teamdb_line_wrapper">
  24.                     <div class="teamdb_line_name">Banner:</div>
  25.                     <div class="teamdb_line_text"><input type="file" name="banner" size="50">
  26.                     <input type="hidden" name="MAX_FILE_SIZE" value="1000000"></div>
  27.                 </div>
  28.                 <div class="teamdb_line_wrapper">
  29.                     <div class="teamdb_line_name">About Us:</div>
  30.                     <div class="teamdb_line_text"><textarea id="body" name="body" rows="10" cols="60">'.$value[2].'</textarea></div>
  31.                 </div>
  32.                 <div class="teamdb_line_wrapper">
  33.                     <div class="teamdb_line_button"><input type="submit" value="Add New Team" /></div>
  34.                 </div>
  35.                 </form>
  36.             </div>';
  37.           }
  38.       }
May 8 '09 #13
gits
5,390 Expert Mod 4TB
did you have a look at the link i showed you above? there is an example for exactly that issue ...
May 8 '09 #14
ziycon
384 256MB
Ye, can't seem to get my head round it, I'll have another look. thanks.
May 8 '09 #15
gits
5,390 Expert Mod 4TB
no problem ... simply ask here in case you have specific problems with the shown code there ...

kind regards
May 8 '09 #16
ziycon
384 256MB
Ok, I've gone through the code and I've added it to my code they way that i need it but i just don't under stand what the code is doing so i can't figure out where I'm going wrong!?

So i have:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript" language="javascript">
  4.     var loading_img = '/media/images/layout/loading.gif';
  5.     var loading_msg = ' Loading...';
  6.     var xmlhttp_obj = false;//create the XMLHttpRequest
  7.  
  8.     function ewd_xmlhttp()
  9.     {
  10.         if (window.XMLHttpRequest)
  11.         { // if Mozilla, Safari etc
  12.             xmlhttp_obj = new XMLHttpRequest();
  13.         }
  14.         else if (window.ActiveXObject)
  15.         { // if IE
  16.             try
  17.             {
  18.                 xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
  19.             }
  20.             catch (e)
  21.             {
  22.                 try
  23.                 {
  24.                     xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
  25.                 }
  26.                 catch (e)
  27.                 {
  28.  
  29.                 }
  30.             }
  31.         }
  32.         else
  33.         {
  34.             xmlhttp_obj = false;
  35.         }
  36.  
  37.         return xmlhttp_obj;
  38.     }   //get content via GET
  39.  
  40.     function getcontent(url, containerid)
  41.     {
  42.         var xmlhttp_obj = ewd_xmlhttp();
  43.         document.getElementById(containerid).innerHTML = '<img src="' + loading_img + '" />' + loading_msg;
  44.         xmlhttp_obj.onreadystatechange=function()
  45.         {
  46.             loadpage(xmlhttp_obj, containerid);
  47.         }
  48.         xmlhttp_obj.open('GET', url, true);
  49.         xmlhttp_obj.send(null);
  50.     }     
  51.  
  52.     function loadpage(xmlhttp_obj, containerid)
  53.     {
  54.         if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 )
  55.         {
  56.             document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
  57.         }
  58.     }
  59. //]]>
  60. </script>
  61. <script type="text/javascript" src="sys/js/webtoolkit.aim.js"></script>
  62.     <script type="text/javascript">
  63.         function startCallback() {
  64.             // make something useful before submit (onStart)
  65.             return true;
  66.         }
  67.  
  68.         function completeCallback(response) {
  69.             // make something useful after (onComplete)
  70.             document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
  71.             document.getElementById('r').innerHTML = response;
  72.         }
  73. </script>
  74.  
  75. </head>
  76. <body>
  77. <div id="teamdb_container">
  78.                 <form method="post" onsubmit="return AIM.submit(this, {\'onStart\' : startCallback, \'onComplete\' : completeCallback})">
  79.                 <div id="teamdb_title">/New Team</div>
  80.                 <div class="teamdb_line_wrapper">
  81.                     <div class="teamdb_line_name">Group Name:</div>
  82.                     <div class="teamdb_line_text"><input type="text" id="name" name="name" size="40" maxlength="80" /></div>
  83.                 </div>
  84.                 <div class="teamdb_line_wrapper">
  85.                     <div class="teamdb_line_name">Website:</div>
  86.                     <div class="teamdb_line_text"><input type="text" id="url" name="url" size="40" maxlength="80" /></div>
  87.                 </div>
  88.                 <div class="teamdb_line_wrapper">
  89.                     <div class="teamdb_line_name">Banner:</div>
  90.                     <div class="teamdb_line_text"><input type="file" id="banner" name="form[file]" size="50">
  91.                     <input type="hidden" name="MAX_FILE_SIZE" value="1000000"></div>
  92.                 </div>
  93.                 <div class="teamdb_line_wrapper">
  94.                     <div class="teamdb_line_name">About Us:</div>
  95.                     <div class="teamdb_line_text"><textarea id="body" name="body" rows="10" cols="60"></textarea></div>
  96.                 </div>
  97.                 <div class="teamdb_line_wrapper">
  98.                     <div class="teamdb_line_button"><input type="submit" value="Add New Team" onclick="getcontent(\'sys/ajaxCalls.php?acid=101&value=\'+document.getElementById(\'name\').value+\'-\'+document.getElementById(\'url\').value+\'-\'+document.getElementById(\'banner\').value+\'-\'+document.getElementById(\'body\').value,\'teamdb_container\')" /></div>
  99.                 </div>
  100.                 </form>
  101.             </div>
  102. </body>
  103. </html>
And then it goes here:
Expand|Select|Wrap|Line Numbers
  1. if($acid == 101) {
  2.           $value = explode('-',$value);
  3.           if(($value[0]!='') && ($value[1]!='') && ($value[2]!='') && ($value[3]!='')) {
  4.               //Store to DB query here
  5.                echo '<div id="teamdb_container">
  6.                       <meta http-equiv="refresh" content="2;url=teamdb.html">
  7.                       <div id="db_add_successful">Team has been added successfully!</div>
  8.                       <div id="redirect_msgs">You will be redirected in 2 seconds...</div>
  9.                     </div>';
  10.           }
  11.           else {
  12.               echo '<div id="teamdb_container">
  13.                 <form method="post" onsubmit="return AIM.submit(this, {\'onStart\' : startCallback, \'onComplete\' : completeCallback})">
  14.                 <div id="teamdb_title">/New Team</div>
  15.                 <div class="teamdb_line_wrapper">
  16.                     <div class="teamdb_line_name">Group Name:</div>
  17.                     <div class="teamdb_line_text"><input type="text" id="name" name="name" value="'.$value[0].'" size="40" maxlength="80" /></div>
  18.                 </div>
  19.                 <div class="teamdb_line_wrapper">
  20.                     <div class="teamdb_line_name">Website:</div>
  21.                     <div class="teamdb_line_text"><input type="text" id="url" name="url" value="'.$value[1].'" size="40" maxlength="80" /></div>
  22.                 </div>
  23.                 <div class="teamdb_line_wrapper">
  24.                     <div class="teamdb_line_name">Banner:</div>
  25.                     <div class="teamdb_line_text"><input type="file" id="banner" name="form[file]" size="50">
  26.                     <input type="hidden" name="MAX_FILE_SIZE" value="1000000"></div>
  27.                 </div>
  28.                 <div class="teamdb_line_wrapper">
  29.                     <div class="teamdb_line_name">About Us:</div>
  30.                     <div class="teamdb_line_text"><textarea id="body" name="body" rows="10" cols="60">'.$value[3].'</textarea></div>
  31.                 </div>
  32.                 <div class="teamdb_line_wrapper">
  33.                     <div class="teamdb_line_button"><input type="submit" value="Add New Team" onclick="getcontent(\'sys/ajaxCalls.php?acid=101&value=\'+document.getElementById(\'name\').value+\'-\'+document.getElementById(\'url\').value+\'-\'+document.getElementById(\'banner\').value+\'-\'+document.getElementById(\'body\').value,\'teamdb_container\')" /></div>
  34.                 </div>
  35.                 </form>
  36.             </div>';
  37.           }
  38.       }
May 8 '09 #17

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

31 posts views Thread by Tony | last post: by
5 posts views Thread by Martin | last post: by
5 posts views Thread by lucyh3h | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.