special characters in id of html tags

In html code I am using code <input type = "text" id = "[email protected]"> to get text now it need to get its value which is entered in text field. I am using jquery to do that:

$( document ).ready( function() {
    $( ".bid" ).click( function() {
        idVal = this.id
        bidID = "#" + idVal + "bid"
        spanID = "#" + idVal + "cbid"
        bidValue = $(bidID).val();

        alert(idVal)
        alert(bidID)
        alert(bidValue) //this alert says undefined
        $( spanID ).html( ' ' ).load( '{% url online_machines %}?id=' + idVal + '&bidvalue=' + bidValue);
    });
});

By doing this i get the value error undefined. I tried to remove special characters from the id to get its value. But I need the id with special characters. How can I get its value using jquery ?

Instead of trying for ID using #, try this to match attribute like this,

$('[id=ID]')

or

$('[id='+ID+']')

so instead of

bidID = "#" + idVal + "bid"

you can try

bidID = "[id=" + idVal + "bid]"

Try escaping it:

$('#abc\\@def.com').val();

First paragraph of http://api.jquery.com/category/selectors/