We Keep Coding

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.

Image change, in a function onClick? Possibly using jQuery?

I have a working button for changing the style of text in a text area. The button makes the text bold and unbold on second click and this works efficiently.
However what I want is for the image to change, each time that the button is pressed so that it is indicated that the text has had that formatting applied.
The HTML for the button is as follows
<a href="#" class="ButtonStyling" type="button" onclick="boldTextArea()" value="Bold"}><img alt='Bold Button' src='BButton.gif'></a>
I would be interested in any responses using Javascript or JQuery.

Without seeing your HTML, I have to guess how your image is displayed.
If it is an image, change the source via src.
var image = document.getElementById("yourImage");
image.src = "newImage.png";
If it is a background image, change the style
image.style.backgroundImage = "url(newImage.png)";

toggleSlide issue on Chrome - cutting letters / invisible text

I'm using jquery 1.8.2 and toggleSlide animation to smootly show search input box but that have two issues on chrome - one of them I've separated into a jsfiddle
$('#hiddenBlock').slideToggle(500);
$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);
On chrome open this fiddle and click button - write some text in the textbox and click button again twice - one to hide second to show again - text is now invisible and stay that way until get refreshed by f.e. writing one more letter.
This maybe also connected to second issue, which is seems connected to canvas/displaying text - it allow cut letters like 'l' in half....
In that example you see 'l' and 't':
'l' and 't' http://img171.imageshack.us/img171/5784/beztytuuvxq.png

You don't need to slideToggle both the textbox and search button. Just the div hiddenBlock is enough.
I simplyfied your solution:
// on dom ready hides your div
$(document).ready(function(){
$('#hiddenBlock').hide();
});
function toggleSearchWindow() {
$('#hiddenBlock').slideToggle("fast");
}
$('input[type=button]').click(function() {
toggleSearchWindow();
});​
TEST
UPDATE I put the typed text in a temp variable to see whether this solve your cutted text:
TEST2

Try removing
display:none;
from #inputhiddenblock and #but css and then remove
$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);

I have update your jsfiddle link.
Problem was you are not initialize the input-text field and in dom load for input-text field we have initialize as inline not display none.
I have commented it;
$('#inputHiddenBlock').slideToggle(500);

Show text one by one character using jQuery

I want to show the text that is in a ul tag one by one on mouseover of some text. It is showing some error. How can I fix it?
You can check the code mouseover on "hover here hover again" link in a link. Is there another way to do it?

You are gettign errors because you are calling a function which is not defined:
hideCaption

onclick event - call a button using something other than id

I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.

This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);