CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Amaan Iqbal
Amaan Iqbal

Reputation: 761

Ajax returning data in new page

I have a php function in my controller named form and I want to display some message according to the condition.

I am echoing the message inside the if else block. But instead of storing in msg parameter and displaying in the format as given in success function of AJAX it is displaying the message echoed in a new page.

<script type="text/javascript">
        $("#sign_up").click(function() {

            var form_data = {
                firstName: $('#firstName').val(),
                secondName: $('#secondName').val(),
                email: $('#email').val(),
                password: $('#password').val()
            };
            $.ajax({
                url: "<?php echo site_url('form/submit'); ?>",
                type: 'POST',
                data: form_data,
                success: function(msg) {
                    if (msg == 'YES') {
                        $('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>'); }
                    else if (msg == 'NO') {
                        $('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>'); }
                    else {
                        $('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>'); }
                }
            });
            return false;
        });
    </script>

Thanks to all who tried to help!!

Upvotes: 2

Views: 1372

Answers (2)

Alex Mac
Alex Mac

Reputation: 2993

First of all you need to use preventDefault() function like describe below. It will help you to stop redirecting your page to new page.

$("#sign_up").click(function(e) {
    e.preventDefault():

Second correction, In Ajax call add dataType like describe below.

$.ajax({ 
       url: '<?php echo site_url('form/submit'); ?>',
       type: 'POST', 
       data: form_data, 
       dataType: 'json',
       success: function(msg) {

This will help you. Let me know if it not works.

Upvotes: 0

Raman Saluja
Raman Saluja

Reputation: 106

Try using this way.

<script type="text/javascript">
    $("#sign_up_form").submit(function() {

        var form_data = {
            firstName: $('#firstName').val(),
            secondName: $('#lastName').val(),
            email: $('#email').val(),
            password: $('#password').val()
        };
        $.ajax({
            url: "<?php echo site_url('form/submit'); ?>",
            type: 'POST',
            data: form_data,
            success: function(msg) {
                if (msg == 'YES') {
                    $('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>'); }
                else if (msg == 'NO') {
                    $('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>'); }
                else {
                    $('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>'); }
            }
        });
        return false;
    });
</script>

here instead of using click event i recommend using submit event and there was error in secondName: $('#secondName').val(),, changed it to secondName: $('#lastName').val(),. and your form will be 

    <div id="alert-msg"></div>
 <?php 
      echo form_open("form/submit", array("id"=>"sign_up_form"));
  ?>
 <div class="input-group">
     <input type="text" class="form-control" name="firstName" placeholder="First Name" id="firstName">
     <input type="text" class="form-control" name="lastName" placeholder="Last Name" id="lastName">
 </div>

 <input type="email" class="form-control" name="email" placeholder="Email" id="email">
 <input type="password" class="form-control" name="password" placeholder="Password" id="password">

 <div style="text-align:center;margin-top:20px">
      <button type="submit" class="btn btn-primary" id="sign_up">Sign Up</button>
 </div>

Upvotes: 1

Related Questions