Contact page reloads when send button is pressed even though I want to send it with Jquery

Question

am kind of new to Jquery and I am working on this project Bootstrap html framewok and CodeIgniter, but all along I have found out that whenever I want to process a form using Jquery, and I click on the send/save/login/sign up(anything) button to send the form data to the processing controller method, my form pages keep reloading,

I don't actually know if it is where I placed the Jquery and Javascript source files that makes it behave in that manner.

For example, here is A contact form am trying to validate and process, I want it in a way where, If I click on the send button the page remains static and the form is processed at the backend.

my codes here

public function contact()
{

        $this->form_validation->set_rules('text', 'Message', 'trim|required|min_length[5]');
        $this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');

        /**set error msg*/
        //$this->form_validation->set_message('required', 'Your Username Must Not Be Empty');
        $this->form_validation->set_message('min_length[5]', 'Your Message is too short!');
        $this->form_validation->set_message('valid_email', 'Please Enter A Valid E-mail Address');
        if ($this->form_validation->run() == TRUE  )
                    {
                    //the json and model for saving the feedback into db will bw placed here that will 
        }
        $data['title'] =    ucfirst('Contact Us');
        $data['currentpage'] =    'contact';
        $this->load->view('../templates/header', $data);
        $this->load->view('contact', $data);
        $this->load->view('../templates/footer', $data);
}

header.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>

<!-- Le styles --><?php
   $link = array(
          'href' => base_url().'css/bootstrap.css',
          'rel' => 'stylesheet'
);
echo link_tag($link);                                        
   $link2 = array(
          'href' => base_url().'css/main.css',
          'rel' => 'stylesheet',
          'type' => 'text/css'
);
echo link_tag($link2); 


   $link3 = array(
          'href' => base_url().'css/bootstrap-responsive.css',
          'rel' => 'stylesheet',
);
  echo link_tag($link3); 
  <script src="<?php echo base_url(); ?>js/jquery.js"></script>
  <script >
   $('#send').click(function(){
  $.ajax({
        url: '<?php echo site_url('contact');?>',
        type:'POST',
        dataType: 'json',
        success: function(output_string){
                $('#alert_div').append(output_string);
            } // End of success function of ajax form
        }); // End of ajax call 
   });
  </script>                                 
  </head>
  <body>

interestingly the other javascript script files are included at the footer.

           <!-- Footer -->
 <footer>

 </footer>

<!-- Le javascript
================================================== -->

<!-- Placed at the end of the document so the pages load faster -->
<script src="<?php echo base_url(); ?>js/jquery.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-transition.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-alert.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-modal.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-dropdown.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-scrollspy.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-tab.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-tooltip.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-popover.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-button.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-collapse.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-carousel.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap-typeahead.js"></script>
<script src="<?php echo base_url(); ?>js/prettify.js"></script>
<!-- Validate plugin -->
<script src="<?php echo base_url(); ?>js/jquery.validate.min.js"></script>
</body>
</html>

EDIT Adding the contact.php view page

<div class="container-fluid">
  <div class="row-fluid space">
    <div class="span2">


    </div><!--/span-->


    <div class="span8">
      <div class="top-page-ads">
   Our Feedback Form
      </div><!--/hero-unit-->

  <div class="file-div">
      <div class="row-fluid">
        <div class="span8" style="margin-left:10px;">
      <div id="alert-div"></div>
    <form method="POST" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="input1">Name</label>
            <div class="controls">
                <input type="text" name="contact_name" id="input1" placeholder="Your name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input2">Email Address</label>
            <div class="controls">
                <input type="text" name="contact_email" id="input2" placeholder="Your email address">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input2">Message Subject</label>
            <div class="controls">
                <input type="text" name="contact_subject" id="input3" placeholder="Your Message Subject">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input3">Message</label>
            <div class="controls">
                <textarea name="contact_message" id="input3" rows="5" class="span8"         placeholder="The message you want to send to us."></textarea>
            </div>
        </div>
        <div class="form-actions">
            <input type="hidden" name="save" value="contact">
            <button type="submit" id="send" name="send" class="btn btn-primary">Send</button>
            <button type="reset" class="btn">Clear</button>
        </div>
    </form>
</div>
</div><!--/span-->
</div><!--/row-->
    </div><!--/file-div-->

    </div><!--span-->

</div>

end of edit

I expect the forms to be posted asynchronously but the pages keep reloading when I click on the Send buttons,

any idea?

In addition to the answers below, you need to move your code to after the code at the bottom of the page, and do not include jQuery twice. — Kevin B, Jun 05 '13 at 17:32
@Normal9ja, cut everything between (and including) `` that is your own code and place it just before the `
` tag, and then delete `` because you've already got it below with your other scripts and don't need it twice. That's what Kevin B is saying. — Derek Henderson, Jun 06 '13 at 09:00

score 2 · Answer 1 · edited May 22 '17 at 10:46

2

You have to cancel the default action on your link so this

$('#send').click(function () {});

should be

$('#send').click(function (event) {
  event.preventDefault();
}

try this

edited May 22 '17 at 10:46

Ben Thomas

3,180
2
20
38

answered Jun 05 '13 at 17:30

slash197

9,028
6
41
70

score 0 · Answer 2 · answered Jun 05 '13 at 17:30

0

make sure your button click event handler returns false.

answered Jun 05 '13 at 17:30

matt-dot-net

4,204
21
24

Derek Henderson · Answer 3 · 2013-06-06T09:02:21.450

0

It sounds like you're not preventing the default behavior of the click.

Replace:

$('#send').click(function(){

with:

$('#send').click(function (e) {
    e.preventDefault();

If e.preventDefault(); is not working, try adding either e.stopPropagation(); or e.stopImmediatePropagation();.

edited Jun 06 '13 at 09:02

answered Jun 05 '13 at 17:31

Derek Henderson

9,388
4
42
71

score 0 · Answer 4 · edited May 23 '17 at 12:02

0

It would help to see the body of the page, is the button you are using to submit the form like this: <input type="submit" class="send" value="Submit"> If it is, the web browser is automatically POSTing the form values back to the server.

Method 1:
One way to avoid this is to have a button like this <button type="button" class="send">Submit</button>

Method 2:
If you don't much like the fist method you'll need to use javascript to prevent the even propagation which causes the browser to POST back the form values. This thread may be of use: How to stop event propagation with inline onclick attribute?

Here is a working example of a third method which is to remove the form tag. http://jsfiddle.net/KJt3C/1/

edited May 23 '17 at 12:02

Community

1
1

answered Jun 05 '13 at 17:36

TechplexEngineer

1,836
2
30
48

I have added the view section with the form in it. Thanks – Normal9ja Jun 05 '13 at 20:16
@Normal9ja Did neither method work for you? Also try removing the
and
tags. Something like this: http://jsfiddle.net/KJt3C/1/ – TechplexEngineer Jun 07 '13 at 11:47

Contact page reloads when send button is pressed even though I want to send it with Jquery

4 Answers4