Updating image source with jQuery

Question

So I'm trying to automatically update an image source using javascript but for some reason it won't work. The image is being retrieved from my php text generator (generates an image with text on it) the text is grabbed from a input box. I want it to automatically grab the text inside the inputbox then change the src of image to gen.php?text=Input_box_text_goes_here

here is my code:

<html>
    <head>
        <title>text generator</title>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    </head>
    <body>
        <script language=javascript type='text/javascript'> 
            setInterval(function () {
                var str= document.form.letters.value;
                $('#logo').src("gen.php?text="+str);
            }, 10);
        </script>
        <img id="logo" name="logo" src="gen.php?text=default" />
        <form name="form" action="">
            Text: <input type="text" name="letters"/>
        </form>
    </body>
</html>

any help will be appreciated.

an image request interval of 10ms? that's going to kill your browser AND your server — Joseph
– Joseph, Commented Mar 30, 2012 at 23:37

John W · Accepted Answer · 2012-03-30 23:16:20Z

2

Change $('#logo').src("gen.php?text="+str); to $('#logo').attr("src", "gen.php?text="+str);.

answered Mar 30, 2012 at 23:16

John W

1,5222 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph · Accepted Answer · 2012-03-31 01:31:58Z

1

try:

<script>
    $(function(){

        //reference the image
        var img = $('#logo');

        //use onkeyup instead of polling
        $('input[name="letters"]').on('keyUp',function(){

            //get the value every keystroke
            var inputValue = $(this).val();

            //apply the values to the image source
            img.each(function(){
               this.src = "gen.php?text="+inputValue;
            });
        });
    });
</script>

edited Mar 31, 2012 at 1:31

answered Mar 30, 2012 at 23:43

Joseph

120k31 gold badges186 silver badges238 bronze badges

Collectives™ on Stack Overflow

Updating image source with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related