title: Twitter bootstrap icons and <input type="button>
body: <p>I've trying to put two icons for vote up/down but I'm not sure how exactly to do this. Current code havehasonly two <code>&lt;input type="button"&gt;</code> now need to put icons on them. This is what I try so far:</p>
  
  <pre><code>&lt;div class="btn-votes"&gt;
      &lt;div class="like"&gt;
          &lt;i class="icon-like"&gt; 
              &lt;input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')" '.$up.' /&gt;
          &lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="dislike"&gt;
          &lt;i class="icon-dislike"&gt;
               &lt;input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')" '.$down.' /&gt;
          &lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the AJAX part.</p>
  
  <pre><code>function addVote(image_id,vote_rank) {
      $.ajax({
          url: "add_vote.php",
          data:'image_id='+image_id+'&amp;vote_rank='+vote_rank,
          type: "POST",
      beforeSend: function(){
          $('#links-'+image_id+' .btn-votes').html("&lt;img src='img/loaderIcon.gif' /&gt;");
      },
      success: function(vote_rank_status){
          var votes = parseInt($('#votes-'+image_id).val());
          var vote_rank_status;
          switch(vote_rank) {
              case "1":
              votes = votes+1;
              break;
              case "-1":
              votes = votes-1;
              break;
      }
         console.log(vote_rank_status);
      $('#votes-'+image_id).val(votes);
      $('#vote_rank_status-'+image_id).val(vote_rank_status);
  
          var up,down;
  
          if(vote_rank_status == 1) {
              up="disabled";
              down="enabled";
          }
          if(vote_rank_status == -1) {
              up="enabled";
              down="disabled";
  
          }    
  
          var vote_button_html = '&lt;input type="button" title="Up" id="up" onClick="addVote('+image_id+',\'1\')" '+up+' /&gt;&lt;div class="label-votes"&gt;'+votes+'&lt;/div&gt;&lt;input type="button" title="Down" id="down"  onClick="addVote('+image_id+',\'-1\')" '+down+' /&gt;';    
              $('#links-'+image_id+' .btn-votes').html(vote_button_html);
          }
  
  
      });
      }
  </code></pre>
  
  <p>I'm not sure where is the problem but in web console I see the error</p>
  
  <blockquote>
    <p>ReferenceError: addVote is not defined</p>
  </blockquote>
  
  <p>which I think mean that can't pass <code>onClick</code> event to the AJAX function. So how should those buttons be?</p>
  
  <p>This is the current HTML which is working just fine</p>
  
  <pre><code>&lt;div class="btn-votes"&gt;
      &lt;input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')" '.$up.' /&gt;
      &lt;input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')" '.$down.' /&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>UPDATE: Current code</p>
  
  <pre><code>&lt;div class="btn-votes"&gt;
      &lt;div class="like"&gt;
           &lt;button title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')" '.$up.' /&gt;
                 &lt;i class="icon-like"&gt; &lt;/i&gt;
           &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="dislike"&gt;                                  
            &lt;button title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')" '.$down.' /&gt;
                 &lt;i class="icon-dislike"&gt;&lt;/i&gt;
            &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>