title: calling asp from an SVG click
body: <p>I'm building a soccer field application to help me with stats for my team.  I've used SVG to create the field and place images on the field for each player position.  The players are listed along the right side of the field as image buttons.</p>
  <p>When I click the SVG position image, I need a way to store the id of the image being clicked so that when I click the player button I can assign that player to the SVG position selected.  My code creating the field and the position button is below.  I'm even open to other ideas on how to do this as long as you can point me to code that can be used as an example.  Any assistance with this would be greatly appreciated!</p>
  <pre><code>                &lt;div id=&quot;container&quot; class=&quot;svg-container&quot;&gt;
                      &lt;svg  height=&quot;900&quot; width=&quot;600&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                          &lt;%-- Build the field --%&gt;
                             &lt;%--Field Outline--%&gt;
                                  &lt;rect x=&quot;5&quot; y=&quot;5&quot; rx=&quot;5&quot; ry=&quot;5&quot; width=&quot;510&quot; height=&quot;810&quot; fill=&quot;green&quot; /&gt;
  
                              &lt;%-- Field --%&gt;
                                  &lt;rect x=&quot;10&quot; y=&quot;10&quot; rx=&quot;10&quot; ry=&quot;10&quot; width=&quot;500&quot; height=&quot;800&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot; fill=&quot;green&quot;/&gt;
  
                              &lt;%-- Half --%&gt;
                                  &lt;rect x=&quot;10&quot; y=&quot;10&quot;  width=&quot;500&quot; height=&quot;400&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot; fill=&quot;green&quot; /&gt;
  
                              &lt;%--Center Circle--%&gt;
                                  &lt;circle cx=&quot;250&quot; cy=&quot;410&quot; r=&quot;50&quot; fill=&quot;green&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot;/&gt;
  
                              &lt;%--Top of Field--%&gt;
                                  &lt;%--18 yd box--%&gt;
                                      &lt;rect x=&quot;100&quot; y=&quot;10&quot;  width=&quot;300&quot; height=&quot;100&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot; fill=&quot;green&quot; /&gt;
                                  &lt;%--Goal Box--%&gt;
                                      &lt;rect x=&quot;225&quot; y=&quot;10&quot;  width=&quot;50&quot; height=&quot;25&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot; fill=&quot;green&quot; /&gt;
      
                              &lt;%--bottom of field--%&gt;
                                  &lt;%--18 yd box--%&gt;
                                      &lt;rect x=&quot;100&quot; y=&quot;710&quot;  width=&quot;300&quot; height=&quot;100&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot; fill=&quot;green&quot;/&gt;
                                  &lt;%--Goal Box--%&gt;
                                      &lt;rect x=&quot;225&quot; y=&quot;785&quot;  width=&quot;50&quot; height=&quot;25&quot; stroke=&quot;white&quot; stroke-width=&quot;5&quot; fill=&quot;green&quot; /&gt;
  
                              &lt;%--Place the Players--%&gt;
  
                                  &lt;rect id=&quot;lfbtn&quot; class=&quot;btn&quot; fill=&quot;transparent&quot; x=&quot;20&quot; y=&quot;400&quot; width=&quot;50&quot; height=&quot;50&quot; onclick=&quot;position(this.id);&quot; /&gt;
  
                                  
                      &lt;/svg&gt;
                  &lt;/div&gt;
  </code></pre>