I want a button to be disabled unless text is present in a textarea. Here is what I have tried:
<textarea ng-model="shipment_ids"></textarea>
<button ng-click="do_something" ng-disabled="shipment_ids.length"></button>
However, the button is enabled no matter what.
I think you want the opposite of what your code states. Something like:
<textarea ng-model="shipment_ids"></textarea>
<button ng-click="do_something" ng-disabled="!shipment_ids">Click me</button>
Example on JSFiddle here.
Related
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
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.
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
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.
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>
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>
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>
I wanted to only allow the user to be able to press the submit button if the text in the box has syntax like: City=Detroit
I know that to do this according to text length greater than 0 would work like:
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
But how would I only allow the user to submit if the text is like %=% ?
Thanks
You may achieve the following behavior by using regular expression matching as shown as below:
<button type="submit" data-bind="enable: /^\w+=\w+$/.test(itemToAdd())">Add</button>
Please refer to the jsfiddle for working example:
http://jsfiddle.net/zeskysee/umrdz96k/
Every time I submit a form by pressing enter, the click() function on the first <button> in the associated form is getting triggered. The problem (other than the fact that I just find this behavior odd) is that it is literally a click event, indistinguishable from actually clicking on the button. If it triggered the even on my submit button, I'd be fine with it.
The issue is that in this case the first button has nothing to do with the actual form, it's actually in a hidden popup.
So the exact question: Why is this happening? How do I prevent it? How do I distinguish this "fake click" event from a real one?
(this is a very simplified example; actual code is using jQuery (in case jQuery happens to acknowledge this and there is a fix for it), but the actual issue has nothing to do with jQuery)
<form>
<input>
<button onclick="alert('button A click');">Button A</button>
<button onclick="alert('button B click');">Button B</button>
<input type="submit" value="Submit Button">
</form>
http://jsfiddle.net/NexHC/2/
Please, no suggestions to "move the button"
-snip-
Edit
<form>
<input>
<button type="button" onclick="alert('button A click');">Button A</button>
<button type="button" onclick="alert('button A click');">Button B</button>
<input type="submit" onclick="alert('button Submit click');" value="Submit Button">
</form>
Actually I take it back... the reason is a lot more concrete and simple than that. Submit is the default type for <button> as specified by the w3c. Therefore, by leaving the button type attributes blank on your form, you were making three submit buttons and it was picking the first when you hit enter (love the <kbd> styling on this site :P). See here for w3c info and here for the updated fiddle
My advice would be, if the <button> has nothing to do with the form and is also controlling a hidden popup, then take it out of the context of the <form> and place it elsewhere. This would also solve your click issue.
I have a form with text input + gradient-shaded button with onclick='this.form.submit()' (plus some hidden inputs).
In all browsers, clicking on the button works.
In Firefox, if I click Enter while in text input, it submits the form.
In IE, it does nothing.
How can I make it work with IE?
If I remember correctly IE likes having an actual submit button, whether that's an <input type="submit" /> or <button type="submit">submit me</button>. Maybe you can put that in there but "out of sight" so you don't see it..
Create an empty text box, with a style of "visibility:hidden;display:none", this is a known issue
This type of form will always work with "Enter":
<form ...>
...
<input type="submit" ...>
</form>
Make sure you have an input of type submit.
I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>