I have added a form to my HTML file. And it works fine. When I try to submit the required field should be filled in. The next step is the following: I want an image link in my input fields for adding a profile image from source. I also let this work as well.
I also built a constraint which check if the image is valid. If it isn't valid it shows only a placeholder image.
I've used this small function for that:
prevAvatar.onerror = function () { this.src = "images/placeholder.jpg"; };
The next step is to display a message to the user to show that his given image is not a image.
I was wondering if it is possible to write some code that shows the same error as an empty field does for HTML5 REQUIRED fields.
Does anyone have a smart solution for this?
Thanks in advance!
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
}
So, I am working on a PDF form for workplace use, the idea is for the employee to fill his information and send it to me by e-mail. I've coded a simple "clear form" button in adobe javascript, so the technitian filling the form wouldn't need to close it and open it every time he gets to a new employee. The problem is: the technitian is using a tablet, and both of them need to sign the form, using the tablet's pen, I used the "Fill and Sign" feature, because it's the only way I see of doing it, the problem is: my "clear form" button does not work for it, it can't remove the signature, I've tried a lot of code but nothing seems to work, this is my current "clear button" code:
//Clears all the fields on the form
this.resetForm();
this.getField("start").readonly = false;
this.getField("end").readonly = false;
this.getField("Date1").readonly = false;
this.getField("Date2").readonly = false;
this.getField("Send").enabled = enabled.true;
this.getField("Send").display = display.visible;
How can I make it work? Is it possible?
I was able to clear signature field by defining of signature field name within function resetForm.
this.resetForm(["SignatureFieldName"]);
I was wondering if it's possible to have an HTML form with a text field and a button, wherein you enter a string (say 5) and on pressing the button, the image "image5.jpg", stored on the server, is rendered on the webpage.
I believe it boils down to coding a button "on-click method":
Read a text field and form a filename string for the image
Updating the image, preferably (OR redirecting the user to "http://.../image5.jpg" would do as well)
I'm not terribly familiar with much more than basic HTML, but I can hack it together if I know what will get the job done.
Thanks.
// DOM ready handler
$(function(){
// Click on change image button handler
$('#select').click(function(){
// Get the value entered in the number input
var image = $('#number').val();
// Change the source of the image
$('#image').attr('src', "http://somewebsite.com/image" + image +".jpg");
});
});
JSFiddle: https://jsfiddle.net/0rn00L4a/
There are no real images to show, but if you inspect the DOM you will see it changes the image to things like
<img id="image" src="http://somewebsite.com/image2.jpg">
So if you put in your correct image path, it will just show them immediately when you press the button.
You could just do it on the change event of the input, but that is a little jarring.
I Have this code:
<script>
var loadFile = function(event) {
var output = document.getElementById('imagePreviewer');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
That is taking the input from a file upload field and inserts the file path to the src attribute of an image element with the "imagePreviewer" id.
The Problem is: When the page loads it changes the src of the image to "null". I need to make this function work only when the user uploads the file...
Now I tried different ways and couldn't got it working so I would really appreciate some help with that!
Depends on what do you what the user to see while he didn't choose an image. I see 2 ways:
If you want to show an empty box, you may show a css-styled div element with some background, or simply no-image-selected-picture (like http://allensguide.com/img/no_image_selected.gif), and change the src when the user selects an image.
You may not to show the preview box at all until the user selects an image.
-
I am making an order form with a review page.
when order form is fully filled, then it automatically send each data to
each div on the review page. This is what I want.
I know I can copy a data into another div by using javascript like
<script>
function filling() {
var something = $('#input').val();
document.getElementById("divbox").innerHTML = something;
}
</script>
but when it's not a data that can be displayed with text(for example, an image or a video), then how can I send the data into another div?
Thanks to digging really hard the internet, I found an open source contact form with the image attachment function. what's cool about this is, when I attach an image, it resizes and show to client-side.
(http://webreflection.blogspot.kr/2010/12/100-client-side-image-resizing.html)
So, I am modifying this into an order form, and I want, when a client attach an image, it shows to the client the resized version of it, and it also shows in the div on review page.
How can I do this?
getElementbyClassName or Name did not work because of the "auto resizing script"
-
I'm sorry for my english being to poor. and thank you for your patient to have read this last line. Have a nice day.
Few ways:
<script>
function filling() {
var something = $('#source').html(); // Can be some element, like another DIV
$("#divbox").append(something);
}
</script>
Depending on what you need, can also use clone() (https://api.jquery.com/clone/):
function filling(){
$("#source").clone().append("#divbox");
}