Question

I have added one script in the form page which is,

<script type="text/javascript">
$(document).ready(function(){
$('.removeOnFocus').each(function()
{
    this.data = new Object(); //TODO don't overwrite previous data
    this.data.value = this.value;

    $(this).focus(function(){
        if (this.value == this.data.value)
            this.value = '';
    });
    $(this).blur(function(){
        if (this.value == '')
            this.value = this.data.value;
    });
});
});
</script>

To make this script working, I have added <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in the same page. Its working fine but other contents in the page getting overlapping. How to avoid this and have to make this script?

Was it helpful?

Solution

Your script is a Jquery script : so you have to include it if you want your script to work.

If you don't want to include Jquery, you will have to rewrite your script using Prototype.

Finally, if you prefer to use JQuery, there will be a conflict between Jquery and Prototype for the symbol $ : try to replace $ by jQuery in your script.

To go further, you may want to try JQuery NoConflict .

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top