I want to make it so that when a user clicks on an image in my site, they are redirected to a specific page. I WAS using a submit button for the redirect, but I want to replace it with a custom-designed icon which I have saved as a png.

Here's what I used to have:

    <form method='post' id='back_button' action=''>
        <p class='form-submit'>
            <input name='back_button' type='submit' id='back_button' class='submit button' value= 'Go Back' />
        </p>
    </form>

In functions.php, I have this hooked up like so:

if( isset($_POST['back_button'])) redirect_to_team_page(myapp_get_team_uri($_GET['team_id']));

I want to update the back button so that it displays as a .png. I changed my <input> to be an image type, like this:

    <form method='post' id='back_button' action=''>
        <p class='form-submit'>
           <input name='back_button' type='image' id='back_button' src='back.png'/>
        </p>
    </form>

When I do this, I can't seem to get the form to submit anymore. There must be a better approach, but I can't seem to figure it out.

Any help would be appreciated!

I want to make it so that when a user clicks on an image in my site, they are redirected to a specific page. I WAS using a submit button for the redirect, but I want to replace it with a custom-designed icon which I have saved as a png.

Here's what I used to have:

    <form method='post' id='back_button' action=''>
        <p class='form-submit'>
            <input name='back_button' type='submit' id='back_button' class='submit button' value= 'Go Back' />
        </p>
    </form>

In functions.php, I have this hooked up like so:

if( isset($_POST['back_button'])) redirect_to_team_page(myapp_get_team_uri($_GET['team_id']));

I want to update the back button so that it displays as a .png. I changed my <input> to be an image type, like this:

    <form method='post' id='back_button' action=''>
        <p class='form-submit'>
           <input name='back_button' type='image' id='back_button' src='back.png'/>
        </p>
    </form>

When I do this, I can't seem to get the form to submit anymore. There must be a better approach, but I can't seem to figure it out.

Any help would be appreciated!

• images
• forms
• input

2 Answers 2

You have 2 ids with the same name and the form gets broken, always provide different ids on a page:

<form method='post' id='back_button_form' action=''>
    <p class='form-submit'>
       <input name='back_button_img' type='image' id='back_button_img' src='back.png'/>
    </p>
</form>

I found a much better way. I'm using an < a > tag - which I should have been doing all along!

    <a href='/my-page/'>
        <div class='back_button'>
            <img id='back_button' class='responsive-img' src='back.png'/>
        </div>
    </a>

I'm not sure why I was so stuck on using a form. This is much smoother.