jquery - I need a code to take the input from dropdown menu and gives the output as an image using HTML and Javascript -
jquery - I need a code to take the input from dropdown menu and gives the output as an image using HTML and Javascript -
i new html , javascript. want alter input text , show image when user selects alternative dropdown. 1 function getname, have got changing text part working, unable image output.
<html> <head> <title>hi</title> <h1>hi</h1> </head> <body> <select name="dropdown" id="dropdown"> <option value="maruti">maruti</option> <option value="tata">tata</option> <option value="mahindra">mahindra</option> <option value="fiat">fiat</option> </select> <input type="text" name="name" id="name" onclick="getname()"> <script> function getname(){ var select = document.getelementbyid('dropdown'); var input = document.getelementbyid('name'); select.onchange = function() { input.value = select.value; } function getimage(){ var img = document.getelementbyid('dropdown'); if (img.value=="tata"){ show_image("tata.bmp", 276, 110); } else {if (img.value=="maruti"){ show_image("maruti.bmp", 276, 110); } else {if (img.value=="mahindra"){ show_image("mahindra.bmp", 276, 110); } else {if (img.value=="fiat"){ show_image("fiat.bmp", 276, 110); } } } } } </script> </body> </html>
thanks
one way create img tag , place image there when user selects alternative dropdown. here working updated code,
<html> <head> <title>hi</title> <h1>hi</h1> </head> <body> <select name="dropdown" id="dropdown"> <option value="maruti">maruti</option> <option value="tata">tata</option> <option value="mahindra">mahindra</option> <option value="fiat">fiat</option> </select> <input type="text" name="name" id="name" /> <img id="imghere" src="" /> <script> function getname(){ var select = document.getelementbyid('dropdown'); var input = document.getelementbyid('name'); select.onchange = function() { input.value = select.value; getimage(); } } function getimage(){ var img = document.getelementbyid('dropdown'); var imgtag = document.getelementbyid('imghere'); if (img.value=="tata"){ imgtag.src = "1.png"; } else if (img.value=="maruti"){ imgtag.src = "2.png"; } else if (img.value=="mahindra"){ imgtag.src = "3.png"; } else if (img.value=="fiat"){ imgtag.src = "fiat.bmp"; } } window.onload = getname; </script> </body>
javascript jquery html css html5
Comments
Post a Comment