Select 2 images from list with JQuery THEN call PHP query

JavaScript
3

The following script allows you to select two images from a list (only three in this example) and then, submit the selection to a php script for further processing. The program transfers information from the clicked image and adds it to a form with hidden elements. When two images have been selected the form is submitted to the server.

HTML

<div id="wrap">
  <p>Click on two images. Your selection will be shown in the address bar appended 
  to the url.</p>
  <p>To start again, reload the original page.</p>
  <img id="B1" src="http://www.allanp.net/AB/B1.jpg" alt="Image 1" width="100" height="100">
  <img id="B2" src="http://www.allanp.net/AB/B2.jpg" alt="Image 2" width="100" height="100">
  <img id="B3" src="http://www.allanp.net/AB/B3.jpg" alt="Image 3" width="100" height="100">
  <p>Images selected: <span id="msg">&nbsp;0&nbsp;</span></p>
  <form name="myForm" method="get" action>
    <p><input id="img-1" type="hidden" name="img-1" value></p>
    <p><input id="img-2" type="hidden" name="img-2" value></p>
  </form>
</div>

I have provide some images to allow you to copy and paste the example so that you can see how it works.
The form method in this example has been set as GET and the form action statement left blank so that the name/value pairs transferred from the form after submitting will be appended to the url of this page in the address bar for you to examine. If you use this script for other purposes, you will need to change the method to POST and add the url of your php file to the form action attribute for it to work properly.

<script type="text/javascript">
 document.getElementById("wrap").onclick=selectThis;
 var msgObj=document.getElementById("msg");
 var counter=0;
 function selectThis(event)
  { event=event || window.event;
    var targElem = event.target || event.srcElement;
    if(targElem.tagName.toLowerCase()=="img")
       { counter++;
         if(counter>=3){ counter=0; return; } // avoids problems with back button
         if(counter==2 && document.myForm["img-1"].value==targElem.id)
          { counter--; 
           return; } // already selected
      // is ok so continue        
         msgObj.innerHTML="&nbsp;"+counter+"&nbsp;";
         document.myForm["img-"+counter].value=targElem.id;    
         if(counter==2){ setTimeout(function(){document.myForm.submit(); }, 2000); }   // pause to show second selection        
     }  }
 </script>

The selectThis() function is the onclick handler of the wrap div holding the images. The part of the script adding the information to the form is:

 document.myForm["img-"+counter].value=targElem.id;

An example of the name/value pair transferred to the form is “img-1=B2”. The whole url looks like this:

…/yourPage.htm?img-1=B1&img-2=B3

To allow you to build this example the CSS is:

body {
    font-family:arial, helvetica, sans-serif;
    font-weight:bold;
    font-size:16px;
    color:#000080;
    text-align:left;
    margin:3px 0px;
}
#wrap {
    width:500px;
    height:500px;
    margin:20px;
}
#wrap img {
    margin-right:5px;
    cursor:pointer;
}
#msg {
    padding:3px;
    background-color:#FF0;
    border:1px solid #000;
}
1 Like