Link to home
Start Free TrialLog in
Avatar of ictinus
ictinus

asked on

JavaScript Object Expected in Form Submit With AJAX

I have 2 simple AJAX proccess that I'm trying to get to work together.  they each work fine separetly.  however when I put them together not so much.

the first is tabbed browsing.  I've an index page and when the tabs are pressed it includes content from 'content.php'

the second is a form submit ( where I think the problem is ) here I have form.htm and post.php.  

What I'd like to do is put an include("form.htm"); into my content.php so when you select one of the tabs the form will be displayed ( which works fine ) but when I try to submit the form which is included in content.php called from index.php via AJAX it throws the object expected error.  

// Files
--- Tabls
         Index.php --> AJAX calls content.php
         Content.php --> if (Variable from index.php == something ) { include("form.htm") };

--- Form
         form.htm // attached code
         post.php

Maybe it has to do with referencing the functions from two different places?  or... I don't know.  

The code Snippet if from Form.htm
// Attached code from form.htm 
 
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }
 
   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                    "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value ) +
					"&mytextarea3=" + encodeURI( document.getElementById("mytextarea3").value ) +
					"&mytextarea4=" + encodeURI( document.getElementById("mytextarea4").value ) +
					"&mytextarea5=" + encodeURI( document.getElementById("mytextarea5").value );
      makePOSTRequest('post.php', poststr);
   }
</script>
 
 
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<input type='text' id='mytextarea3' /><br />
<input type='text' id='mytextarea4' /><br />
<input type='text' id='mytextarea5' /><br />
<textarea id="mytextarea1">my test
1
2
3
</textarea>
<textarea id="mytextarea2">my test2
4
5
6</textarea>
<br>
<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>
 
<br><br>
Server-Response:<br>
<hr>
<span name="myspan" id="myspan"></span>
<hr>

Open in new window

Avatar of Emad Gawai
Emad Gawai
Flag of United Arab Emirates image

change
<input type="button" name="button" value="Submit"
   onclick="javascript:get(this.parentNode);">


to

<input type="button" name="button" value="Submit"   onclick="get(this.parentNode);">
Avatar of ictinus
ictinus

ASKER

Still get the same error.  maybe it has something to do with the way I'm including the files?
did it not tell about the line where the error occured? do you have firebug?

anyway, try renaming your button. also, if you are trying to refer to the form instead of this.parentNode use this.form.

<input type="button" name="btnSubmit" value="Submit"
   onclick="javascript:get(this.form);">
<input type="submit" name="btnNormalSubmit" value="Normal Submit Button">
Avatar of ictinus

ASKER

Still no good.
Line error happened here:
<input type="button" name="btnSubmit" value="Submit"
   onclick="javascript:get(this.form);">

and I don't have firebug unfortunately... I just turned on the stupid ie display JS debug deal.  it brings up a microsoft debug util and tells me the line and that 'myform' ( which is the name of my form ) is an anonymous function.  if that means anything.  
How about the post.php page's return value, is there a problem with its response? I saved your code as is and created a simple post.php page that just returns Test and it worked fine. Try testing the post.php page independently to see what kind of response you receive, e.g.:

post.php?mytextarea1=my%20test%0D%0A1%0D%0A2%0D%0A3%0D%0A&mytextarea2=my%20test2%0D%0A4%0D%0A5%0D%0A6&mytextarea3=One&mytextarea4=Two&mytextarea5=Three
Avatar of ictinus

ASKER

LordOfPorts, you're right... the code that I've posted does work to it's full extent when it is not linked from another page.  The problem however comes when I have this setup:  

Index.php --> AJAX page that calls Content.php // used for tabbed browsing.  
Content.php --> include("form.htm") // content for the tabs.  

I can post all the code I have if that will help the situation.  I haven't yet as I didn't want to overstate the problem.  Basically I'm working with 3 files... more if you include the CSS to make the tabs and of course post.php.  

I've attached the whole deal if that helps.  like I said I have the tabs that work / and the form that works with output.  I started getting this when I tried to fit all the pieces together.  

Thanks for your responses.  
ahahLib.js.txt
ajax.css.txt
content.php.txt
form.htm.txt
index.php.txt
post.php.txt
ASKER CERTIFIED SOLUTION
Avatar of LordOfPorts
LordOfPorts
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ictinus

ASKER

Thanks for you time looking at my problem in detail I really appreciate it.  
Avatar of ictinus

ASKER

How cool is that?  it works.  you counld not have been more right LordOfPorts.  Thanks a bunch for you help sorry I had trouble explaining my situation. Maybe it's best for me to put all my JS into a Lib file and include it in the main page?  

Once Again Thank you!