put javascript variable into array and do foreach loop

Question

I assigned a lot of variable in javascript and i wish to store these into array and do the looping like foreach in javascript. How should I do this?

var name=document.forms["form"]["name"].value;
    var email=document.forms["form"]["email"].value;
    var mobile=document.forms["form"]["mobile"].value;
    var q1=document.forms["form"]["q1"].value;
    var q2=document.forms["form"]["q2"].value;
    var q3=document.forms["form"]["q3"].value;
    var l1=document.forms["form"]["logo1"].value;
    var l2=document.forms["form"]["logo2"].value;
    var l3=document.forms["form"]["logo3"].value;
    var p1=document.forms["form"]["photo1"].value;
    var p2=document.forms["form"]["photo2"].value;
    var p3=document.forms["form"]["photo3"].value;

    if ( name == "" ) {
        alert("Please fill up all field to submit!");
        $('#name_error').css({'display': 'block'});
        return false;
    } else if ( email == "" ) {
        alert("Please fill up all field to submit!");
        $('#email_error').css({'display': 'block'});
        return false;
    }

rather use the jquery's validation plugin, as you are already using jquery. — Johan
– Johan, Commented Oct 11, 2013 at 8:50

Annihil · Accepted Answer · 2013-10-11 09:44:40Z

This might do what you want?

var array = [];
array.push({ name: "name", value: document.forms["form"]["name"].value});
array.push({ name: "email", value: document.forms["form"]["email"].value});
array.push({ name: "mobile", value: document.forms["form"]["mobile"].value});
// add other values here ...

array.forEach(function (obj) {
    if (obj.value == "") {
        alert("Please fill up all field to submit!");
        $("#" + obj.name + "_error").css({ "display": "block" });
        return false;
    }
});

Unfortunately, we need to store the name of the element in addition to its value in the array, so we can access the right error-element for it.

You could take a look at http://jqueryvalidation.org/ for validation

EDIT:

// I think we only need the element names and then get the value in the loop
var array = [];
array.push("name");
array.push("email");
array.push("mobile");
// add other values here ...

array.forEach(function (name) {
    if (document.forms["form"][name].value == "") {
        alert("Please fill up all field to submit!");
        $("#" + name + "_error").css({ "display": "block" });
        return false;
    }
});

EDIT 2: According to rene's comment: If the function returns false, there should be no submit. Hope i did everything alright this time ;)

$("#form").on("click", "#submitbutton", function(e) {
    e.preventDefault();
    var submit = true,
        array = [];

    array.push("name");
    array.push("email");
    array.push("mobile");
    // add other values here ...

    array.forEach(function (name) {
        if (document.forms["form"][name].value == "") {
           alert("Please fill up all field to submit!");
            $("#" + name + "_error").css({ "display": "block" });
            submit = false;
            return false;
        }
    });
    return submit;
});

Hi this code is almost there but $("#" + name + "_error").css({ "display": "block" }); dont work where dont show the error message. otherwose works fine!
Thanks, i think i found my mistake. I changed the "name" to "obj.name".
Hi, thanks for it, but i found that, after it return i does show my error message but it refreshed, can you see anything go wrong in my code make the page refresh? im checking now also...
I can take a look, but i think i need your whole function for that. You probably validate after clicking on a button which then sends a post?
You have to store the false in a variabe and return that variable. The return false; you have now is consumed by the array.forEach

Markus · Accepted Answer · 2013-10-11 08:56:42Z

I created a fiddle to show you how to do it: http://jsfiddle.net/markus_b/rtRV3/

HTML:

<form name="form">
    <input type="text" name="name"/>
    <input type="text" name="email"/>
    <input type="text" name="mobile"/>
</form>

JS:

for (var i = 0; i < document.forms["form"].length;i++) {
    if (document.forms["form"][i].value == "")
        alert(document.forms["form"][i].name + " is empty!");
}

Basically you step through all the elements and query if they are empty.

GGJ · Accepted Answer · 2013-10-11 08:59:48Z

This will create an object you could loop through

var values = {
    name: document.forms["form"]["name"].value,
    email: document.forms["form"]["email"].value,
    mobile: document.forms["form"]["mobile"].value,
    q1: document.forms["form"]["q1"].value,
    q2: document.forms["form"]["q2"].value,
    q3: document.forms["form"]["q3"].value,
    l1: document.forms["form"]["logo1"].value,
    l2: document.forms["form"]["logo2"].value,
    l3: document.forms["form"]["logo3"].value,
    p1: document.forms["form"]["photo1"].value,
    p2: document.forms["form"]["photo2"].value,
    p3: document.forms["form"]["photo3"].value
};

for ( var item in values ) {
    console.log( item + ': ' + values[ item ];
    // do something
}

if ( values.email === '' ) {
    // conditional use here
}

Andy897 · Accepted Answer · 2013-10-11 08:51:29Z

-1

var a = 1;
var all = new Array();
for(i=0;i<4;i++)
{
all[i]=a;
a++;
}

Replace 4 with number of fields and a with your document.get Similarly you can access them.

answered Oct 11, 2013 at 8:51

Andy897

7,18312 gold badges58 silver badges93 bronze badges

2 Comments

youaremysunshine Over a year ago

sorry i dont understand what you mean

Andy897 Over a year ago

youaremysunshine (you are not my sunshine :P) .. what part you did not get ?

Collectives™ on Stack Overflow

put javascript variable into array and do foreach loop

4 Answers 4

10 Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

2 Comments

Related