I'm handling the "onChange" event of an HTML input file field by using jQuery's "change" function. This works as intended, and does indeed trigger when the element's value changes. However, not in the following scenario:
The user specifies a file to upload. We call this file "file.dat".
jQuery later sets the value of the file field to "", by using the
val-function.
The user specifies the exact same file to upload, "file.dat".
In the above scenario, "onChange" doesn't get called at step 3. However, if the user at step 3 specifies a different file, it does indeed get called.
Is it because I am using jQuery's val-function to change the value? What other alternatives do I have if I want to reset the input file field to its base/default value?
For security reasons, JavaScript is unable to affect the value of a file input. It does appear that the value has been cleared, but it hasn't really.
You can get around this by either resetting the entire form, or creating the element again and inserting it into the DOM, in place of the old one.
Here's a working example. Note the use of the jQuery live function to bind the change event. This is required because we are inserting a new element into the DOM every time the Clear button is clicked.
Have you tried .reset() instead of .val() ?
Related
I have an HTML <input> element that is generated by a Blazor <InputText> component.
I am using a JavaScript library to detect when the user scans a barcode. When this event occurs I set the value of the scanned barcode into the <input> element.
I want to be aware of this change of value immediately in C#. Normally I'd use #bind-event:oninput to ensure I have the current value immediately whenever it changes, but this event isn't fired when the HTML input's value is set via code.
Is there a way to assign a value to an HTML input via JavaScript and then have C# immediately aware of the change and update the property of the C# object the InputText control is bound to?
I have solved this the following way:
Where you have the value in JS that you want in C#, apply it to a field and call .click() on a button. This button calls a C# method that invokes a JS function that returns the value of the input as a string to your C# method, which you can now use however you want.
While it is a dirty solution, it worked.
I have tried to get invokeMethodAsync to call my C# method directly, but that required it to be static and I simply didn't have the time for this project to do it the proper way.
I'm trying to set a value of an Angular textarea using a Chrome extension. As this is a Chrome extension, I do not have access to the website's source and so cannot use Angular directives.
A quick background to what I'm trying to achieve, I have a drop down box where I can select values, selecting a value from the drop box will call a javascript function to populate a textarea with the value selected from the drop down control.
I can get the text to update on the Angular textarea by getting the ID of the element and setting it with the .val() method, however setting the values programmatically does not set the "isdirty" method of of Angular textarea.
I have seen that the "isdirty" property can be set manually by using triggers to emulate input on the textarea but it does not seem to work as the textarea's "ng-untouched" value is still set. Only when I click on the textarea (after the .val() function is called and the textarea is now populated) and click out of it does the "ng-touched" value get set.
I just have a basic selector as so
var notes = $("#notes").val();
notes.trigger("change");
I have tried using the following keywords within the trigger method, and also tried using them directly (i.e. .change() etc), keyup, onkeyup, input, change, and none of them works for me.
$('#notes').get(0).change();
There are no error showing on dev tools.
Is there something that I'm missing which is preventing this from happening?
So i am having trouble sending the value of the textareas that are dynamically generated and have summernote applied to them.
Here is a link that will reproduce the problem:
http://jsfiddle.net/jk6pjnt7/1/
so basically, i am trying to add a new textarea dynamically when i click the "add Step-textarea" because i don't know how many "step" the user will need. the problem is that when i submit the form, i won't get the value of the new textarea. they will have a blank value.
If i do the same and i remove summernote plugin form the process everything works fine.
I have this small pice of coed that prevents the form from submitting and will display what would be submitted in the console, so you might need to open your devtools to see the debugging info.
$('form').submit(function () {
//console.log($(this));
console.info($('form').serializeArray())
return false;
});
Since the DOM is being dynamically changed, we cannot 'watch' these new elements in the typical way. In jquery what we use is called delegation and in particular jQuery.fn.on. We bubble up from the dynamically altered container (in this case, being <form>) to an element that will exist and guaranteed not to change. In this specific case in particular, your line $(next_input).val(''); I changed to $(next_input).html(''); as we're dealing with delegated textarea's which work a bit differently from input boxes in the way they take data.
Here is the fixed code: http://jsfiddle.net/jk6pjnt7/3/
I have a multiple file input and I'm using some javascript to handle its change event. The problem is, if I select one file and then select another file with the same name then the change even isn't fired.
Is there some other event I can use. My only other idea (seeing as you can't clear the file input value with JavaScript) is to remove the element from them DOM and create a new one once the form is submitted.
If you use JQuery to bind it with
$('#yourIdOfInputFile').bind('change',function() {
//here goes your code
});
then its triggered - always!
This is happening in IE & Crome, not Firefox. When file is the same, the change event is not firing.
I suggest you creating a new input everytime file changes. Since this workaround simply replace the input with newly empty input, so the second time file is selected, no matter what the file is, change event will be fired.
http://browser.colla.me/show/file_input_triggers_no_change_event_if_file_names_are_the_same
Can anyone suggest me a javascript function to set the text box to readonly on pressing the submit button. So that the contents cannot be modified.
To disable an input you'll want to set its disabled attribute. If you can use jQuery then something like this would be what you're looking for:
$('#idOfYourInput').attr('disabled', true);
If jQuery isn't an option, then you'll want to use the setAttribute function. Take a look at the MDN documentation for it. Something like this:
var d = document.getElementById('idOfYourInput');
d.setAttribute('disabled', 'true');
(Both of these code samples assume that you're identifying your input by its id attribute. If that's not the case, these would need to change. The jQuery one would be trivial to change, you'd just need to update your selector to identify the target attribute. The latter code sample would need to use some other DOM navigation/selection functions to find your input element.)
You'd want to include this within the handler for your submit button. Understand, however, that this will only matter on the current context of the page. So I'm assuming your submit button is being used to perform a submit via AJAX and not actually POST the whole page, correct? Because if you're POSTing the whole page then, when the page refreshes, you'll be on an entirely new page context. (Which means any code associated with a button click event will not yet have run.)