2

I have a form and I am trying to build a custom validation for it by iterating over the elements and do whatever needs to be done.

This is my js code so far

$('#createClient').click(function (event) {
    var formData = {
        'clientbrandname': $("#createClientBrand").val(),
        'surveyReferral': $("#createSurveyReferral").val(),
        'GuestReferral': $("#createGuestReferral").val(),
        'email': $("#createInviteEmail").val(),
        'phone': $("#createPhoneNumber").val(),
        'xampAccNumber': $('#createUserLimit').val(),
        'logo': $('#createClientLogo').val(),
        'Template': $('#createRefPage').val(),
        'xampClient': $('#createAmplifierClient').val(),
        'xampActive': $('#createAmpMembership').val(),
        'sReferralID': $('#sReferralID').val(),
        'gReferralID': $('#gReferralID').val()
    };

    $(formData).each(function () {
        alert($(this).val());
    });

});

With this code I am running into an error (i.nodeName is undefined) which I suspect is coming from the part where I am trying to use $(this).val()

Anyone can suggest a solution for this issue?

Improve this question
0

4 Answers 4

Reset to default
3

You are iterating over an object. Therefore you need to call the name value pair in the function.

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array.

JsFiddle

  $.each( formData, function( name, value ) {
        alert(name); //Alerts clientbrandname
        alert(value); //Alerts the value from "$("#createClientBrand").val()"
  });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

It actually alerts 0 and [object Object] and then it exits
This works, but you didn't explain why this is the way he must do it.
Read my answer to see what I meant by explain what he must do.
2

Referring to the jQuery docs located HERE, it states

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

You're trying to use this on an associative array, which cannot be itereated via a a numeric index.

The following is pulled from the jQuery docs page noted above..

var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
$.each( obj, function( i, val ) {
  $( "#" + i ).append( document.createTextNode( " - " + val ) );
});
Improve this answer

3 Comments

There are no classes in JavaScript.
True, it's an associative array. The point was that it still can't iterated via a numeric index.
Associative array is PHP terminology for a Map that uses a hash algorithm for a key. It's actually a JavaScript object.
2

What you really want is this:

$.each(formData, function(key, value) {
  // ...
});

The function $ like in $(...) expects a node or an array of nodes. Then the object it returns has the method #each which iterates over the nodes.

Now there's a general purpose iterator - which the method mentioned above uses - that is $.each. This function expects any array-like object.

The {} object in JavaScript can behave like an array for this purpose.

Now I wonder, did you consider using serializeArray ?

Improve this answer

4 Comments

It would be more beneficial to the reader if you were to explain why this is what he/she really wanted.
You've also degraded the readability of the code by utilizing $.each instead of $(formData).each...
You also haven't actually explained how to use this properly to accomplish what the reader desires.
@Mike This is your opinion, and I merely followed the practice noted in the jQuery documentation.
2

When you pass your JavaScript object to the jQuery constructor ($(...)) you are creating a jQuery object instance. This instance has a length property, which causes the object to act array-like.

According to the jQuery documentation for $.each,

Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1.

This solution won't work for you because you don't have numerical indices.

Instead, you need to use the other form of the $.each function, which can be seen below:

//Just a generic representation of your JavaScript object.
var obj = {
    myKey: 'myValue'
};

$.each(obj, function (key, value) {
    console.log(key); //Outputs 'myKey'
    console.log(value); //Outputs 'myValue'
});

Here, obj has not yet been turned into a jQuery object before iterating over it. It doesn't have a length property, so it won't be treated like an array. Now, the property name will be sent to the callback function as the first parameter, and the value of the property will be sent as the second parameter.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.