Replacing an input type text to an image using jQuery

Question

I have a list of input types I need to replace with their respective images.

<input type="text" id="user_fruitName_0_fruit_type" name="user[fruitName][0][fruit_type]" disabled="disabled" required="required" class="show_fruit form-control" value="MELON" />

<input type="text" id="user_fruitName_1_fruit_type" name="user[fruitName][1][fruit_type]" disabled="disabled" required="required" class="show_fruit form-control" value="STRAWBERRY" />

<input type="text" id="user_fruitName_2_fruit_type" name="user[fruitName][2][fruit_type]" disabled="disabled" required="required" class="show_fruit form-control" value="BLUEBERRY" />

The ID of each input are randomised so I can't use that as a unique ID. Tried this but it doesn't work because of the repeat of class.

    var str = $(this).attr('value')
    if (str = 'MELON'){
        $( ".show_fruit" ).replaceWith( "<img src='img/melon_logo.png'" )
    }
    else if (str = 'STRAWBERRY'){
        $( ".show_fruit" ).replaceWith( "<img src='img/strawberry_logo.png'" )
    }
    })

Any best way to do this? Help a noob here!

Answer 1

What you have to do, is hide the INPUT and have a DIV set with the background image shown there. If they click the image you can make the input to show again... Not totally sure what do you want to accomplish.