Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Anyone of you knows if there is a way to increase the time before that a search starting when the user is trying to select an element from a select list by typing the name of the element, in HTML.
For example: I have a list of 100 elements, and the user wants to find the element "Adam Smith" but he is very slow and he can not type very fast in order to select the element Adam smith. Do you know if there is a way to help the user in this use case.
I can use a different component instead of the normal select in HTML, but I am working with a legacy system and I cannot change the source code too much. Anyway also JS solutions are well accepted
I think is a perfect use case for the debounce method of Lodash.
Here is a little example where the time the function will wait until fire is 500:
function doSearch () {
$('#output').html('searched: ' + $('#search').val())
}
$('#search').on('input', _.debounce(doSearch, 500));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=search />
<p id=output></p>
function doSearch () {
console.log('do search')
}
$('#search').on('input', _.debounce(doSearch, 500));
To debug and find which functions are called when a user starts typing, you can add some JavaScript at the very end on the HTML output that adds (or overrides) the original behavior.
This may help tracking down the problem and find out where that timer value is set:
document.getElementById('thatInputElement').onKeyUp = function(event)
{
console.log(event);
};
You can also achieve this directly from the dev-tools web-console in your browser, without tampering with the source-code.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
How to restrict to change input type password to text in Inspection in java Script or jquery. If someone tries to open the input type password element in the developer menu and tries to change the type from password to text, this makes the password appears in text box.
if we can detect any attribute change that may do the work, but I am not sure if that would work if we make changes from the developer menu.
This is an interesting problem, In javascript we dont have any straight approach with which we can detect the type or attribute change in javascript. I had same kind of problem and then after some studies, I found that this could be done with Mutation observer.
In this code I have created an extension method for HTMLElement and all we have to do is get the reference of that HTMLElement and call this extension function and pass the callback, which we want to be run on attribute change.
HTMLElement.prototype.onAttributeChange = function (c) {
let observer = new MutationObserver(c);
observer.observe(this,{attributes:true});
};
var elem=document.getElementById("txtpassword");
elem.onAttributeChange(function(){
alert("attribute changed");
});
<html>
<title>
</title>
<head>
</head>
<body>
<input type="password" name="password" id="txtpassword" >
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is it possible to use a JavaScript document.getElementsByClassName variable in an if statement with event.target?
I want to achieve something like this:
var signInModals = document.getElementsByClassName("signInModal");
if (event.target == signInModals) {
alert("It worked!");
}
Thank you!
You are trying to compare an HTML collection to an element. That is never going to work. You would need to loop over the HTML Collection and check each one.
Seems like you are trying to see if an element has a class so just check for the class.
if(evt.target.classList.contains("signInModal"))
other option is to check to see if it is a parent (depending on what evt is)
if(evt.target.closest(".signInModal"))
Well, event is a reference to the Object itself, not its value. So you are saying is this Object that is clicked this Object that I got from the class name. The answer will always be false. So to answer your question yes it is, but it does not make sense to do that, you probably want to check if a property matches.
For example: when this button is clicked change the button color to the same color has this Html object, and then you can use the if statement to say if (button color == html object color) alert("It worked")
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am new to Javascript.So please excuse me if I am asking anything silly. I have a sample Shiny application Statistics Dashboard which can be used to find some basic statistical measures such as Mean, Median etc. for any metric. Users have to upload a csv file based on which the dashboard selects all the numeric variables within the file and provides an option to select any numeric variable to analyze as a dropdown. I want to add a javascript code in the application which will capture the updated measures (e.g. mean) after a user has selected a particular dimension from the dropdown. For example, suppose the default selected dimension in the dropdown window is "sales" and the corresponding mean is 325. If I select another dimension (suppose) "profit" then the mean changes to 37. Now I want to add a javascript/jquery code which will capture the mean value of 37 when I select "profit" (from "sales") from the dropdown. I have tried the .change event to check for the change in the dropdown selection and when there is a change, capture the mean value inside the h3 tag. However, I am getting the previous mean value instead of the updated one i.e. I am getting 325 instead of 37 when I select "profit" (from "sales"). Hope I am clear on this.
Am I using the wrong event? How can I capture anything after a certain action occurs and the values are updated?
Feel free to let me know if you need any more details on my query. Looking forward to the help from the community.
I think this is Exactly what you are looking for
Here is a code which will detect any changes in a certain element.
HTML:
<input type="text" id="Profit"></input>
<h3 id="MeanLabel">100</h3>
Javascript/Jquery:
$(document).ready(function() {
$("#Profit").on("change", function()
{
$("#MeanLabel").text(this.value);
});
initialValue = $("#MeanLabel").text();
CheckChanges();
})
function CheckChanges()
{
if($("#MeanLabel").text() != initialValue)
{
//The Label Changes!
initialValue = $("#MeanLabel").text();
alert("New Label is: " + initialValue)
}
setTimeout(CheckChanges, 200)
}
This is the working sample.
https://jsfiddle.net/h68nxu4h/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
So I am trying to do a button and if you click on it then it calls a function called order(). So, If I'm trying to do something like this order("+<script>blablabla</script>+") then it shows me a error if I type into something between the "+HERE+" Why that? Is there any way around it?
You could always do something like this. Maybe change the divs around a bit and add a rounding system. This gives you a live update on the costs when selecting how many keys.
https://jsfiddle.net/8hube9ua/
Throw this under your select,
<span data-val="1.85">1.85</span> <!--How much each key is-->
then throw this into the script.
<script>
$('#suiface').change(function(){
var span = $(this).next('span');
span.text(span.data('val') * parseInt(this.value,10)) //multiplies the cost by the option selected
})
</script>
I'm not sure to understand, but why don't you write something like this ?
<button onclick="order()">Blablabla</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I don't understand how to make and use forms. Can someone give me and example using external java script where there is an input text and a submit button and when it gets click it does a java script function. I also have some questions. If i'm not using a form to change pages do i need a method. What do i put for the action attribute. Are forms the best way to get input text data to java script. And why should i use a form and not just input tags.
Thanks.
No, you don't need a form to collect user input form fields.
Here is a really simple friendly example using MagJS:
HTML:
<div id="hello">
<label>Name:</label>
<input name="hello" placeholder="Enter a name here" />
<hr/>
<h1>Hello <name/></h1>
</div>
JS:
mag.module("hello", {
view: function(state) {
state.input = {
_oninput: function() {
state.name = this.value
}
}
}
})
Here is a link to the working example: http://jsbin.com/fivaqoliqe/1/edit?html,js,output
Hope that helps!
The short of it is that W3Schools lets you play around but they are scarce on explanation so I suggest you check out this resource instead (which also has a demo of a form): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
The action attribute is where it should go after it is done to further process the form (typically a route or backend server is where you will go after). Given what you have been talking about however, you only have one field and one button, so you should look into the onclick attribute and then look up the input field and read the value. You use a form when you have a lot of inputs that are related and should be sent at once. There's a lot out there though as this is very basic but if you have any questions just ask.