Conflict between $(document).ready and prototype.js

Question

I have this problem with prototype.js when I include $(document).ready in my webpage it doesn't work.

Here is part of my code:

<script type="text/javascript" src="<?php echo base_url();?>asset/scripts/prototype.js"></script>
<script type="text/javascript">    
  function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
  }

  $(document).ready(function(){
    $('#sendmail2').on('submit', function(){
      alert('Ok');
    });
  });           
</script>

But when I remove prototype the script works fine.

Answer 1

change all "$" with extended name "jQuery"

jQuery(document).ready(function(){

Answer 2

Putting jQuery Into No-Conflict Mode

Answer 3

Try using

jQuery(document).ready

instead of

$(document).ready