Javascript: radio button and vaule based image display

Question

I am currently working with displaying images based on the value selected with the switch. But currently I'm in the wall, making the code as short and efficient as possible. I have several categories to choose from, and as I get closer to the problem, they will require me to write a few check_value# . Is there a way to combine these two functions? so in the future, if I have 5 or 7 categories, I will not have a function for each. EXAMPLE

 <script> function check_value(val) { var el = document.getElementById("imgBox1"); var img = imgs[val]; if (val>0 && val<4) { //will trigger when [1,2,3] el.src = "images/bike" + val + ".jpg"; el.style.display = ""; } } function check_value1(val) { var el = document.getElementById("imgBox2"); var img = imgs[val]; if (val>0 && val<4) { //will trigger when [1,2,3] el.src = "images/tire" + val + ".jpg"; el.style.display = ""; } } </script> 

HTML

 <h2>Choose a bike</h2> <form name="builder"> <input type="radio" name="field" value="1" onclick='check_value(0)'/> KAWASAKI KX 450F<br /> <input type="radio" name="field" value="2" onclick='check_value(1)'/> 2010 Yamaha Road Star S<br /> <input type="radio" name="field" value="3" onclick='check_value(2)'/> Aprilia RSV4<br /> </form> <img id="imgBox1" src="#" style="display:none"> <h2>Choose a tire</h2> <form name="tire"> <input type="radio" name="field" value="1" onclick='check_value1(0)'/> Michelin Pilot Road 3 Tires<br /> <input type="radio" name="field" value="2" onclick='check_value1(1)'/> Dunlop Roadsmart Sport-Touring Tires<br /> <input type="radio" name="field" value="3" onclick='check_value1(2)'/> Pirelli Scorpion Trail Tires<br /> </form> <img id="imgBox2" src="#" style="display:none"> 

Answer 1

try this updated

make the image name like bike # .jpg, tire # .jpg bike0.jpg, bike1.jpg, bike2.jpg ....

 function check_value(val, id, type) { var el = document.getElementById("imgBox" + id); if (val>0 && val<4) { //will trigger when [1,2,3] el.src = "images/"+ type + val + ".jpg"; el.style.display = ""; } 

}

 <h2>Choose a bike</h2> <form name="builder"> <input type="radio" name="field" value="1" onclick='check_value(0, 1, "bike")'/> KAWASAKI KX 450F<br /> <input type="radio" name="field" value="2" onclick='check_value(1, 1, "bike")'/> 2010 Yamaha Road Star S<br /> <input type="radio" name="field" value="3" onclick='check_value(2, 1, "bike")'/> Aprilia RSV4<br /> </form> <img id="imgBox1" src="#" style="display:none"> <h2>Choose a tire</h2> <form name="tire"> <input type="radio" name="field" value="1" onclick='check_value(0, 2, "tire")'/> Michelin Pilot Road 3 Tires<br /> <input type="radio" name="field" value="2" onclick='check_value(1, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires<br /> <input type="radio" name="field" value="3" onclick='check_value(2, 2, "tire")'/> Pirelli Scorpion Trail Tires<br /> </form> <img id="imgBox2" src="#" style="display:none"> 

Answer 2

Here is the fiddle for you, using custom HTML and jQuery attributes Javascript library:

Obviously, you want to set the source of the image, and not show the URL in the paragraph, but you realized that I'm sure.

 // html <input type="radio" name="tire" img-preview="tire-preview" img-loc="tire/1.jpg" /> First<br> <input type="radio" name="tire" img-preview="tire-preview" img-loc="tire/2.jpg" /> Second<br> <p id="tire-preview"> Load: - </p> <input type="radio" name="wheel" img-preview="wheel-preview" img-loc="wheel/1.jpg" /> Uno<br> <input type="radio" name="wheel" img-preview="wheel-preview" img-loc="wheel/2.jpg" /> Dos<br> <p id="wheel-preview"> Load: - </p>​ // js $("input[type=radio]").click(function(){ var imageUri = "http://site.com/images/" + $(this).attr("img-loc"); $("#" + $(this).attr("img-preview") ).text("Load: " + imageUri); });​ 

Answer 3

You can use this

 <script> function call(formNo,val) {if()//give your checkings here according to what you want {} alert(formNo+" "+val); //just for example what values you are getting } </script> <h2>Choose a bike</h2> <form name="builder" id="1"> <input type="radio" name="field" value="1" onclick='check_value(1,0)'/> KAWASAKI KX 450F<br /> <input type="radio" name="field" value="2" onclick='check_value(1,1)'/> 2010 Yamaha Road Star S<br /> <input type="radio" name="field" value="3" onclick='check_value(1,2)'/> Aprilia RSV4<br /> </form> <img id="imgBox1" src="#" style="display:none"> <h2>Choose a tire</h2> <form name="tire" id="2"> <input type="radio" name="field" value="1" onclick='check_value1(2,0)'/> Michelin Pilot Road 3 Tires<br /> <input type="radio" name="field" value="2" onclick='check_value1(2,1)'/> Dunlop Roadsmart Sport-Touring Tires<br /> <input type="radio" name="field" value="3" onclick='check_value1(2,2)'/> Pirelli Scorpion Trail Tires<br /> </form> <img id="imgBox2" src="#" style="display:none">