1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript to change image on text field input

Discussion in 'JavaScript' started by medialab, Jan 28, 2014.

0
  1. #1
    Hey Everyone,

    I am trying to use JS to change an image based on a form field input (it is for credit card images) if a user types the first # as 5, the image changes to master card, 4 as visa and so forth for the main 3-4.

    Anyone have an easy solution with minimal amount of code that would simply work?

    Thanks!!
     
    Solved! View solution.
    medialab, Jan 28, 2014 IP
  2. #2
    With jQuery not native JS this is pretty simple to do. The code below should get you started.

    
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function() {
        $('#number').keyup(function() {
            var image = $('#cc-image'),
                character = $(this).val().substr(0, 1);
            switch(character) {
                case '5' :
                    image.attr('src', 'http://www.pycomall.com/images/P1/Visa_Logo_Vector_File.jpg');
                break;
                case '4' :
                    image.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/MasterCard_logo.png/800px-MasterCard_logo.png');
                break;
                default :
                    image.attr('src', 'http://www.practicalecommerce.com/files/2013/08/credit-card-thumb.jpg');
            }
        });
    });
    </script>
</head>
<body>
<img src="http://www.practicalecommerce.com/files/2013/08/credit-card-thumb.jpg" id="cc-image">
<input type="text" name="number" id="number">
</body>
</html>
    Code (markup):
     
    HuggyStudios, Jan 28, 2014 IP
  3. medialab

    medialab Well-Known Member

    Messages:
    366
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    138
    Digital Goods:
    1
    #3
    Thanks!
     
    medialab, Feb 6, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    @HuggyStudios -- Excellent example though of jQuery for nothing :D

    Jokes aside, if you don't want to rely on some fat bloated pointless library:
    <html><head>
<title>Image Select from form value test</title>
</head><body>
<form>
	<fieldset>
	<input
		type="text"
		name="number"
		id="number"
	/>
	<img
		src="http://www.practicalecommerce.com/files/2013/08/credit-card-thumb.jpg"
		id="cardImage"
	/>
	</fieldset>
</form>

<script type="text/javascript"><!--

// tossed it in an anonymous function so we don't pollute global namespace.

(function(){

	var d = document;

	function handlerAdd(e, v, h) {
		if (e.addEventListener) e.addEventListener(v, h, false);
			else this.attachEvent('on' + v, handler);
	}

	handlerAdd(d.getElementById('number'), 'keyup', function(e) {
		e = e || window.event;
		var t = e.target || e.srcElement, img = d.getElementById('cardImage');
		switch (t.value.charAt(0)) {
			case '5':
				img.src = 'http://www.pycomall.com/images/P1/Visa_Logo_Vector_File.jpg';
			return;
			case '4':
				img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/MasterCard_logo.png/800px-MasterCard_logo.png';
			return;
		}
		img.src = 'http://www.practicalecommerce.com/files/2013/08/credit-card-thumb.jpg';
	});

})();

--></script>

</body></html>
    Code (markup):
    Pretty simple, and within spitting distance of the alleged 'savings' jQuery 'provides'... and of course performs faster sucking less battery time since there's a fraction the overhead. Putting the script AFTER the form in BODY means it loads faster too and doesn't have to wait for style or other scripts to load first... If you put it in an external file, right before </body> is where it belongs.
     
    deathshadow, Feb 7, 2014 IP
  5. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #5
    My problem is that I learnt jQuery before JavaScript. Bad move on my part but it's something a lot of front end devs do. I'm still getting to grips with MVC and OOP with JS.
     
    HuggyStudios, Feb 7, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    ... and that's another reason I don't like 'frameworks' -- too often dev's don't learn the underlying language first; if you don't know the underlying language, you're not qualified to say if the framework actually does anything useful.

    Kind of like PHP devs who learn HTML second -- makes no sense whatsoever since the entire purpose of PHP is to glue databases to HTML.. if you don't know HTML you have no business writing PHP.

    Most frameworks fall into that for me -- if you don't have mastery of the underlying language you have no business using a framework; of course if you have mastery of the underlying language, usually you don't need or want the frameworks.

    In terms of learning OOP -- I got lucky, I learned it in Smalltalk and Object Pascal thirty years ago. To me PHP, JavaScript and Java are just objective C cross-dressing in a frilly dress and theatrical makeup.
     
    deathshadow, Feb 7, 2014 IP