# Working with forms in Meteor, using selectors for every input

I'm trying to work with forms, and just getting a grasp on JavaScript. Basically I'm unsure if there is a more reusable way to handle forms with Meteor/jQuery.

// Creating a new prayer, including the preview
Template.newPrayer.events({
'click input.save' : function() {
var title = $("#prayer_title"); var prayer =$("#prayer");
var preview_container = $("#prayer_preview"); var currentUser = Meteor.userId(); if( currentUser !== null ) { Prayers.insert({ title: title.val(), prayer: prayer.val(), user: currentUser }); title.val(''); prayer.val(''); preview_container.fadeOut(); } }, // Auto-updating the preview 'keyup #prayer' : function() { var preview_container =$("#prayer_preview");
var preview_formatted = prayer.value.replace(/\n/g,'<br/>');
\$(".preview_text").html(preview_formatted);
}
});


Is there a better way to do this, should my template be laid out in a different way?

<template name="newPrayer">
<h1>{{title}}</h1>
<form id="new_prayer">
<label for="prayer_title" class="item">Title</label>
<input id="prayer_title" class="item" type="text" tabindex="1"/>

<textarea id="prayer" class="item" name="prayer" tabindex="2" required="true" wrap="soft" autofocus="true" cols="60" rows="10"></textarea>
<input type="button" class="save item" value="Save Prayer" tabindex="3" />
</form>
<div id="prayer_preview">
<h2>Preview</h2>
<p class="preview_text"></p>
</div>
</template>


Is there a better way to handle form data and form display, without having selectors for every form element, and then having to clear each one?

It seems like I'm not utilizing the full potential of Meteor's reactivity and templating features. Also open to any other pointers/tips with my code. The code works as is.

P.S. This code is just me learning Meteor/JS and the beginning of a small project.

-
I think you'll want to take a look at github.com/awatson1978/forms-kitchen-sink –  Serkan Durusoy Feb 9 at 16:37