Disable click in input in <a> element

Question

I would like to have an input text inside a button like this:

<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" disabled  class="form-control small-input">
Set Budget
</a>

this is the result:

The problem is that when the user clicks on the input text, the reply_click() is triggered. I would it to be triggered ONLY when he clicks on the a element (Set Bid).

How can I do it?

See jsfiddle

EDITED As you can see I want to make it look similar to the buttons in the design as you can see in the JSfiddle

Answer 1

Putting an input inside an a element is invalid HTML. From the spec for a :

Content model:

Transparent , but there must be no interactive content descendant.

input is interactive content, so it cannot appear within an a . Browsers may well choose to rewrite your HTML to put the input after the a to try to make it valid.

So the solution here is not to put an input inside an a . Not only because HTML doesn't allow it (you could work around that with a click handler on a div ), but because it's extremely unusual UX, which will be unfamiliar and likely uncomfortable to users.

---

Having said that, if a browser doesn't relocate the input (or if you replace the a with a div with click handler), you can stop the event from propagating to the a by hooking click on the input and using stopPropgation :

$("a input").on("click", function(e) {
    e.stopPropagation();
}):

I'm not recommending it, though.

Answer 2

In theory you can achieve the effect you're looking for with something like this

$(".setBid").click(function(e){
    var $input = $(this).find("input[type='text']");

    if ($input.is(e.target)
    {
        //do action
    }
})

here's the html

<a class="btn btn-app btn-app-spinner setBid">
    <input type="text" disabled  class="form-control small-input">
    Set Budget
</a>

however, as @TJ said this is NOT valid HTML

Answer 3

This is invalid html! don't do that!

---

If you must, then just stop propagation by handling a click on the input:

 function reply_click(e){ alert("clicked!"); } function input_click(e) { e.stopPropagation(); return false; } 

 <a onclick="reply_click();" class="btn btn-app btn-app-spinner"> <input type="text" class="form-control small-input" onclick="input_click(event)"> Set Budget </a> 

This snippet is not cross-browser safe (tested in chrome). Use jQuery, or handle the way other browsers deal with events.

Answer 4

you can do this:

<div class="btn btn-app btn-app-spinner">
      <input type="text" class="form-control small-input">
      <a onclick="reply_click();" >
          Set Budget
      </a>
</div>

In your fiddle replace your html with the html that I provide on the answer and you will have what you want.

The trick is that adding the same classes that you have in your a to another element they are going to look like similar.

Then if you want your action fired when user clicks on the "set budget", wrap it with the <a>

Answer 5

You should not wrap the input element inside a link.

Instead, the input needs a label (for accessibility, especially screen reader users) and something that functions as a button (a real button element in the code below). Since you don't have a proper label element, I used WAI-ARIA described-by to link the input field with the button.

<form>
<input type="text" class="form-control small-input" 
   aria-describedby="ses-budget" />
<br />
<button type="submit" onclick="reply_click();" 
  class="btn btn-app btn-app-spinner" id="set-budget">Set budget</button>
</form>

Answer 6

You can create a div and use the click on that div. That way you have valid HTML.

 function bid(){ alert('bid'); } function stop(e){ e.stopPropagation(); } 

 div { width:200px; height:60px; background-color:#f93; text-align:center; padding-top:20px; } 

 <div onclick="bid()"> <input type='text' onclick="stop(event)"> <p>bid</p> </div>