Ajax modal form validation and submit - codeigniter

Question

I am new to MVC and currently working on a basic website setup. I am trying to have a modal window open where one can input some data and then press submit to submit it back to the database.
Using CodeIgniter and this Jquery Modal (doesn't necessary have to be this one thou).
Again I am very new to MVC so having some trouble visualizing the flow of data.
The modal opens correctly, but I'm trying to display the validation/errors in the same modal without opening a new window. What would I place near echo("error-ajax");, opening a view seems to result in opening a new window.
View -- Opens Modal:
...
...
View -- Actual Form:
<?php echo validation_errors(); ?>
<?php echo form_open('form'); ?>
<h3>New</h3>
<p>
<label>ID: <input class="pull-right" type="text" name="idnumber" value="<?php echo set_value('idnumber'); ?>" size="9"/></label>
</p>
<div><input type="submit" value="Submit" /></div>
</form>
<script>
$(function(){
$('form').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
async: false,
url: "<?php echo site_url("bondform/save_form"); ?>",
success: function(){alert('Succes');},
error: function(){alert('Error');}
});
});
});
</script>
Controller:
<?php
class Bondform extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$config = array(
array(
'field' => 'idnumber',
'label' => 'Id Number',
'rules' => 'trim|required|min_length[9]|max_length[9]|xss_clean'
)
);
$this->form_validation->set_rules($config);
}
public function view_form()
{
$this->load->view('bond/form');
}
public function save_form()
{
if ($this->form_validation->run() == FALSE)
{
if ($this->input->is_ajax_request())
{
echo("error-ajax"); //placeholder, debug
}
else
{
echo("error-noajax"); //placeholder, debug
}
}
else
{
echo("succes-close"); //placeholder, debug
}
}
}
Thank you very much,

Answer 1

To start, move your ajax function from the modal view to the view that opens it, then you can control the contents of the modal without losing your form view.
Opens Modal:
<script>
$(function(){
$('body').on('submit', 'form', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "<?php echo site_url("bondform/save_form"); ?>",
data: $(this).serialize();
success: function(response){ $('#form_container').html(response); alert('Succes');},
error: function(){alert('Error');}
});
});
});
</script>
Actual Form:
<div id="form_container">
<?php echo validation_errors(); ?>
<?php echo form_open('bondform/save_form'); ?>
<h3>New</h3>
<p>
<label>ID: <input class="pull-right" type="text" name="idnumber" value="<?php echo set_value('idnumber'); ?>" size="9"/></label>
</p>
<div><input type="submit" value="Submit" /></div>
</form>
</div>
Should get you started in the right direction.