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?

Answer 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

Answer 2

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.

Answer 3

Try:

var obj = {};

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

Then access via: obj.input1

Answer 4

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();

Answer 5

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);