How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Question

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Recently, I completed constructing a lengthy form field where users can enter a plethora of information. This form consists of various text and number fields, radio button sets, and checkbox groups. The data is successfully saved in a Mongo collection without any issues.

My current goal is to create a second page that will display the same HTML form but with all the fields prepopulated using JavaScript. I plan to retrieve the previously entered information from the collection using the object id pass via data context by the router.

Although I understand this should be a simple task, my knowledge of JavaScript is limited at the moment. Despite conducting several searches, I have yet to find a straightforward solution. Any help would be greatly appreciated!

javascript forms mongodb meteor

Answer 1

Answer №1

Retrieve the document that has been added and utilize it within a helper to display the form information in HTML.

Template.templateName.helpers({
  formData:function(){
    return CollectionName.findOne({_id: documenteId});
  }
})

<template name ="templateName">
    {{#with fromData}}
        <form id="detailsForm" method="post">
          <label> Name </label>
          <input type="text" id=""  placeholder="name" value="{{name}}">

          <label> Description</label>
          <textarea  id="" placeholder="Description" >{{description}}</textarea>
           ..
          </div>
        </form>
    {{/with}}
</template>

Answer 2

Retrieve the document that has been added and utilize it within a helper to display the form information in HTML.

Template.templateName.helpers({
  formData:function(){
    return CollectionName.findOne({_id: documenteId});
  }
})

<template name ="templateName">
    {{#with fromData}}
        <form id="detailsForm" method="post">
          <label> Name </label>
          <input type="text" id=""  placeholder="name" value="{{name}}">

          <label> Description</label>
          <textarea  id="" placeholder="Description" >{{description}}</textarea>
           ..
          </div>
        </form>
    {{/with}}
</template>

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Answer №1

Similar questions

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

Encountering ERR_EMPTY_RESPONSE when using the $.POST method

Using Mapbox GL JS to Showcase Latitude and Longitude Coordinates

Implementing Cross-Origin Resource Sharing (CORS) in play-framework version 2.5.x: A Step-by-Step Guide

Locating the initial array within a set of nested arrays

Can you reference document.styleSheets[].cssRules[] by specifying a rule name?

The request's body in the PUT method is void

Is there a way to incorporate the information from PHP files into the output produced by JavaScript?

Is there a way to deactivate the click function in ngx-quill editor for angular when it is empty?

Updating the parent's reference from a child component in Vue 3

Employing the reactive forms approach for validation instead of ngModel logic

Transferring information submitted in a form to a service using AngularJS

Enhance the annotation of JS types for arguments with default values

What steps should I follow to recreate this PHP hashing method in Node.js?

Assign the callback function to execute when the select element loses focus

The preventDefault function fails to work in Firefox

How to delete a specific key-value pair from an object in React.js

dimming of dojo dijit.Dialog

Eliminate the blank choice from X-editable Select

Insert a variable into the URL path of a JavaScript file