...

View Full Version : AJAX/JS form techniques



besson3c
07-04-2006, 02:03 AM
Hello,

I'm using an Ajax routine to reveal form elements (i.e. load portions of a form that weren't initially loaded upon page load), and I'm wondering what techniques are available to ensure that these fields are included as POST/GET variables upon form submit?

I've been using a javascript onchange/onblur event handler to assign this.value to hidden form elements (<input type = "hidden">), and this works, but I'm wondering if there is an easier technique for doing what I'm trying to do here?


Many thanks in advance for your help!

Beagle
07-05-2006, 08:38 PM
If the fields are already in the form, you don't have to do anything to ensure they end up in the post/get request

If your form fields are initially not in the form, then you should use javascript to form.appendChild(formElement) to get the new form elements in the form's structure, then you don't have to use hidden fields or anything like that.

besson3c
07-06-2006, 04:19 AM
If the fields are already in the form, you don't have to do anything to ensure they end up in the post/get request

If your form fields are initially not in the form, then you should use javascript to form.appendChild(formElement) to get the new form elements in the form's structure, then you don't have to use hidden fields or anything like that.


Perfect, you just hit a home run.... this makes life easier! =)

I Googled form.appendChild though and couldn't find the exact information I was looking for, maybe you could help. The info I would was primarily for creating javascript variables/objects and using these as arguments for form.appendChild. What if I already have a form element rendered (dynamically, via a Javascript call)?

If my form is called "myform" and my field is called "myfield", can I use:

form.appendChild(document.myform.myfield) ?


Thanks again!

besson3c
07-06-2006, 04:49 AM
In other words, if I have not created the form dynamically via something like:

myform=document.createElement("form");

How would I use form.appendChild to attach to an existing form that has already been generated by straight HTML rendered via a JS event handler?

The closest code I've found is the following:



function addField (form, fieldType, fieldName, fieldValue) {
if (document.getElementById) {
var input = document.createElement('INPUT');
if (document.all) { // what follows should work
// with NN6 but doesn't in M14
input.type = fieldType;
input.name = fieldName;
input.value = fieldValue;
}
else if (document.getElementById) { // so here is the
// NN6 workaround
input.setAttribute('type', fieldType);
input.setAttribute('name', fieldName);
input.setAttribute('value', fieldValue);
}
form.appendChild(input);
}
}


However, this complains that "form.appendChild is not a function"

Beagle
07-06-2006, 03:42 PM
appendChild is a method that exists on all HTMLElements, so you need a reference to your form:

var form = document.myform;

then you need a reference to your form field:

var field = document.createElement("input");
OR
field = document.getElementById("idOfInputField");

Then you just call append like so:
form.appendChild(field);

VR2
07-07-2006, 10:26 AM
I seem to recall having a problem (in IE at least) where if you dynamically create form input fields, you can't specify a NAME for the element. Not how you;d expect to be able to anyway. And without a NAME, your field is not very useful when the server comes to try to find it!

You'd expect to be able to do it like this

var field = document.createElement("input");
field.name = "myNewField";

but that doesn't work. You can get around it like this (works for FF too IIRC)

var field = document.createElement("input name='myNewField'");

besson3c
07-07-2006, 03:13 PM
I'm still working through this and I really appreciate all of the posts. I think one of my problems may stem from something else unrelated to the problem at hand, but all of this is still a work-in-progress.

Just for my own understanding though, the createElement stuff is basically a definition of a form element, not an actual request to render anything that the end user would see, right? The language was a little confusing to me at first, as is the object-oriented nature of Javascript.

Beagle
07-07-2006, 03:44 PM
createElement creates an object and gives you a pointer to it. It doesn't do anything with it, so no, it does not render. You have to add it to a visible part of the DOM in order for it to be rendered, hence the need for appendChild



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum