document.formname.elementname.value not working in loop

[minitauros]

Hello. I'm not so good at Javascript, but I tried to write some code to obtain some form values and write those to a query string to use in AJAX.

It seems to be working partially, but I don't understand what is going wrong. What happens is that in the for loop the 'document.form_name.form_field_names_array.value' part doesn't seem to return a value. It is worse even: the script completely stops executing at that part. When I remove that part from the line in the for loop, it doesn't stop executing, so I guess that's where the problem is?

function doAjaxForm(url, target_element_id, img_url, form_name, form_field_names)
{
    // Create the GET query string from the form_fields
    form_field_names_array = form_field_names.split(',');

    for(i=0; i<form_field_names_array.length; i++)
    {
        if(i==0)
        {
            query_string = form_field_names_array[i] + '=' + document.form_name.form_field_names_array[i].value;
        }
        else
        {
            query_string += form_field_names_array[i] + '=' + document.form_name.form_field_names_array[i].value;
        }
    }
    
    // Result: something like query_string = field1=value1&field2=value2&etc...

// Rest of the code (the AJAX) is working.

[minitauros]

I kept trying but replacing

query_string = form_field_names_array[i] + '=' + document.form_name.form_field_names_array[i].value;

by

query_string = form_field_names_array[i] + '=' + document.forms[form_name].elements[form_field_names_array[i]].value;

also returns an error, while the same line

document.forms[form_name].elements[element_name].value

BEFORE the start of the for loop, does not return an error.

Try using the jQuery Library (make things a lot easier to write).

jQuery

var elementValue = $('#ElementId').val();

JavaScript

if(document.getElementById('ElementId')){
    var elementValue = document.getElementById('ElementId').value;
}

Your code might work if you do the following (Please note that this is untested code below, also please declare your variables with var, otherwise they are declared as global variables):

function doAjaxForm(url, target_element_id, img_url, form_name, form_field_names)
{
    // Create the GET query string from the form_fields
    var form_field_names_array = form_field_names.split(',');
    var query_string = '';

    for(var i=0; i < form_field_names_array.length; i++)
    {
        query_string += form_field_names_array[i] + '=' + document.getElementById[form_field_names_array[i]].value;
    }

The code above is assuming that the form_field_names_array is an array of field IDs that can be used to reference the fields. Without seeing the HTML and the rest of the code it is hard to say.

[minitauros]

Thank you for your reply, I'll seriously consider to start using JQuery. I solved my problem by using a completely different script:

function doAjaxForm(url, target_element_id, img_url, form_id, form_field_names)
{
    var form_elements = document.getElementById(form_id).elements;
    var query_string = '';

    for(i=0; i<form_elements.length; i++)
    {
        if(i==0)
        {
            if(form_elements[i].name && form_elements[i].value)
                query_string = '?' + form_elements[i].name + '=' + form_elements[i].value;
        }
        else
        {
            if(form_elements[i].name && form_elements[i].value)
                query_string += '&' + form_elements[i].name + '=' + form_elements[i].value;
        }
    }