Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX/JS form techniques

    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!

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Beagle
    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!

  • #4
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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"
    Last edited by besson3c; 07-06-2006 at 05:55 AM.

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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);

  • #6
    VR2
    VR2 is offline
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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'");

  • #7
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •