Select 2 images from list with JQuery THEN call PHP query

JavaScript
1

I am trying to create a script that allows the user to select 2 images from a list of 10 images(by clicking on them) and after the 2nd image has been selected a PHP query is called depending on the order of the images selected like: www.example.com/?img1=10&img2=9 (the result if the user clicked the last 2 images from the list)

So basically, the first image will be id 1 and so on until the last image which will be id 10. The images are displayed in a list and the user must select 2 images from that list. Once the user selects the 2nd image a PHP query is called(like above) with the ids of the images selected.

Any suggestions? Please provide code examples.

Thanks,

2

after the second selection make an AJAX request to PHP.

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
4

Thank you.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.