Develop Reference

Change input text to upper case using Alpine.js

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"/>

Disable entire form elements with respect to a state. React

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.

jQuery .select works, but Javascript .select doesnt

I am building a mobile site for a Motorola / IE 6 device.
For some reason that I can not come up with, jQuery's .select() function is working, but directly calling it in javascript is not.
<input type="text" id="lid" value="" class="as_done">
The jQuery way that works is this:
$('#lid').select();
The way that isn't working is this:
document.getElementById('lid').select();
This has me all sorts of confused. Any ideas as to why this is?
EDIT: I am not trying to do anything in jQuery. I am just trying to select the text inside the input box. I shouldn't need jQuery to do this, but the standard way is not working. http://www.w3schools.com/jsref/met_text_select.asp

Interesting change made it work for me. Perhaps this is a bug in windows mobile IE 6?
Consider the following html:
<input type="hidden" id="lid_as" name="lid" value="1">
<input type="text" id="lid" value="" class="as_done">
Calling alert("document.getElementById('lid').name"); resulted in the message lid. This makes me think that it is grabbing the first input box whose ID is actually lid_as.
When I moved the lid_as input below the lid box, the select function works properly.
So this HTML made it work:
<input type="text" id="lid" value="" class="as_done">
<input type="hidden" id="lid_as" name="lid" value="1">
Again, this question is in relation to WINDOWS MOBILE IE 6.

$() function returns a jquery object whereas document.getElementById returns a simple DOM object.

maybe it happens due to the fact you did not call .focus() in advance
document.getElementById('lid').focus();
document.getElementById('lid').select();
this is wrapped in jQuerys .select()

JS/HTML onChange

with similar question. :)
<input type="text" name="npcolor" id="npcolor" size="9" maxlength="9" value="<?=$userinfo->npcolor?>" onchange="change_npcolor()" readonly />
<input type="text" ID="np_sample" size="2" value="" readonly style="background-color:<?=$userinfo->npcolor?>" />
<input type="button" onclick="pickerPopup202('npcolor','np_sample');" value="Change" />
function pickerPopup202 is changing npcolor, but when npcolor is changed it don't call change_npcolor(). When I put extra button that call change_npcolor it works. I tried also:
document.getElementById("npcolor").onchange='change_npcolor()';
without success.
P.S. JS that changes npcolor (pickerPopup202) isnt mine, and ALL code is at one line, so i cant really mod it.

When you change the value dynamically, the onchange event doen't fire. You need to call the change_npcolor() method yourself. You could also call document.getElementById("npcolor").onchange(). (This is less efficient, but more flexible when the event handler may change eventually.)
You cannot change the event listener by just adding a string with javascript code to the onchange property. You can do it like this, however:
document.getElementById("npcolor").onchange = function(){
change_npcolor();
}

document.getElementById("npcolor").onchange='change_npcolor()';
here you have change_color() as a string but this is not correct syntax.
Instead of that you can use
document.getElementById("npcolor").onchange=change_ncolor;
Because the change_ncolor works as an object.

Swap CSS style of a group of elements on click

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.