Question

I have a form with number of input type images. I need to replace the webpage location to url of the image when a user clicks any image.

form is like,

<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<a href="<?=$url;?>" class="anchor-url"> <input type="image" src="<?=$img;?>" /></a>
 <?
 }
 ?>
 </form>

$img and $url values from database.

My jquery is like,

$("#freeForm").submit(function()
    {
            var Form = { };
            Form['inputFree'] = $("#inputFree").val();

                    Form['freeTOS'] = '1';



              $('.anchor-url').click(function(e){
             e.preventDefault();
              alert($(this).attr('href'));
           });


            $.post('processFree.php', Form, function(data)
            {
                    if(data == "Success")
                    {
                            $("#FreeErrors").html('').hide();
                            swapToPane('paneSuccess');
                            return;
                    }

                    swapToPane('paneFree');
                    $("#FreeErrors").html(data).show();
            });

            return false;
    });

Now I am getting ‘http://au.yahoo.com’ when i click each image. But I want to replace ‘http://au.yahoo.com’ with URL of each image. How can I pass the PHP variable $url to this form?
Any idea?

Thanks!

Answer 1

This should work, if I understood what you were asking for correctly and though I haven’t tried it. Basically you bind the click event to each image, and on click it replaces the window location with the value in the src attribute of the input element being clicked on.

$('input[type=image]').click(function(e){
  e.preventDefault();
  window.location.replace($(this).attr('src'));
});

EDIT

First you should add a class name to your anchor elements:

<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<a href="<?=$url;?>" class="anchor-url"> <input type="image" src="<?=$img;?>" /></a>
 <?
 }
 ?>
</form>

Your JS:

$('.anchor-url').click(function(e){
  e.preventDefault();
  window.location.replace($(this).attr('href'));
});

Notice how I added a class to the anchor links. This can be named almost anything. This gives you the ability to select for those elements with that classname only with jQuery using the $(‘.any-classname’) selector.