CodeIgniter Forums
jQuery Form go through e.preventDefault() to CodeIgniter controller if successful post - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forum-21.html)
+--- Thread: jQuery Form go through e.preventDefault() to CodeIgniter controller if successful post (/thread-57128.html)



jQuery Form go through e.preventDefault() to CodeIgniter controller if successful post - El Forum - 02-18-2013

[eluser]thekalaban[/eluser]
Overview

I have a form:

Code:
<?php echo form_open_multipart( 'new_account/validate_new_account', array('id' => 'main-form') ); ?>    
        <input type="text" id="text_id" name="text-name" />
        <input type="file" id="file_id" name="file_name" />
        // ...
        <input type="submit" id="main-submit" />
    <?php echo form_close(); ?>

I submit it to my controller's validate_new_account() function:

Code:
function validate_new_account()
    {
        // validations here

        if ( $this->form_validation->run() == FALSE ) {
     // JSON-encoded validations
            $errors = json_encode( $this->form_validation->error_array() );
            echo $errors;
     } else {
            // next step
     $this->view_preview_form( $this->get_post_data() );
     }
    }

I use the jQuery Form Plugin to interact with the controller.

Code:
var options = {
        url: "<?php echo site_url('new_account/validate_new_account'); ?>",
        type: 'POST',
        dataType: 'json',
        success: function(data) {

          if (data.length === 0) {
            alert('Form successfully submitted!');
          } else {
            // echo validation errors from CodeIgniter
            alert("Some fields weren't answered successfully. Please answer them.");
            $.each(data, function(key, value){
              var container = '<div class="error">'+value+'</div>';
              $('.form-element input[name="'+key+'"]').after(container);
            });
    
          }
          
        }
    };

    $('#main-submit').click(function(e) {
      $('#professional-form').valid();
      $('#professional-form').ajaxSubmit(options);  
      e.preventDefault();
    });

Problem

Without my ajax function, the code above works perfectly but I have dynamically added elements which requires ajax to handle all validations or else these elements will be gone (bad UX).

So if I enable and use my ajax function, the validation errors from CodeIgniter are printed out how I want BUT if all validations are now correct, the form does not go to $this->view_preview_form( $this->get_post_data() );.

Why is this happening? I've search for similar problems but sadly none helped my weird case.

How can I get pass through e.preventDefault() if the form was sent successfully?


jQuery Form go through e.preventDefault() to CodeIgniter controller if successful post - El Forum - 02-18-2013

[eluser]Otemu[/eluser]
Hi

Use this


Code:
if (data.length === 0) {
            alert('Form successfully submitted!');
return false
          }



jQuery Form go through e.preventDefault() to CodeIgniter controller if successful post - El Forum - 02-18-2013

[eluser]thekalaban[/eluser]
Thank you sir!


jQuery Form go through e.preventDefault() to CodeIgniter controller if successful post - El Forum - 02-18-2013

[eluser]thekalaban[/eluser]
Hello, someone already in SO got the solution. Thanks.

Solution