hyperlink not in whole button

Question

I have two buttons on the screen..

 <div class="checksheet">
        <a href="http://some_link" target="_blank">
        <input class="btn btn-large btn-primary" type="button" value='Graph Search'>
      </a>
    </div>
    <div class="nchecksheet">
   <form action="/link" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'   onclick="$('#loading').show();">
    </form>
    <div id="loading" style="display:none; position:relative ;left:860px"><img src="{{ url_for('static', filename='img/newload.gif') }}" alt="" /></div>

</div>

The problem is.. the first button.. has hyper link over a very small part of the button.. whereas the "submit" type button.. is fine..

By fine I mean... that whole "submit" button is clickable.

and in the first part.. just a very tiny strip (top part of button) is clickable...

What am i missing.

the part where you make the button the link itself? http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link — RandomUs1r, Mar 08 '13 at 18:15
@RandomUs1r: As soon as i try that.. the second button vanishes. — frazman, Mar 08 '13 at 18:17

score 2 · Answer 1 · answered Mar 08 '13 at 18:16

2

You are putting an input tag inside an anchor tag which is not possible.

I guess you are using Twitter bootstrap which btn classes can be given too <a> tag too and make them look like buttons, so you can do:

<div class="checksheet">
    <a href="http://some_link" target="_blank" class="btn btn-large btn-primary">
    Graph Search
    </a>
</div>
<div class="nchecksheet">
    <form action="/link" method="POST">
        <input class="btn btn-large btn-primary" type="submit" value="Analyze Topics" onclick="$('#loading').show();">
    </form>
    <div id="loading" class="hide" style="position: relative; left:860px;">
        <img src="{{ url_for('static', filename='img/newload.gif') }}" alt="" />
    </div>
</div>

answered Mar 08 '13 at 18:16

Farid Rn

3,167
5
39
66

Its not working :( yeah its twitter bootstrap – frazman Mar 08 '13 at 18:21
http://jsfiddle.net/faridv/UwMpq/ can you tell me where is the problem? – Farid Rn Mar 08 '13 at 18:23
hmm.. this is weird.. its not working at my end.. :( let me check – frazman Mar 08 '13 at 18:26

score 1 · Answer 2 · answered Mar 08 '13 at 18:30

Try...

<div class="checksheet">
        <input type=button class="btn btn-large btn-primary" onClick="location.href='http://some_link'" value='Graph Search'>
    </div>
     <div class="nchecksheet">
   <input type=button class="btn btn-large btn-primary" onClick="location.href='http://some_link'; onclick="$('#loading').show();" value='Analyze Topics'>
    <div id="loading" style="display:none; position:relative ;left:860px"><img src="{{ url_for('static', filename='img/newload.gif') }}" alt="" /></div>
</div>

hyperlink not in whole button

2 Answers2