CODEWITHSUNDEEP
javascriptjqueryhtml
user3400389
user3400389

Reputation: 367

Display box on an input through clicking on img

I want that if i click on the image, then the box display in the input field using $('.daterangepicker').show();.

On onclick:

onclick="OpenDatePicker('DateAge')

Markup:

<span class="DateLabelImage" style="cursor: pointer" onclick="OpenDatePicker('DateAge')"><img class="calendarImage" src="../../img/StatImg.png"></span>
<input type="text" id="DateAge" placeholder="Click to open Date Box" class="AgeChangeInput range"/>

Script:

<!-- Call datepicker through image button -->
<script>
function OpenDatePicker(DatePicker)
{
    var classIt = '.' + DatePicker;
    alert(classIt);

    // Click on any Input Field.
    $(classIt).on('click', function()
    {
        alert('Good');
        // Show Box on click Date.
        $('.daterangepicker').show();
    });
}
</script>

I tried using:

.on('click', function()

but this is not working as i am not clicking on the input field instead i am clicking on the image.

Upvotes: 0

Views: 69

Answers (3)

Vikram Jakkampudi
Vikram Jakkampudi

Reputation: 512

http://jsfiddle.net/vikramjakkampudi/9NMgT/1/

function OpenDatePicker(DatPicke)
{
    var classIt = '#' + DatPicke;
    alert(classIt);

    // Click on any Input Field.
    $(classIt).on('click', function()
    {
        alert('Good');
        // Show Box on click Date.
      //  $('.daterangepicker').show();
        $('.ui-datepicker-div').show();
    });
}

Upvotes: 2

Najib
Najib

Reputation: 510

click event should bind in ready or document.ready function . another thing is 'DateAge' is an id not a class so you should call by '#' not '.'. I thing following will work.

$(document).ready(function () {
        $("#DateAge").click(function () {
            alert('Good');
            $('.daterangepicker').show();
        });
    });

Upvotes: 1

rgodse
rgodse

Reputation: 36

I think it should be # instead of a .. Secondly I can't find .daterangepicker in the markup. I did the change as I mentioned. Here is the link http://jsbin.com/feyunagi/1/edit

Upvotes: 0

Related Questions