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.
Related
I'm trying to make a very simple Javascript program that will essentially start as a blank page, but when the user presses a key (ideally space but it doesn't really matter) it will print a large text that flashes in 0.2 second intervals, and i can't quite figure out how to go about making a call that doesn't require including a text box like I've seen on other sites. Any thoughts?
Just bind the event handler to the body tag.
document.querySelector("body").addEventListener("keypress", function() {
//your code goes here
});
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");
}
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!
So im trying to code up a script were if your mouse goes near the image the image will move.
Here is my source and live preview.
http://jsfiddle.net/9CDtE/4/
Has you can see once you move near the button it moves which is what i want.
But now i need to turn the button into a html form and turn the button into a image.
Is there any way to do that ? I am no good with jquery.
html
<button>button</button>
js
$(function(){
$("button").on({
mouseover:function(){
$(this).css({
left:(Math.random()*200)+"px",
top:(Math.random()*200)+"px",
});
}
});
});
css
button{
position:absolute;
top:10px;
left:10px;
}
I own a pokemon online game. I want to grab a random pokemon from the db ( which i can do) and then have the pokemon change every time the user moves there mouse near it and moves around the page.
So there would be a html form with lets say 3 fields a pokemon name a pokemon id and a pokemon image. One page load it will auto grab a random pokemon from the db and fill in these hidden fields in the html form. Which i can do. Once the user moves his mouse near the pokemon/image it will move and then another random pokemon will be grabbed and the html form will change to the new pokemon info. It will keep changing till the user can click on the image which will then submit the form.
By the logic of your code above instead of button in your css and selector.
Insert a img with a specific ID.
<img src="" id="cantTouchThis" />
And use cantTouchThis in your code, your selector would like this:
$("#cantTouchThis").on({
But you are using a button and you said wanted an image, it's confusing, however. You can at any point just insert HTML after your button, like:
$("#cantTouchThis").after('<form>.....</form>');
Please elaborate and explain clearly for a better answer.
Tending to your update, something like this is what you want:
$(function(){
$("#cantTouchThis").on({
mouseover:function(){
$(this).css({
left:(Math.random()*200)+"px",
top:(Math.random()*200)+"px",
});
//Go get PHP via jQuery AJAX
// Grab data and now update your form, or insert form!
// Insert new form $('#following_around').html('<form>...</form>');
// Example change directly the "Pokemon" ID in the form, without the need to completely insert a new form
$('#following_around #random_id').html(Math.random()*10);
}
});
});