Javascript: Radio button and displaying images based on a vaule

I am currently working with displaying images based on the value chosen from a radio button. But I am currently running into a wall with making the code as short and efficient as possible. I have several categories to choose from and they way i am approaching the issue will require for me to write several check_value#. Is there a way to combine those two functions? so in the future if i have 5 or 7 categories i wont have to 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"> 

Answers


try this, updated

make image name as 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">

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

Obviously you'd want to actually set the image's source, rather than displaying the url in a paragraph, but you get the idea, 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);

});​

Need Your Help

IE and jQuery posts are not working

javascript jquery ajax internet-explorer post

I'm trying to post to my backend with jQuery ajax, and it works in all browsers except internet explorer (ie 11).

Better structure for Looking up booleans for an index?

c# .net generics

This is a bit nitpicking and I might have overlooked something simple

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.