I have about 20 pages of forms and I need all the inputs on every page to be converted to uppercase. I'm wondering if it would be possible to build a JavaScript function that I could just copy/paste onto every page without having to do it individually on each input on every page.
Maybe using getElementsByTagName() and addEventLister() and toUpperCase().
Would something like this work?
PS. using CSS only works until the browser send the information back to the server, so that's out.
Something like this should get you started:
var inputElements = document.querySelectorAll('input, select, textarea');
for (var i = 0, l = inputElements.length; i < l; i++) {
if (inputElements[i].tagName == 'SELECT') {
inputElements[i].options[inputElements[i].selectedIndex].value = inputElements[i].options[inputElements[i].selectedIndex].value.toUpperCase();
} else {
inputElements[i].value = inputElements[i].value.toUpperCase();
}
}
Although you should really reconsider this and just do it serverside.
Demo: http://jsfiddle.net/ZgrqA/
Related
I am currently attempting to make a page that would allow for users to search multiple knowledge bases from a single field.
Currently, I have been able to build this tool out so that clicking the corresponding button will search the designated tool, but I am trying to get a single button to search all 4.
Where I am stuck is the function tied to the All button. When I click it, it only appears to be running the last function in the group rather than opening 4 browser tabs with all 4 results.
I have attached a JSFiddle, in case my explanation is poor.
Note: The page is not pretty as I am trying to get it working before I add any CSS. I really just need JS advice. I am still somewhat of a novice with JS, so if anyone can provide a fairly simple solution, that would be most ideal.
Super Search Fiddle:
This is just to give an idea on how it might work depending on you needs. Ill assume that all the searches return a boolean value. So the code would go something like this:
function doAll() {
var msg = ["google","payroll","inquira","sdfc"]
var retvalue = [googleSearch(),payrollSearch(),inquiraSearch(),sfdcSearch()];
for (var i = 0; i < retvalue.length; i++){
if(retvalue[i] == false){
console.log(msg[i]+" search returned false");
}
}
}
It will do all the searches first and after it finishes, it will give out which searches failed, but you can change that functionality according to your needs.
Hope it helps
Update/Alternative(Almost same code):
function doAll() {
var msg = ["google","payroll","inquira","sdfc"]
var retvalue1 = googleSearch();
var retvalue2 = payrollSearch();
var retvalue3 = inquiraSearch();
var retvalue4 = sfdcSearch();
var retvalue = [retvalue1,retvalue2,retvalue3,retvalue4];
//var retvalue = [googleSearch(),payrollSearch(),inquiraSearch(),sfdcSearch()];
for (var i = 0; i < retvalue.length; i++){
if(retvalue[i] == false){
console.log(msg[i]+" search returned false");
}
}
}
I'm trying to design a site (possibly to make into a Chrome extension) that will allow me to mark which characters have done which events in an online game I play. I'd love it if I had the option to save the values of the checkboxes between visits (and ideally, character names as well), but I'm not great at coding. Also, I'd strongly prefer it if this information could be saved/cleared/reloaded on command, and not otherwise.
The page in question, please pardon me if my code isn't efficient or attractive. I actually prefer to work with it a bit more bunched up, but I tidied it for your benefits.
There had been a suggestion here that I was trying to work with:
var i, checkboxes = document.querySelectorAll('input[type=checkbox]');
function save() {
for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
}
}
function load_() {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
}
}
But while it works fine in the test, it won't work when I put it into my document (you'll see the var i at the top still, the rest of the code I'd put above the reset function).
Help?
This line:
var i, checkboxes = document.querySelectorAll('input[type=checkbox]');
is in the head of your document and runs immediately. None of the checkboxes exist at the time that it runs.
I'd suggest putting that script at the end of your body element or placing it in a window.onload = function() {}.
If you inspect the DOM structure in the working jsFiddle link you posted, you'll see it places the script at the end of the body element.
I am using the following code to count the number of required input (textboxes) on an HTML5 form, which works fine.
var inputTags = document.getElementsByTagName('input');
reqinputCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
if (inputTags[i].validity.valid == false ) {
reqinputCount++;
}
}
Now my problem is that I also have a textarea on the form and want to include that as well.
Can you please help me out.
Thanking in advance.
Since you're already relying on a feature only present in the newest versions of browsers, I'm assuming it's safe to assume you don't mind another such feature being used:
var inputTags = document.querySelector("input,textarea");
I need to write a Javascript function that run from Master page, to find a ModalPopup in the contenct page and close it. Following code works, but not what I want. I need use something like mpeEditUser.ClientID, but I got an error. Also, it would be nice if I could find a ModalPopup without knowing its id, by its type (ModalPopupExtender) instead. Any suggestion?
function CloseModalPopup() {
var mpu = $find('ctl00_ContentPlaceHolder1_mpeEditUser');
mpu.hide();
}
Here is my solution: (If you see any problem, please let me know. Thanks)
I get the ModalPopup id in the codebehind, and pass it to my javascript function.
In the Page_Load of the default.master.cs:
ContentPlaceHolder cph = (ContentPlaceHolder)FindControl("ContentPlaceHolder1");
string sMpeID = (AjaxControlToolkit.ModalPopupExtender)cph.FindControl("mpeEditUser");
In my Javascript function:
var mpe = $find('<%=sMpeID%>');
if (mpe != null) {
mpe.hide();
}
Its likely the tag is getting mucked up by being called through another page, this happened to me. I don't know the best fix for you, however the way I addressed the issue was to first find the mpe through a javascript function that looked for a vague match out of all of the elements on the page.
var elemets = document.getElementsByTagName("*");
var mpe;
for (var i = 0; i < elemets.length; i++) {
var id = elemets[i].id
if (id.indexOf("mpe") >= 0) {
mpe = elemets[i];
}
}
If you have more then one mpe on the page you may want to match more if the string. For me the elements function only returned about 50 elements, so it was not too much overhead. That may not be the case for you, but even if you dont use this function in the final product it will assist you in discovering the actual ID of the elment.
While typing into a textarea, I'd like certain character combinations to trigger an inline, popup "select box", just like in Facebook when you tag your friends in posts/comments.
For example, if the user were to type [friend:m they'd get a popup, with a list of their friends that start with m. As they continued typing, they'd get more narrow results... just like auto-complete.
I'd like to have other triggers too... [place: or [info: , etc...
I've been able to get up to where I can detect the triggers, but not experienced enough with Js/jQuery to finish this off. ;(
Here's what I've got:
var totalcount=0;
$('#Data').keyup(function (){
var arr = $(this).val().split(" ");
var matchitems = count('[place:', arr);
if(matchitems > totalcount) {
$('#Data').val($('#Data').val()+'foobar');
totalcount = matchitems;
}
if(matchitems < totalcount) {
totalcount = matchitems;
}
});
function count(value, array) {
var j=0;
for(var i=0; i < array.length; i++) {
if(array[i] == "[place:") {
j++;
}
}
return j;
}
This works, when I type [place: it appends "foobar" to textarea. Now I'm trying to take it further; to read the trigger, and then do a JSON call to create the popup list. How do I go about doing this? Know of any tutorials out there that cover this? Thanks!
Here's an example of the behavior you're looking for
example jsfiddle
I've actually done something similar, I modified it to fit what you're trying to do.
It looks for a matching [type: where type is friend, place, info etc
Loads the results
Handles up/down keys to toggle between results, enter to select (or mouse click), esc hides the auto complete results
Sets the input value based on selection made from auto complete