CODEWITHSUNDEEP
javascripthtml
Brendan Jackson
Brendan Jackson

Reputation: 315

Javascript: how do I take my users input data and turn it into an object?

I have a to-do list that I want I can receive user input on via html text boxes. The information is currently printed under these text boxes in an un-ordered list form after a button is clicked.

Its not perfect, that said I skipped a step, I want to take the strings the user inputs with button click and add them first to this function.

function task(task_text, date, time)

The purpose of this of course is to trade the objects properties throughout the code later.

So, how would I go about taking the information in the text boxes and submit it to the above function on click of the button?

The Fiddle http://jsfiddle.net/brendanjackson/j501hc1k/1/

Upvotes: 0

Views: 50

Answers (2)

Max
Max

Reputation: 2806

Getting the input onclick

To get this input into the function you must listen for the onclick event.

var input_text = document.getElementById('input_text').value;
var input_date = document.getElementById('input_date').value;
var input_time = document.getElementById('input_time').value;

onclick="task(input_text, input_date, input_time);"

how do I take my users input data and turn it into an object?

When your function is called, you can then create an object from the data passed in, like so:

var inputs = [];
function task(task_text, date, time) {
    input.push({
        task_text: task_text,
        date: date,
        time: time
    });
}

or if you are only planning to accept one input, you could just do this:

var obj = {};
function task(task_text, date, time) {
    obj.task_text: task_text,
    obj.date: date,
    obj.time: time
}

Upvotes: 1

Kyle Muir
Kyle Muir

Reputation: 3925

Fiddle: http://jsfiddle.net/KyleMuir/3rh4u7qu/1/

I think this is what you're after:

function task(text, date, time) {
    this.text = text;
    this.date = date;
    this.time = time;
}

function buttonClicked() {
    var myText = document.getElementById('myText');
    var input_text = document.getElementById('input_text').value  ;
    var input_date = document.getElementById('input_date').value  ;
    var input_time = document.getElementById('input_time').value  ;
    var item = new task(input_text, input_date, input_time);
        myText.innerHTML += "<li>"+item.text+" "+item.date+" "+item.time+"</li>";
}

Also, added a slightly more interesting use of your task object here which might be useful from a learning perspective: http://jsfiddle.net/KyleMuir/3rh4u7qu/2/

Upvotes: 1

Related Questions