Set TextBox background image and value on DIV Click using jQuery

Last Reply 6 months ago By v@run

Posted 6 months ago

I want to display the value and images in the textbox on click.

on clicking the value (Div) i want to display the images and the value together in the text box

 

<div class="input-group" id="dd">
    <input id="materialTypeInput" type="text" class="form-control" name="materialTypeInput"
        placeholder="Select material type" readonly="true" style="margin-left: 10px;
        width: 100%;" />
    <span class="input-group-addon" style="position: relative; width: 18%;" id="itemslist">
        <a href="#" data-toggle="popover" title="Popover Header" data-content=".list" id="inputa">
            <a href="#" class=""><i class="glyphicon glyphicon-chevron-left" style="margin-left: 12px;"
                id="gicon"></i></a></span>
</div>
<div class="col-md-5">
    <div class=" items-list itemhidden col-md-5" id="items" style="margin-bottom: 15px">
        <div class="heading" value="na" style="color: black; text-align: center; padding-bottom: 11px;
            font-size: 14px; border-bottom: solid 2px darkgrey; height: 32px;">
            SELECT MATERIAL TYPE</div>
        <div value="Packaged/Consumer boxes" id="packed" class="item col-md-3 ">
            <img src="Images/package (2).png" class="imgcss"><p style="line-height: 1">
                Packaged / Consumer boxes</p>
        </div>
        <div value="Food and agriculture" id="food" class="item col-md-3 ">
            <img src="Images/plant.png" class="imgcss"><p style="line-height: 1">
                <br />
                Food and agriculture</p>
        </div>            
        <div class="popupCloseButton">
            X</div>
    </div>
</div>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $("#itemslist").click(function () {

        $("#items").removeClass("itemhidden");
        $("#gicon").removeAttr("class");
        $("#gicon").attr("class", "glyphicon glyphicon-chevron-right");
    });

    $(".item").click(function () {
        $("#items").addClass("itemhidden");
        var itemval = $(this).attr("value");
        $("#materialTypeInput").attr('value', $(this).attr("value"));

    });
</script>

 

Posted 6 months ago Modified on 6 months ago

Hey v@run,

Please refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $("#itemslist").click(function () {
            $("#items").removeClass("itemhidden");
            $("#gicon").removeAttr("class");
            $("#gicon").attr("class", "glyphicon glyphicon-chevron-right");
        });
        $(".item").click(function (e) {
            var path = ($(this).children('img').attr('src'));
            $("#items").addClass("itemhidden");
            var itemval = $(this).attr("value");
            $("#materialTypeInput").attr('value', $(this).attr("value"));
            $('#materialTypeInput').css('background-image', 'url(' + path + ')');
        });
    });
</script>
<div class="input-group" id="dd">
    <input id="materialTypeInput" type="text" class="form-control" name="materialTypeInput"
        placeholder="Select material type" readonly="true" style="margin-left: 10px;
        width: 100%;" />
    <span class="input-group-addon" style="position: relative; width: 18%;" id="itemslist">
        <a href="#" data-toggle="popover" title="Popover Header" data-content=".list" id="inputa">
            <a href="#" class=""><i class="glyphicon glyphicon-chevron-left" style="margin-left: 12px;"
                id="gicon"></i></a></span>
</div>
</div> </div> </div> </div> </div> </div>
<div class="col-md-5">
    <div class=" items-list itemhidden col-md-5" id="items" style="margin-bottom: 15px">
        <div class="heading" value="na" style="color: black; text-align: center; padding-bottom: 11px;
            font-size: 14px; border-bottom: solid 2px darkgrey; height: 32px;">
            SELECT MATERIAL TYPE</div>
        <div value="Packaged/Consumer boxes" id="packed" class="item col-md-3 ">
            <img src="New folder/Chrysanthemum.jpg" class="imgcss"><p style="line-height: 1">
                Packaged / Consumer boxes</p>
        </div>
        <div value="Food and agriculture" id="food" class="item col-md-3 ">
            <img src="New folder/Desert.jpg" class="imgcss"><p style="line-height: 1">
                <br />
                Food and agriculture</p>
        </div>
        <div value="Machine / Auto parts" id="machine" class="item col-md-3 ">
            <img src="New folder/Hydrangeas.jpg" class="imgcss"><p style="line-height: 1">
                <br />
                Machine / Auto parts</p>
        </div>
        <div class="row">
            <div value="Electronic goods" id="electronic" class="item col-md-3 ">
                <img src="New folder/Jellyfish.jpg" class="imgcss"><p style="line-height: 1">
                    <br />
                    Electronic goods</p>
            </div>
        </div>
        <div value="Chemical / Powder" id="chemical" class="item col-md-3 ">
            <img src="New folder/Koala.jpg" style="margin-top: 14px; margin-left: 22px;"><p style="font-size: 11px;
                line-height: 1">
                <br />
                Chemical / Powder</p>
        </div>
        <div value="Scrap" id="scrap" class="item col-md-3 ">
            <img src="Images/scrap.png" class="imgcss" style="width: 57px; color: black !important;
                height: 55px;"><p>
                    Scrap</p>
        </div>
        <div value="Construction material" id="constructn" class="item col-md-3 ">
            <img src="New folder/Lighthouse.jpg" class="imgcss"><p style="line-height: 1">
                <br />
                Construction material</p>
        </div>
        <div class="row">
            <div value="Petroleum / Paint" id="petroleum" class="item col-md-3 ">
                <img src="New folder/Penguins.jpg" class="imgcss"><p style="line-height: 1">
                    <br />
                    Petroleum / Paint</p>
            </div>
        </div>
        <div value="Tyre" id="tyre" class="item col-md-3 " style="padding: 9px;">
            <img src="Images/tyre.png" class="imgcss" style="margin-left: 20px"><p style="margin-left: 20px;
                line-height: 1">
                <br />
                Tyre</p>
        </div>
        <div value="Battery" id="battery" class="item col-md-3 " style="padding: 10px;">
            <img src="Images/battery.png" class="imgcss" style="margin-left: 26px;"><p style="margin-left: 20px;
                line-height: 1">
                <br />
                Battery</p>
        </div>
        <div value="Cylinders" id="cylinders" class="item col-md-3 ">
            <img src="Images/cylinders.png" class="imgcss" style="width: 57px; color: black !important;
                height: 50px;"><p style="line-height: 1">
                    <br />
                    Cylinders</p>
        </div>
        <div class="row">
            <div value="Alcoholic beverages" id="bev" class="item col-md-3 ">
                <img src="Images/wine.png" class="imgcss"><p style="line-height: 1">
                    <br />
                    Alcoholic beverages</p>
            </div>
        </div>
        <div class="popupCloseButton">
            X</div>
    </div>
</div>

Screenshot

 


Posted 6 months ago

sir by using below i am getting the answer

e.target.getAttribute('src')