Jump to content

[SOLVED] Validating dynamic form elements


mayfair

Recommended Posts

Hello Guys

 

Im very new to JavaScript and have been learning-as-i-go for the past few weeks on a project ive been working on but ive ran into a bit of an issue with form validation.

 

I have a table which the user can add/remove rows to dynamically using JS with a minimum of 1 and maximum of 4 rows.

 

The problem im having is validating the form because the NAME of each element is an array and I can't figure out how to directly reference it using JS. For example, I have a select box called "currency[]" which is duplicated potentially 4 times (depending on how many rows the user has added to the table) but im not even sure if its possible to reference it using JS without going into that whole child/parent node thing which i'd rather stay away from because im not too familiar with JS!

 

Any help would be greatly appreciated  :-\

Link to comment
Share on other sites

Nevermind, ive sorted it myself.

 

For anyone that wants to know for future reference you need to use getElementByName to reference arrays.

 

e.g. for name="currency[]":

 

var count = document.getElementByName('currency[]');

for (var i = 0; i < count; i++) {
    if (document.myform.elements['currency[]'].checked) {
       do something
    }
} 

Link to comment
Share on other sites

No, you can also reference via the form object. And the code you posted will not work. You are not including "i" in the element to iterrate throguh the fields.

 

var fields = document.forms['formName'].elements['currency[]'];
var fieldCount = fields.length;

for (var i = 0; i < fieldCount; i++) {
    if (fields[i].checked) {
       do something
    }
}

 

You should also keep in mind that since the fields are dynamic, that if there is only ONE field then it is not an array and the above processes will fail. Here is a more thorough process in cse there can be one or many fields:

 

function processCurrency()
{
    //Create object of currency fields
    var currFields = document.forms['formName'].elements['currency[]'];

    if (currFields.length)
    {
        //There are multiple currency fields
        var fieldCount = currFields.length;

        for (var i = 0; i < fieldCount; i++)
        {
            if (fields[i].checked)
            {
               doSomething(currFields[i]);
            }
        }
    }
    else
    {
        //There is only one currency field
        if (currFields.checked)
        {
            doSomething(currFields);
        }
    }

    return;
}

Link to comment
Share on other sites

Thanks mjdamato, your right; I forgot to include the counter in my first post - I got a bit too trigger happy with the editing!

 

Your form object method also looks like it would work, if I run into problems with my current method i'll give that a go  8)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.