My drop down is not working please help?

help
1

This is my drop down menu it does not set the cat value like i wanted it to. it is probly somthing dumb i have been up for 30 hours i have to get this done thanks

HTML

<template name="postSubmit">

  <div class="form-group {{errorClass 'title'}}">
      <label class="control-label" for="title">Title</label>
      <div class="controls">
          <input name="title" id="title" type="text" value="" placeholder="Name your post" class="form-control"/>
          <span class="help-block">{{errorMessage 'title'}}</span>
      </div>
  </div>


  <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown"><p id="dh">text</p>
          <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" id="ms" tabindex="-1" href="#">mission statement</a></li>
          <li role="presentation"><a role="menuitem" id="pro" tabindex="-1" href="#">programs</a></li>
          <li role="presentation"><a role="menuitem" id="d" tabindex="-1" href="#">divest</a></li>
          <li role="presentation"><a role="menuitem" id="pet" tabindex="-1" href="#">petitions</a></li>
          <li role="presentation"><a role="menuitem" id="n" tabindex="-1" href="#">news</a></li>
      </ul>
  </div>


<div class="form-group {{errorClass 'text'}}">
  <label class="control-label" for="text">Text</label>
  <div class="controls">
       <textarea name="text" id="text" class="form-control" rows="5"></textarea>
      <span class="help-block">{{errorMessage 'text'}}</span>
  </div>
</div>

<input type="submit" value="Submit" class="btn btn-primary"/>

JavaScript

Template.postSubmit.events({

‘submit form’: function(e) {
e.preventDefault();

var cat = "Category";

var catMS = document.getElementById("ms");
var catPRO = document.getElementById("pro");
var catD = document.getElementById("d");
var catPET = document.getElementById("pet");
var catN = document.getElementById("n");


catMS.addEventListener('click', function() {
  cat ="mission statement";
}, false);

catPRO.addEventListener('click', function() {
  cat ="programs";
}, false);

catD.addEventListener('click', function() {
  cat ="divest";
}, false);

catPET.addEventListener('click', function() {
  cat ="petitions";
}, false);

catN.addEventListener('click', function() {
  cat ="news";
}, false);


var post = {
  text: $(e.target).find('[name=text]').val(),
  title: $(e.target).find('[name=title]').val(),
  category:cat
};

var errors = validatePost(post);
if (errors.title || errors.text)
  return Session.set('postSubmitErrors', errors);

Meteor.call('postInsert', post, function(error, result) {
  // display the error to the user and abort
  if (error)
    return throwError(error.reason);
  
  // show this result but route anyway
  if (result.postExists)
    throwError('This link has already been posted');
  
  Router.go('postPage', {_id: result._id});  
});

}
});

2

First off try and fix your markup. It helps with readability.

Second you are using addEventListener. Have a look at the event handling tutorial and the docs on eventmaps

there you can see you can refactor everything to this: (WARNING!!! untested code)
remember to add the <form> tags around the entire form otherwise this will not work

var cat;

Template.postSubmit.events({
  'click #ms' : function(e){
    e.preventDefault();
    cat = 'whatever';
  },
  'click #pro' : function(e){
    e.preventDefault();
    cat = 'whatever';
  },
  'click #d' : function(e){
    e.preventDefault();
    cat = 'whatever';
  },
  'click #pet' : function(e){
    e.preventDefault();
    cat = 'whatever';      
  },
  'click #n' : function(e){
    e.preventDefault();
    cat = 'whatever';
  },
  'submit #formid': function(e) {
    e.preventDefault();

    var post = {
        text: e.target.text.value,
        title: e.target.title.value,
        category:cat
    };

    var errors = validatePost(post);
    if (errors.title || errors.text){
      return Session.set('postSubmitErrors', errors);
   }

   Meteor.call('postInsert', post, function(error, result) {
      // display the error to the user and abort
      if (error){
         return throwError(error.reason);
     }
        // show this result but route anyway
     if (result.postExists){
          throwError('This link has already been posted');
     }  
     Router.go('postPage', {_id: result._id});  
    });
  }
});

let me know if this helps you :wink:

1 Like