Get input value with Javascript only when the input is changed - javascript

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.

Related

How to Change Text Value on Canva.com with Javascript

I am trying to change the value/text of a text node in canva.com.
I am able to change it visually but when I reload the page, or try to download the design, the old placeholder text is shown.
In canva when you change anything it automatically saves the changes, but you can also do this manually. I have tried manually saving but with no luck, only the old placeholder text is saved.
I have tried changing the text with the following methods.
The text is in a span so at first I tried to change that one.
var all_texts = document.getElementsByClassName("S1PPyQ");
all_texts[0].innerText = "HEY";
all_texts[0].textContent = "HEY";
all_texts[0].outerText = "hey"
After that I tried to get the parent node, which was a p tag. So basically the same code as above just with a different class name. This also did not work.
Any help is appreciated.

how to alert filename of uploaded file in squarespace form?

I have a form on a page in SquareSpace that allows an image file to be uploaded:-
https://www.colourourstory.com/uploads (try with dummy data if needed).
I need to add the filename of the uploaded image to a hidden field named "SQF_FILENAME" which already exists.
Any tips on how do I do this please as the value is only available after a successful upload?
Thanks
Jonathan
I can suggest using some jQuery.
For example, you can hook a function to the change event of the input[type="file"] and grab its value. Then all you need to do is set the value to your hidden field.
Here is a short code example:
$('.form-block').on('change', 'input[type="file"]', function() {
console.log($(this));
console.log($(this).val());
const fileName = $(this).val().split('C:\\fakepath\\').pop();
$('input[name="SQF_FILENAME"]').val(fileName);
});
Hope this helps.
Cheers.

Webpage button on-click image update

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.

Added an Image"A". Want to Display the image in div"A" , div"B" and div"C". How?

-
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");
}

Img onerror validating with html5 form

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!

Categories