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!!
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 -- Excellent example though of jQuery for nothing 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.
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.
... 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.