Create new javascript objects with user defined properties

Question

Using Javascript and jquery I want to write code does the following: When the user fills out a html form, a new object is automatically created with properties provided by the user. I have a constructor

function object (prop1, prop2, prop3) {
        this.prop1 = prop1;
        this.prop2 = prop2;
        this.prop3 = prop3;
}

I am obtaining user input with jquery val() like this:

object.prop1 = $('input[name = "input1"]').val();
object.prop2 = $('input[name = "input2"]').val();
object.prop2 = $('input[name = "input3"]').val();

What I misst is I think somewhere between the contructor and the user input. If I want to create a new object I write

 apple = new object (prop1, prop2, prop3);

I want the code to automatically create a new object every time a user fills out the form. I tried to do it with a for loop but I did not succeed. I am a total beginner so I guess I am missing something very basic here. Any advice please?

Why not simply apple = {prop1: prop1, prop2: prop2, prop3: prop3};? — dfsq
– dfsq, Commented Mar 15, 2013 at 13:05
Where is this object supposed to exist? JS objects live in the browser, so your question only makes sense if you expect a single user to fill out the form multiple times (in one browser session). — Alnitak
– Alnitak, Commented Mar 15, 2013 at 13:06
Ain't you missing an event handler on the form submit?You don't have a need for a for loop in this case — user18428
– user18428, Commented Mar 15, 2013 at 13:10

Arun P Johny · Accepted Answer · 2013-03-15 13:06:17Z

1

There is no need to have a constructor

var obj = {};
object.prop1 = $('input[name = "input1"]').val();
object.prop2 = $('input[name = "input2"]').val();
object.prop2 = $('input[name = "input3"]').val();

//Use obj for further processing

answered Mar 15, 2013 at 13:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spb Over a year ago

It would be filled out by a single user multiple times so it is supposed to exist in one browser session. So if I do as Arun P Johny says, how can I refer to the object later? If the user creates three or four object, how do I later refer to them?

Wryte · Accepted Answer · 2013-03-15 13:09:47Z

1

Use jQuery to bind an onsubmit event to your form.

$("[name='FORM_NAME']").submit(function() {
  var newObj = new object();
  newObj.prop1 = $('input[name = "input1"]').val();
  newObj.prop2 = $('input[name = "input2"]').val();
  newObj.prop2 = $('input[name = "input3"]').val();
});

Not entirely sure what you want to do with the object after but this would create it in the scope of the submit function.

answered Mar 15, 2013 at 13:09

Wryte

9153 gold badges10 silver badges24 bronze badges

Comments

Darren · Accepted Answer · 2013-03-15 13:07:32Z

0

Try:

var obj = {};

$("input").each(function() {
   var name = $(this).attr("name");
   obj.name = $(this).val();
});

Then access via: obj.input1

answered Mar 15, 2013 at 13:07

Darren

71.2k24 gold badges141 silver badges146 bronze badges

2 Comments

spb Over a year ago

I think that's what I was looking for, even if I was unable to explain it properly, so thank you!

MaxArt Over a year ago

Maybe you meant obj[name] = ...

techfoobar · Accepted Answer · 2013-03-15 13:10:04Z

0

Not sure why exactly you would want to do it this way, but you can achieve it using the square bracket notation.

function x(a, b) {
    this[a] = a;
    this[b] = b;
    this.list = function() {
       for(var i in this) {
           console.log(i+': '+this[i]);
       }
    }
}
var l = new x('hello', 'world');
l.list();

answered Mar 15, 2013 at 13:10

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Comments

nbrooks · Accepted Answer · 2013-03-15 13:17:38Z

0

JavaScript is capable of working in an OOP paradigm. If what you need really is a custom object, you can do it like this:

var Apple = function Apple(p1, p2, p3) {
    this.p1 = p1;
    this.p2 = p2;
    this.p3 = p3;
};

//...
a = $('input[name = "input1"]').val();
b = $('input[name = "input2"]').val();
c = $('input[name = "input3"]').val();

var obj = new Apple(a,b,c);

answered Mar 15, 2013 at 13:17

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Collectives™ on Stack Overflow

Create new javascript objects with user defined properties

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related