Using AJAX for passing form inputs in CodeIgniter - php

Question

I'm a newbie in CodeIgniter and I'm trying to pass my form inputs from the view to the controller. I was able to pass it, and was able to insert it on the database. However, I want to use Ajax for this so the whole page won't reload when I press the submit button. I have watched and tried this youtube tutorial: https://www.youtube.com/watch?v=IURutxKvukA, but it doesn't work for me. :( Thank you in advance!
This is my controller, Teacher.php
public function insert_quiz($quiztitle, $quizdescription, $value="")
{
$data = $this->input->post();
$numData = count($data);
$response = array();
$stringChoices = "";
if($numData > 1)
{
for ($i=4; $i < $numData; $i++)
{
$num = $i-3;
$offset = "inputChoice$num";
if ($i == 4)
{
$stringChoices = $data[$offset];
}
else if ($i != 4)
{
$stringChoices = $stringChoices . "," . $data[$offset];
}
}
}
$quizitems = array('Question' => $data['inputQuestion'], 'Choices' => $stringChoices, 'Correct' => $data['correctanswer'], 'NumSequence' => $data['questionnumber']);
$quizitemid = $this->Teacher_model->insertQuizItemOnQuizItems($quizitems);
if (count($quizitemid) == 1)
{
$quizdeedid = $this->Teacher_model->getQuizDeedId($quiztitle);
$quizdatasetitem = array('QuizSet' => $data['quizsetnumber'], 'QuizItemID' => $quizitemid, 'QuizDeedID' => $quizdeedid);
$quizdatasetid = $this->Teacher_model->insertQuizOnQuizDataSet($quizdatasetitem);
if(count($quizdatasetid) == 1)
{
$response = array(
'status' => "success"
);
echo json_encode($response);
}
}
}
and this is my quiz form, in quizView.php
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary">
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card-pf">
<div class="card-pf-heading">
<h1 align="center">
<strong><?php echo str_replace("%20", " ", $quizTitle); ?></strong>
</h1>
<h2 class="card-pf-title" align="center">
<label><?php echo str_replace("%20", " ", $quizDescription); ?></label>
</h2>
</div>
<div class="card-pf-body" id="divquizset" style="height: 50px">
<div class="col-sm-2">
</div>
<div class="col-sm-9" id="divquizset">
<div class="col-sm-3">
<p align="right"> QUIZ SET: </p>
</div>
<div class="col-sm-4">
<input align="center" type="text" id="quizset" class="form-control"></input>
</div>
<button class="btn btn-default col-sm-2" align="left" onclick="saveQuizSet()">Save</button>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-sm-12">
<div id="status">
</div>
</div>
</div>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary" id="list1" style="padding-top: 0px">
<!-- LIST VIEW PART 1 -->
<div id = "div1" style="padding-top: 0px">
<?php echo form_open("Teacher/insert_quiz/$quizTitle/$quizDescription", "id='myForm'", $hidden= array()); ?>
<div>
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<div class="list-group-item-header" id="div2">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="text" name="questionnumber" id="inputquestionnumber1" class="form-control">
<!-- <b id="questionnumber" name="questionlabel" for="inputQuestion">Question 1: </b> -->
<input type="hidden" name="quizsetnumber" id="quizsetnum" class="form-control" value="">
</div>
<div class="list-view-pf-actions">
<?php echo form_submit('submit', 'Save', $attributes=array("class" => "btn btn-default")); ?>
<!-- <button class="btn btn-default" style="width: 100px">Save</button> -->
<button class="btn btn-default" style="width: 100px">Edit</button>
<button class="btn btn-default" style="width: 100px">Delete</button>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text form-group">
<input type="text" name="inputQuestion" id="input1" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden" id="containerDiv">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<!-- LIST VIEW SUB VIEW -->
<div class="col-md-12">
<form class="form-horizontal" style="padding-left: 100px">
<div class="form-group">
<div class="col-sm-7" align="center">
<dt> CHOICES </dt>
</div>
<div class="col-sm-5" align="center">
<dt> CORRECT ANSWER </dt>
</div>
<div class="col-sm-7">
<div id="divCorrect" style="padding-top: 10px">
<input type="text" name="correctanswer" id="inputcorrectanswer1" class="form-control">
</div>
</div>
<div class="col-sm-5" id="divChoiceContainer1">
<div id="divChoice" style="padding-top: 10px">
<input type="text" name="inputChoice1" id="inpChoice1" class="form-control">
</div>
</div>
<div class="col-sm-7" id="otherDivChoiceContainer1">
</div>
<div class="col-sm-7" align="center" style="padding-top: 20px">
<button type="button" class="btn btn-primary btn-lg btn-block col-xs-9" id = "1" align="center" onclick="addChoiceFunction(this.id)" >Add Choices</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?= form_close() ?>
</form>
</div>
</div>
</div>
<div class="col-sm-3 container-fluid container-cards-pf container-pf-nav-pf-vertical nav-pf-persistent-secondary">
<button type="button" class="btn btn-primary btn-lg btn-block col-md-9" align="center" onclick="addQuestionFunction()">Add Question</button>
</div>
These are the scripts I used, they're also in the quizView.php:
<script>
jQuery(document).ready(function($) {
$('#myForm').ajaxForm({
beforeSubmit: function(formData, jqForm, options){
$("div#status").html('');
},
success: function(response){
var result = $.parseJSON(response);
$("div#status").html('<div class="alert alert-' + result.status + '" role="alert"> HI </div>');
}
});
});
</script>
<script>
$(document).ready(function () {
// click the list-view heading then expand a row
$(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
.find(".list-group-item-container").toggleClass("hidden");
} else {
}
})
// click the close button, hide the expand row and remove the active status
$(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
})
});
</script>
<script>
function addQuestionFunction() {
$num = $('div .list-view-pf-view').length + 1;
$divId = "#" + $num;
$toClone = $('#div1').clone(true).find("input").val("").end();
$($toClone).find("#containerDiv").addClass("hidden").end();
$($toClone).find("#otherDivChoiceContainer1").attr("id", "otherDivChoiceContainer"+ $num);
$($toClone).find("#otherDivChoiceContainer" + $num).find("#divChoice").remove().end();
$($toClone).find("#1").attr("id", $num);
$($toClone).find("#questionnumber").text("Question " + $num + ": ");
if($($toClone).find("span").hasClass("fa-angle-down")) {
$($toClone).find(".fa-angle-right").removeClass("fa-angle-down").end();
}
$('#list1').append($toClone);
}
function addChoiceFunction(clicked_id) {
$num = parseInt(clicked_id);
$divId = "#otherDivChoiceContainer" + $num;
$numChoice = $($divId + " input").length + 2;
$toClone = $('#divChoice').clone(true).find("input").val("").end();
$toClone.find("#inpChoice1").attr("id", "inpChoice" + $numChoice).attr("name", "inputChoice" + $numChoice);
// $toClone.find("#inpChoice" + $num).attr("name", $("#inpChoice"+$num).attr("name").replace(/\\[\d+\\]/,"inputChoice" + $num));
//alert($numChoice);
$($divId).append($($toClone));
}
function saveQuizSet() {
$('#quizsetnum').val($('#quizset').val());
$quizsetval = $('#quizset').val();
$('#divquizset').empty();
$('#divquizset').append(' <p align="center"> QUIZ SET: '+ $quizsetval + '</p>');
// $('#divquizset').append(" <p align="center"> QUIZ SET: A </p>");
}
</script>
And for my script sources I used these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script src="http://www.patternfly.org/components/jquery/dist/jquery.min.js"></script>
<script src="http://www.patternfly.org/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="http://www.patternfly.org/components/d3/d3.min.js"></script>
<script src="http://www.patternfly.org/components/c3/c3.min.js"></script>
<script src="http://www.patternfly.org/components/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://www.patternfly.org/components/google-code-prettify/bin/prettify.min.js"></script>
<script src="http://www.patternfly.org/components/clipboard/dist/clipboard.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly/dist/js/patternfly.min.js"></script>
<script src="http://www.patternfly.org/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
<script src="http://www.patternfly.org/assets/js/patternfly-site.min.js"></script>
<link rel="canonical" href="http://www.patternfly.org/pattern-library/navigation/vertical-navigation/vertical-navigation.html">
This is what my form looks like
quizviewform
And this is what it's returning
returnpage
It's inserting on my database, but it doesn't return on the page and ajax doesn't work. :( I hope someone can help me here. Thanks!