I need to execute certain piece of code after user chooses file from file input. The tricky part is I cannot check the input for it, so:
$('input').change ->
is out of the question, I need to detect user clicking "Open" button. Is it possible?
You'd need to check the file input's FileList.
<input type="file" id="file">
$('#file').on('change', function() {
return console.log($(this)[0].files);
});
Worth bearing in mind that if you were to select a file and then go back in and choose the same file a second time, the function will not fire as the input hasn't truly changed.
In this scenario you'd need to set a flag somewhere that resets when you click the input (or something similar).
Related
I have a task where I need to automate Sign in form authentication. For this example, I'll show you Tiktok authentication form (Mobile interface, not desktop. E-mail and password option)
If I enter text values into the fields programmatically, the Login button won't become active, and if I manually focus on the fields with a mouse click, the value disappears. These are two lines of code I run to put the value in:
let email_input = document.getElementsByName("email")[0];
email_input.value = 'sample#email.com';
I understand it needs to trigger a certain event to assign a value into it's JS model, but I can't figure out how to do it. I have tried sending change or input events onto this text field with no luck using this code:
let email_input = document.getElementsByName("email");
email_input[0].value = 'sample#email.com';
custom_event = new Event('input');
email_input[0].dispatchEvent(custom_event);
// tried also change, textInput like so:
custom_event = new Event('change');
email_input[0].dispatchEvent(custom_event);
But this does not seem to help.
So my goal is to put values into both fields Email and Password in the way it will be detected and Log in button would become active.
Any suggestion would be much appreciated
You should first focus needed input element and then execute document.execCommand with insertText command:
let email_input = document.getElementsByName("email");
email_input[0].focus();
document.execCommand('insertText', false, 'sample#email.com');
With this method input\textarea value modification should be captured by all major frameworks including Angular and Vuejs. This modification will be processed by frameworks the same way as if user pressed "Paste" option in browser main menu.
It all depends...
Who/what are you? A normal browser user? A bot? The browser author?
Because code like this is useless...
let email_input = document.getElementsByName("email")[0];
What document are you referring to? Who's document? Did you inject this instruction into the page and executed it?
You're not telling us where you're coming from, but anyway...
If you are the browser author, or you can run JavaScript macros from your browser (ie: the Classic browser) then you can do something like this...
var Z=W.contentWindow.document.querySelectorAll('input[type="password"]');
if(Z.length>0){
Z[0].value='password123';
Z=W.contentWindow.document.querySelectorAll('input[type="email"]');
if(Z.length>0){Z[0].value='email#abc.com';}
}
To automatically populate such fields, and if you also want you can SubmitButtonID.click() the submit button for as long as the isTrusted property is not tested by the website.
Continued...
Test if normal (non-custom) submit button exists and click...
Z=W.contentWindow.document.querySelectorAll('input[type="submit"]');
if(Z.length>0){
if(Z[0].hasAttribute('disabled')){Z[0].removeAttribute('disabled');} <--- Enable it if disabled
Z[0].click(); <--- automate click
}
I'm writing an edit function (plain javascript & HTML / Chrome / Windows 10).
The data is in localStorage as a series of records, just 2 records in the toy code mentioned below.
I want the user to specify the number of the record to edit, then the code should pre-fill the textarea field with the retrieved content of that record. I want to allow the user to make changes and then press a Store button to store it back in localStorage.
My problem is that when I prefill the input field, I see the record content briefly and then the input field clears. I've tried .value and .defaultValue
editField.value = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
and
editField.defaultValue = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
the result is the same. (The regex is to hide a sequence number)
The code is in a JSFiddle here: https://jsfiddle.net/roygrubb/zxedbfqr/2/
That performs more or less the same - it shows the value briefly - but then does something different: It goes to a 404. I don't understand this either ¯_(ツ)_/¯
What I'm trying to do seems so basic, that I think I must be missing something blindingly obvious.
What have I missed? Thanks!
Whenever you've got a <form> that you want to handle through JavaScript, you have to ensure that the default form submission action does not happen. If the <form> does not have an "action" attribute, the default is to reload the current page.
By default, a <button> element will be assumed to have "submit" as its type. To prevent form submission, therefore, the simplest thing to do is make the button have "button" as its type.
That may not be all you need to do, depending on the details of the form. It may be necessary (or simply a good defensive move) to have a handler for the "submit" event on the form to prevent the default action.
Ok.
Question is simple.
I want to call some document via ajax when user changed the value of <input type="text">.
Not even just 'keyboard typing' event.
Include that way... you know, the tool tip...which showing last input result of user...
I mean, that tool tip... position is below the input box... showing user's recent typed results... you know that.. hard to explain. don't know its name...
Anyway, I wanna call ajax document right after user changed value of <input type="text">... Not even just keyboard typing, include via choosing one of that tooltips by mouse clicking...
Well, I was able to call document right after 'key typing event'..
This is the code :
sensitiveInput.addEventListener('keyup',function(){
callDocument_viaAjax();
}
So I tried similar method with above code.
This is the code :
document.addEventListener('mouseup',function(){
if(sensitiveInput.value !== '') {
sensitiveInput.onchange=function(){
callDocument_viaAjax();
}
}
});
But this code had some delay.. That means, Failed to realize the ui that I want to make.
When user changed the value of <input type="text" id="sensitiveInput"> via choosing one of the tooltips below input box, callDocument_viaAjax() wasn't executed.
I had to click on the document one more time to execute callDocument_viaAjax()....
I don't know why this happening.
And don't know how to solve this problem...
Please some one show me the mercy...
I solved this problem by using an event trigger 'input'.
'input' event detect change of input even if do not lose the focus from input field.
('change' effects only when input field loses focus)
I have an input file with hidden visibility :
<input type="file" id="fileupload" name="upload" style="visibility: hidden;" />
But I want to use it, without showing it. I will trigger the event through a-tag(hyperlink).
There I have:
//that's fine, open file dialog
document.getElementById('fileupload').click();
//can not take the value of file chosen?
var x = document.getElementById('fileupload').value;
console.log(x);
So how can I take the chosen file without displaying the input ? Is this possible?
You only want to display the filename when someone adds a file?
You could add an eventListener to your file to retrieve the filename:
document.getElementById('fileupload').onchange = function(e) {
console.log(e.target.value);
}
But to upload a file you can just add this hidden file field to a form and submit it.
The first question in my mind is why dont you use jQuery, as its easier.
Second, the input will not actually hold the file per se, but a reference to it. The file will be sent via post (or get) and manipulated server side. Maybe I don't understand correctly what you're trying to do.
I have a form which is using a select list to jump around my site. This is currently using onclick window.location so user selects the page and presses go and it goes to that page.
I now need to add a small text box for the user to type in a code (say 123456) and then when they click go, it should go to the url selected, but with the [CODE] being the number entered in the box. I discovered jquery replaceAll so it gave me the idea to have this in the select html:
http ://jumptothispage.com/parts/p[CODE]/edit
http ://jumptothispage.com/jobs/j[CODE]/edit
When you press go, it would replace all [CODE] in that html with the code entered and then jump to that page selected, e.g.
http ://jumptothispage.com/parts/p123456/edit
http ://jumptothispage.com/jobs/j123456/edit
I am already using jquery on my site so makes sense to try and utilize that again. I'd appreciate a pointer and or other suggestions instead.
Thanks,
Paul.
A workaround: Store the code in a cookie, so at least it's not visible to every person who looks at the URL bar. Then in every onclick, fit it into the URL to send the user to the "right" page.
Or, have your select option's value literally read CODE, which your onclick interprets to mean "The user hasn't set the code yet." When the user types in the code, store it in a variable (in the example below, realcode), and you can then do this:
$('select#navigation option').each(function(idx, el) {
$(el).attr('value', $(el).attr('value').replace(/CODE/, realcode));
});