Need to make POST when users clicks on a image

Question

Hello guys, im very new at javascript so, this is the question. I need to make a POST action every time a user hit an specific image on the web page, every image send a POST var like "image1=1"...

example: In this page, every time you hit the number to vote, it makes a post action, i need the same but with images and with an explanation of the code. Please help me with the code. Thanks!

Note that IE has an issue when you use buttons with images, so the solution can't be implemented with image buttons.

Answer 1

Since you are new to JavaScript, you might consider using jQuery for this purpose. If so, I suggest reading the API documentation for jQuery.click and jQuery.post.

Answer 2

If I understand your question correctly, javascript is not needed to achieve what you want.

I suggest using a regular button and styling it as an image.

Something like this should work:

input.imgbutton {
  background-image: url(...);
  background-color: inherit;
  border: none; padding: none; margin: none;
  height:32px; width:32px;  
  text-indent:-9999px;
}

Demo here: http://jsbin.com/iwame3/edit

Answer 3

Such problems are solved with a great JavaScript feature called AJAX. A example with the JavaScript Framework Prototype:

<img src="/path/to/image" id="image-1" />
<img src="/path/to/image" id="image-2" />
<img src="/path/to/image" id="image-3" />
<!-- ... etc. -->

<script type="text/javascript">
    var url = '/relative/path/to/send/post/request';

    // Get all images and start observing the click event
    // to start a AJAX request
    $$('img').invoke('observe', function(image) {

        // Extract number from image id
        var id = image.id.match(/\d+$/)[0];

        // Send the request with the post paremeter image=id
        new Ajax.Request(url, {
            method: 'post',
            parameters: {image: id},
            onSuccess: function(response) {
                alert('Jippii, successfully sending post request');
                // ...
            }
        });

    });
</script>

More infos for Ajax.Request: http://api.prototypejs.org/ajax/ajax/request/

Keep in mind, that it's really easy and fast to build such features with JavaScript frameworks (jQuery, Prototype, mootools, etc.).

Answer 4

HTML:

  <form id="radio_form">
   <fieldset>
      <label><input class="myRadio" type="radio" name="color" value="1" checked="checked" />1</label><br />
      <label><input class="myRadio" type="radio" name="color" value="2" />2</label><br />    
      <label><input class="myRadio" type="radio" name="color" value="3" />3</label><br />
      <label><input class="myRadio" type="radio" name="color" value="4" />4</label><br />
      <label><input class="myRadio" type="radio" name="color" value="5" />5</label><br />
      </fieldset>
    </form>

   <br />
   <br />

    <img class="CanVote" src="myImage78007.png" alt="myImage78007">

JavaScript (jQuery):

   var gFileToPostTo='VoteImage.aspx'; //Location of the file you want to send the POST Request to


   function VoteImage(pVote,pImage) {
       $.post(gFileToPostTo, { vote: pVote, image: pImage} ); //We send POST reuqest to the file, which is set above


   }

    $(document).ready(function(){
          $('img .CanVote').click(function() { //if the client, click on one of the image so have class "CanVote"....
              VoteImage(1,$(this).src); // Will it send a POST request to the file that is set above, with a vote 1 

          });

           $('.myRadio').click(function() { //If the client , click on one of the radio buttons ..

              var vote = $(this).val();
              $('img .CanVote').each(function(i) {
                 VoteImage(vote,$(this).src); //Will the vote be sent as POST to the file that has been set above. With the vote they chose to all the images. This is repeated for all images on the page that has CanVote class

              });
           }
    }

For more information on POST in jQuery: http://api.jquery.com/jQuery.post/

Answer 5

There are various answers here using AJAX.

It sounds like you might want to submit a normal form where the page reloads, though, so perhaps this method would be good.

You can use the submit method of a form to submit it, by binding the onclick listener of an anchor element to a function that submits a form.

<a href='#' onclick='cow_submit("zoodle")'><img src='send.gif'></a>
<form method='post' id='formie' action='find_some_action.php'>
  <input type='hidden' id='snoutvar' name='snoutvar' value='snout'>
</form>

<script>
function form_submit(a_var_to_set){
  var form_element=document.getElementById('formie'); //get the element as a JS object
  var snout=document.getElementById('snoutvar'); //get the hidden input element
  snout.value=a_var_to_set; //set the value to whatever you want
  form_element.submit(); //sends the form. the page will reload
  }
</script>