I am quite good in jQuery, but Angular is not (yet!) one of my strongest skills. I have the below JSFiddle in jQuery, but now it turns out I can't use jQuery, so I am forced to use Angular.
http://jsfiddle.net/eAt6Q/1/
What I want to do, is to show a button after typing something in an input field and removing it when the input field is blank (so at the initial state or when backspacing and there is no letter left), just like in the example.
How would I do this? How do I bind a button to a keypress, because I am struggling to find that out.
I have tried something like this:
<input type="text" id="testInput" />
<button ng-if="testInput.length"></button>
<input type="text" id="testInput" />
<button ng-hide="testInput.length"></button>
But this is not working and I know for sure I am doing something wrong.
ng-model is all you need in angular
<input type="text" id="testInput" ng-model="testInput" />
<button ng-show="testInput !== null "></button>
You can use ng-blur for more actions
you can use ng-show or ng-if both to hide the button but ng-if more suitable to hide button from dom
<input type="text" id="testInput" ng-model="testInput" />
<button ng-if="testInput !== null || testInput.length > 0"></button>
or you can also use ng-disabled to disabled the button without hide.
Related
I would like every character entered into my HTML input box to get uppercased. Here's the approach I am trying using the latest Alpine.js available via CDN.
<input
x-data="{myText: '' }"
x-text="myText" type="text"
#keydown="myText.toUpperCase();"
name="myText"
placeholder="Some Text"/>
This seems to have zero effect. What's the right way of doing solving this problem?
There are a couple of things going on. First of all, you're binding to keydown but not assigning your uppercased value to any reactive property. Second is that you probably want to use x-bind:value.
<input
x-data="{myText: '' }"
type="text"
#keyup="myText = $event.target.value.toUpperCase()"
:value="myText"
name="myText"
placeholder="Some Text"/>
I am trying to remove a required attribute from an input on the fly. The general idea is I have a field that is set to required, this field has custom validation with the pattern attribute. When the user clicks a button I am attempting to remove the required field.
I have put together a fiddle here:
https://jsfiddle.net/paulmatos/t1p1wub3/
HTML:
<form>
<input type="text" oninvalid='this.setCustomValidity("Enter a number in the Specified Range");' oninput="try{setCustomValidity('')}catch(e){}" pattern="[0-9]" required="required" name="password" id="password" />
<input type="text" required="required" name="temp" />
<input type="submit" class="btn btn-primary form-control" value="Submit" />
<div class="btn btn-default removeReq">Remove Required</div>
</form>
Jquery:
$('.removeReq').click(function() {
$('#password').removeAttr('required');
});
The issue I am experiencing has to do with the order of submission.
If you click remove required, and then submit the form you will see that it works as intended.
However, if you do those steps in reverse order, click submit first, then remove and try and submit again, you will notice I am still getting the validation error on the first input.
Is there anyway to get around this with this intended functionality, I am trying to get this to work just with the html5 validation.
I did have a look at the fiddle and the only way I could get the behaviour you wanted was by literally detaching, cloning and reinserting the field. Works tho.
$('.removeReq').click(function() {
var password = $('#password').removeAttr('required oninvalid oninput pattern').detach().clone();
$('form').prepend(password);
});
https://jsfiddle.net/t1p1wub3/2/
Think you are getting this due to the code in the oninvalid handler. Try this.
$('.removeReq').click(function() {
$('#password').removeAttr('required oninvalid');
});
You can try this instead of removeAtt():
$('.removeReq').click(function() {
$('#password').prop('required', false);
});
I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>
I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.
I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...
Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.
I need to get the class attribute of checked radio button, with name="radio".
Used the code that's working fine in Firefox, but fails in IE.
val = $('input:radio[name=radio]:checked').attr('class');
How can i accomplish this?
There is no psuedo-class :radio. I think you meant [type=radio].
As comments says, I think you should use type instead of name. But i think you have named your input as radio because you can find this specific input. If you just use type selector you will catch every single selected radio input on page.
<input type="radio" name="radio" class="ey" /> Male<br />
So, if your page have more forms, you should specify a parent or form to avoid conflicts. Set a id for your form and try to find it by form id and radio type like this:
<form id="myForm">
<input type="radio" name="radio" class="ey" /> Male<br />
</form>
val = $("#myform input[type='radio']:checked").attr('class');
I hope it can help you :)
I found a thread, Change an element's class with JavaScript, that is along the lines of what I'm going for, but I don't know how to implement it.
I have a page with 4 input buttons and two CSS styles: "Selected" and "notSelected". One button will be hard coded initially as "Selected". When the user clicks another button, I'd like to programatically iterate through all the buttons (the number of buttons on each page will be between 2 and 10), set the clicked button's class to "Selected", and make sure all the other buttons are set to "notSelected".
I've got the logic down, but I've never done anything with JavaScript before, so I haven't the slightest idea about how to do this. If someone knows of a tutorial/piece of code already out there that does this, please point me in the right direction.
Thanks a ton!
You can go the easy way and use a framework like jQuery that does the hard work for you
As you are new to JavaScript, this might be a bit much, but have you considered using jquery? Take a look at toggleClass(): http://api.jquery.com/toggleClass/
Hi just made a quick script, Hope that helps you. Let me know if you find any problem with the script.
I am using focus event and input box, you may change it as needed.
function doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var inputItems=
mylist.getElementsByTagName("input");
for (i=0; i < inputItems.length;
i++){
document.getElementById(inputItems[i].id).className
= "Notselected"; } document.getElementById(obj.id).className
= "selected"; }
Have a form tag within the div tag id="formDIV"
Have few input tags of type text and onfocus="doSelect(this)"
<body> <div
id="formDiv"> <form
name="testform">
<input type="text"
name="tx1"
id="text1"
onfocus="doSelect(this)"/>
<input type="text"
name="tx2"
id="text2"
onfocus="doSelect(this)"/>
<input type="text"
name="tx3"
id="text3"
onfocus="doSelect(this)"/>
<input type="text"
name="tx4"
id="text4"
onfocus="doSelect(this)"/>
<input type="text"
name="tx5"
id="text5"
onfocus="doSelect(this)"/>
</form> </div>
</body>
this should
help.