Link html form inputs to javascript objects

Question!

I am still new to all this so I'm probably not using all the correct terminology. I was wondering if it is possible to link javascript objects to html inputs. For instance, I am using http://arshaw.com/fullcalendar/. When I click on a event in the calendar a callback triggers and I'm passed the event object which contains the title, start, end, etc.

In angular one can link an input to an object by means of

<input type="text" name="title" ng-model="event.title">

So if I click on an event it sets the global object "event" to a different object then the value of the "title" input would change to the title of the event that I clicked on. The same with all the other input fields, so I do not manually have to go and change every input with something like:

<script type="text/javascript>
    function clickEvent(event)
    {
         $.('#title').val(event.title);
         ....
    }
</script>

Is this possible in normal javascript/jQuery, and if so where can I get some proper documentation on this?



Answers

You can use jQuery's .on("input", function(){ ... }) event, to get the value of the input and store it in a object, when the value changes.

obj = {};

$("input[name=title]").on("input", function(){  //jquery on input fires every time the input value is changed
    obj["title"] = $(this).val(); // set the obj's title property to the value of the input
});

Here is a fiddle for it!



This video can help you solving your question :)
By: admin