Question

I have this really strange problem: The first function works and picks up information as it should, the second does works , the third function does not work. (I commented them each out while testing) I tried for a little with $.post but being new to jquery tried to make it simpler and simple get some information instead. Does the .click(function() work differently to .submit(function() ?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

 $(document).ready(function(){

    $('#mybutton').click(function(){
    $.get("<?echo base_url();?>index.php/example",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });

    $('#emailform').submit(function(){
    alert("UNDERSTOOD");
    });

    //This does not work when at all, including when commenting the above function above out.   
    $('#emailform').submit(function(){
    $.get("<?echo base_url();?>index.php/example",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });
});

</script>

Answer 1

If you want to send an ajax request on submit event, you should prevent the default action of the event:

$('#emailform').submit(function(event){
   event.preventDefault()
   $.get("<?echo base_url();?>index.php/example",function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
   });
});