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>

 

You are viewing reply posted by: v@run 6 months ago.
Posted 6 months ago

sir by using below i am getting the answer

e.target.getAttribute('src')