I've a text box in my html file and I want to detect whenever a user changes the value of it and determine its updated value also. html code for text box is :
<input type="text" name="amount" id="amount" value="0" onchange="Demo().change(id,value)">
and in my scala file, I've implemented a function 'change' as :
#JSExport
def change(id:String):Unit={
appendPar(document.body,"Text Box value is changed and the new value is : "+document.getElementById(id).getAttribute("value"))
}
But it is not working in my case. What am I doing wrong here ?
Any suggestions ?
UPDATE : It is firing the event only when I press enter after altering the value in text box. Further, it is showing updated value as "0". How can I make it fetch from the text box instead of my pre defined value ?
You can use input event instead of change if you can ignore IE<=9.
The DOM input event is fired synchronously when the value of an or element is changed
From MDN.
Note that for non-text/textarea inputs (e.g. checkboxes, radio buttons, etc.) there are additional browser compatibility caveats, but you can just use change event on those. See http://caniuse.com/#search=input for details.
I also don't see where the variable id is coming from in your code. You should pass the string "amount" instead of id if that's what you want, like this: Demo().change("amount"). That would be quite unreusable, but it should at least work.
If you want the method to be more generic, note that javascript passes an Event object to all event handlers, and it has a target key which contains the HTML element on which the event happened (in this case that would be your textarea). You can get then easily get the value of that target.
If this is confusing, I suggest you try to implement this in JS first, and then translate this into Scala. You don't want to be fighting on both fronts at the same time.
You'll need to use one of the onkey handlers. For example:
Note that IIRC, this will also trigger if the user moves around with the arrow keys. So if you really want to only be called if it changes, you'll need to introduce a variable and check:
var lastValue: String = ""
#JSExport
def change(id:String): Unit = {
val newValue = document.getElementById(id).getAttribute("value")
if (lastValue != newValue) {
appendPar(document.body,
"Text Box value is changed and the new value is : " + newValue)
lastValue = newValue
}
}
Related
I would like to reset/clear my MUI Autocomplete component.
I have two of them with model like { label: string, value: string } and if first will change its value then I would like to clear the second one since second will get options by selected value in first one.
Moreover - I am using react-hook-form with setValue. I use as value in this method { label: '', value: '' } but it causes warning that in my new sort of options there is no such option to select (this is minor issue I think) but it does not reset second Autocomplete input but partially. I still see X to clear value. I used null as value in setValue but it does not cleat input as well.
What I want to achieve is - selecting some option on first input I would like to reset second input like clicking on X does. Is it possible ?
Cheers!
I found what caused the issue I describe above. It was because Autocomplete in my codebase was declared with clearOnBlur={false} props. It prevented to clear value of my Autocomplete when I was doing setValue(autocompleteFieldName, null) via react-hook-form. I hope it helps someone with the same strange issue since I was not interacting with input at all to invoke onBlur event. Cheers!
When I entered a value in the input box and submitted it, the mandatory item verification failed, and the system displayed a message indicating that a parameter was empty and instructed me to enter a value. The code for obtaining the input value is as follows:
(see the solution in column C)
can you give me some advice about it?
The possible cause is that the method for obtaining the value is incorrect. As a result, the value in the input box cannot be obtained.
Use the onchange event to assign a value to the model and obtain the value of the input box. The method is as follows:
Initialize the model.
data:{
accountValue:''
}
Bind an event to the input box.
<input #change="getAccountValue" value="{{accountValue}}"></input>
Assign a value.
getAccountValue: function(e) {
this.accountValue = e.value // Here, e.value instead of e.target.attr.value is used.
}
Refer to the official document instead of generating a JavaScript object for coding. A JavaScript object may lead to compatibility issues.
Currently, the data binding mode of the quick app is unidirectional.
The value entered in the input box does not change the value of accountValue in data.
If the value of the input box is changed by setting this.accountValue to xxx, the onchange event of the input will not be triggered.
In this.accountValue = xxx format, if the value of accountValue before and after the change is the same, the page will not be re-rendered.
I'm creating a PDF form with a submission button. I would like the form to email based on the value of another form in the field. I'm assuming I need to do an "IF...ELSE" statement, but keep getting a syntax error that I cannot figure out. I am completely java illiterate.
This can be done using multiple solutions, but you do need to program Javascript inside of the PDF. You can use if-else on-click of the email-button. Here you can check values entered inside of the PDF form:
if (this.getValue("somefield") == "left") { emailvalue = "toA#domain.com" } else { emailvalue = "toB#domain.com" }
But you could also set the value onBlur or onFocus of a certain field. Like with radio-buttons the onBlur is useful because you know the user clicked or focused on this field and so set the variable emailvalue to a certain value.
I've made some pretty checkboxes using some pretty simple jQuery
HTML
<span class="iconElement checkBox" id="update_Check"></span>
<input type="text" id="update" name="update" value="0" class="hidden savedData" />
JS
$('.checkBox').live('click', function (e) {
if ($(this).hasClass('disabled') != true) {
$(this).toggleClass('checked')
var thisValue = parseInt($(this).next().val());
var newValue = (thisValue - 1) * (-1); // enusures the output is either 1 or 0, [ (1-1)*-1=0 and (0-1)*-1 =1 ]
$(this).next().val(newValue);
};
});
This is simply a span with a nice CSS background sprite, which when clicked changes toggles it's "checked" class, adjusting the CSS sprite from a "Tick" to an empty box. At the same time it also changes the content of a text field (hidden by CSS class 'hidden') to a 1 or a 0 to indicate whether the box is checked.
It has to have this 1 or 0 as when the data is passed to the next stage I have to have a value, an unchecked checkbox sends no value.
This all works fine!
BUT... I also need to be able to detect the "change" event of the hidden text field.
This is to be controlled by the "savedData" class.
$('.savedData').live('change', function () {
// do stuff now we know this has been changed
});
I could of course include this within the "click" event in the code above, but that's not practical for the application.
It seems that the "change" even is only trigger by elements which are changed by the keyboard or mouse, anything changed by jQuery is not being flagged.
Initially I was using hidden input type and thought that was the issue, but have changed them all to text type now and the problem is still there!
Any tips?!
It seems that the "change" even is only trigger by elements which are changed by the keyboard or mouse, anything changed by jQuery is not being flagged.
Yes, that is correct. That is precisely how this works. Only changes made by the user trigger event handlers: programmatic changes do not. The only way to trigger them is to do so yourself:
$(this).next().val(newValue).change();
The .change() triggers a change event on the element, so the handler will be called.
I use Google Closure's AutoCompleteBasic for some text boxes I have on the form. When the user fills in the text box after typing a key or two and then using arrow keys to pick one of the suggestions of the autocomplete, the value of the textbox just seems to be whatever keys the user typed in though the form renders the full text of the autocomplete word in the textbox. I use document.getElementById(id_of_textbox).value to get the value
Is this expected behavior of autocomplete and textbox interaction?
How can I get the full complete string instead of just the first few keystrokes? Or is there some other way to read the value?
I haven't looked into using AutoCompleteBasic, but here's some code that might help:
example.setupSearchListener = function(){
var searchbox = goog.dom.getElement('your-textbox');
var delay = new goog.async.Delay(function(){example.handleSearch();}, 500);
goog.events.listen(searchbox, goog.events.EventType.KEYUP, function(){
delay.start();
});
};
This will wait until the user stops typing, and then call example.handleSearch() to do whatever.