windowfiles + basic ajax routine

**Met00** · 06-19-2007, 07:16 AM

1) Script Title:
a) DHTML Window widget (v1.03)
b) Basic Ajax Routine (get & post)
2) Script URL (on DD):
a) http://www.dynamicdrive.com/dynamici...ndow/index.htm
b) http://www.dynamicdrive.com/dynamici...jaxroutine.htm
3) Describe problem:

Using DHTML Window widget to open a ajax div that loads a form (this is working at 100%).
Using Basic Ajax Routine (get & post) to try to send the completed data back to the php file on the server.

The form comes up in the windowfiles div just fine.
When the user presses the submit button the windowfiles div goes away.

---
Form Code (excuse the PHP, it just loads the data):

<div name=responsediv id=responsediv><form name="myform" id="myform">
<input type=hidden value="<? echo $parent['email']; ?>" name=email>
<input type=hidden value="<? echo $rvaldata; ?>" name=rcode>
<table width=100% align=center border=0><tr><td align=center><? echo $msg; ?><table border=1 width=90%><tr><td> <center><h2>Parent Data</h2></center><table><tr><td class=rsmalltxt>First Name: </td><td class=smalltxt><input class=smalltxt type=text size=40 name=fname value="<? echo $parent['fname']; ?>"></td></tr><tr><td class=rsmalltxt> Last Name: </td><td class=smalltxt><input class=smalltxt type=text size=40 name=lname value="<? echo $parent['lname']; ?>"></td></tr><tr><td class=rsmalltxt> E-Mail: </td><td class=smalltxt><? echo $parent['email']; ?></td></tr><tr><td class=rsmalltxt> Address: </td><td class=smalltxt><input class=smalltxt type=text size=40 name=addr1 value="<? echo $contact['addr1']; ?>"></td></tr><tr><td class=smalltxt> </td><td class=smalltxt><input class=smalltxt type=text size=40 name=addr2 value="<? echo $contact['addr2']; ?>"></td></tr><tr><td colspan=2> <table><tr><td class=rsmalltxt>City: </td><td class=rsmalltxt><input class=smalltxt type=text size=20 name=city value="<? echo $contact['city']; ?>"></td><td class=rsmalltxt> State: </td><td class=rsmalltxt><input class=smalltxt type=text size=2 name=state value="<? echo $contact['state']; ?>"></td><td class=rsmalltxt> Zip: </td><td class=smalltxt><input class=smalltxt type=text size=10 name=zip value="<? echo $contact['zip']; ?>"></td></tr></table></td></tr><tr><td class=rsmalltxt> Phone: </td><td class=smalltxt><input class=smalltxt type=text size=40 name=phone value="<? echo $contact['phone']; ?>"></td></tr><tr><td class=smalltxt> FAX: </td><td class=smalltxt><input class=smalltxt type=text size=40 name=fax value="<? echo $contact['fax']; ?>"></td></tr><tr><td class=smalltxt> Cell/Other: </td><td class=smalltxt><input class=smalltxt type=text size=40 name=cell value="<? echo $contact['cell']; ?>"></td></tr></table></td></tr></table>
<p><input type=submit value=Submit onclick=""var poststr=createpoststring(); ajaxpack.postAjaxRequest('<? echo $PHP_SELF; ?>', poststr, processGetPost, 'txt'); return false""> <input type=reset value=Reset></td></tr></table></form></td></tr></table></div>

---
Javascript Code
<head>
<script type="text/javascript" src="ddrive/ajaxroutine.js">
/***********************************************
* Basic Ajax Routine- Â© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
function getPostParameters(){
var poststr =
"rcode=" + encodeURI( document.getElementById("myform").rcode.value ) +
"&lname=" + encodeURI( document.getElementById("myform").lname.value ) +
"&fname=" + encodeURI( document.getElementById("myform").fname.value ) +
"&email=" + encodeURI( document.getElementById("myform").email.value ) +
"&addr1=" + encodeURI( document.getElementById("myform").addr1.value ) +
"&addr2=" + encodeURI( document.getElementById("myform").addr2.value ) +
"&city=" + encodeURI( document.getElementById("myform").city.value ) +
"&state=" + encodeURI( document.getElementById("myform").state.value ) +
"&zip=" + encodeURI( document.getElementById("myform").zip.value ) +
"&phone=" + encodeURI( document.getElementById("myform").phone.value ) +
"&cell=" + encodeURI( document.getElementById("myform").cell.value ) +
"&fax=" + encodeURI( document.getElementById("myform").fax.value ) +
"&pid=" + encodeURI( document.getElementById("myform").pid.value ) +
"&cid=" + encodeURI( document.getElementById("myform").cid.value ) +
"&sfname=" + encodeURI( document.getElementById("myform").sfname.value ) +
"&slname=" + encodeURI( document.getElementById("myform").slname.value ) +
"&sage=" + encodeURI( document.getElementById("myform").sage.value ) +
"&sgrade=" + encodeURI( document.getElementById("myform").sgrade.value );
return poststr
}
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
alert(myajax.responseText)
else
alert(myajax.responseXML)
}
}
}
</script>

---

What I want to happen is that the form will either return a response that required fields are missing or the record was updated and they can close the window inside the windowfiles div. I have no idea why the windowsfiles div is closing when I press the submit button.

Any help would be appreciated.

[note: I know I am getting more "values" in the javascript than there are in the form, this same routine will actually process two forms with shared fields, although some fields will be in only one form or the other, so they should be passed back blank.]

**Twey** · 06-19-2007, 12:04 PM

Ouch! If you find yourself repeating code like that, you're doing something wrong.

Code:

function formToQueryString(frm) {
  var r = [];
  for(var i = 0, e = frm.elements, n = e.length; i < n; ++i)
    r.push(encodeURIComponent(e[i].name) + '=' + encodeURIComponent(e[i].value));
  return r.join("&");
}

The major problem, however, is that you haven't actually ever sent the request. We'll need a little more information on that front, I think, like where you actually want this data submitted and in what sort of format the return data will be.

**jscheuer1** · 06-19-2007, 03:45 PM

You might also want to try:

Code:

<form name="myform" id="myform" onsubmit="return false;">

BTW, without an action, your form tag is invalid, but this may or may not be a causative problem in this case.

**Met00** · 06-19-2007, 05:32 PM

Originally Posted by Twey

Ouch! If you find yourself repeating code like that, you're doing something wrong.

Code:

function formToQueryString(frm) {
  var r = [];
  for(var i = 0, e = frm.elements, n = e.length; i < n; ++i)
    r.push(encodeURIComponent(e[i].name) + '=' + encodeURIComponent(e[i].value));
  return r.join("&");
}

The major problem, however, is that you haven't actually ever sent the request. We'll need a little more information on that front, I think, like where you actually want this data submitted and in what sort of format the return data will be.

Thanks for the clean way to create the post string.

As for sending the request...

---
<input type=submit value=Submit onclick=""var poststr=formToQueryString('myform'); ajaxpack.postAjaxRequest('regdata.php', poststr, processGetPost, 'txt'); return false"">
---

So, when the submit button is pressed the form creates the post string and then calls the regdata.php which checks the form and creates a text response. On the return it should call processGetPost

---
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
alert(myajax.responseText)
else
alert(myajax.responseXML)
}
}
}
---

This should display the response in a alert box.
[response being
1) Fields are missing, please correct and re-submit the form
2) Success! Database record update, please close the window. Thank you.
]

**Met00** · 06-19-2007, 05:34 PM

Originally Posted by jscheuer1

You might also want to try:

Code:

<form name="myform" id="myform" onsubmit="return false;">

BTW, without an action, your form tag is invalid, but this may or may not be a causative problem in this case.

with this change (and the one above) the form is no longer closing the div. But the submission is NOT generating a response.

**Met00** · 06-20-2007, 02:42 AM

almost working...

Code:

function formToQueryString(frm) {
  var r = [];
  for(var i = 0, e = frm.elements, n = e.length; i < n; ++i)
    r.push(encodeURIComponent(e[i].name) + '=' + encodeURIComponent(e[i].value));
  return r.join("&");
}

failed when I passed it the form name "myform" presenting the error:
"e has no properties"

when I reverted back to listing each and every field value, it worked.

So, unless I passed the form name wrong (again I'm a LAMP grunt, this javascript is all somewhat new to me) it seems to be functional...

Thanks for the help (and yes, it would have been nice if the loop had worked, it's cleaner code).

**Met00** · 06-20-2007, 02:56 AM

spoke too soon..
testing shows that it works OUTSIDE the div

test:
1) open the div call in another window.
http://www.rkids.com/regdata.php?rva...20070618113542
2) click on the submit button
-- result: returns the error message back as an alert.

YAY!

Test 2:
1) open the main page
http://www.rkids.com/iseesignup2.php...20070618113542
2) go to Step 2 tab
3) click on the link at the bottom of the tab
-- result: opens form in div
4) click on submit button

error message in FF error console is: "getPostParameters is not defined"

limitations of the div? Since I can't view source the page with the window'd div on it (shows the source without the div) am I attempting to break a rule here about loading the javascript function at the time I load the div into the div via the first ajax call? Is there something I am doing that allows this to work in a page that doesn't allow it to work in a div?

**Twey** · 06-20-2007, 01:06 PM

failed when I passed it the form name "myform" presenting the error:
"e has no properties"

You're not meant to pass it a form name, it takes an actual form object reference.

As for your other problem, I can't connect to your server to look (the connection keeps timing out), but it sounds as though the page is actually being loaded before the script, or perhaps the script is inline in the loaded HTML page? If the latter is the case, you'll have to try to execute the contents of all the <script> elements in the loaded page with eval() before using them.

Thread: windowfiles + basic ajax routine

Thread Tools

Search Thread

windowfiles + basic ajax routine

Bookmarks

Bookmarks

Posting Permissions