Thursday, March 16, 2017

How to store an array of form inputs contructed with angularjs using laravel?

I am making a an application that allows a user to create a quiz. I want the user to add as many questions and answers as they'd like into a database. I want one form to submit an array of questions and answers (1 question + 4 potential answers)

The foreach in my controller creates an error. I checked the contents of what is being sent on submit and it's only the last set of values enetered in the form. Can anyone point me in the right direction of what to do?

PS. If i remove the foreach, i am able to store the last set of values inserted into the form.

Below is the view containing the form

        <form method="POST" action="">

            <div ng-controller = "add-forms">

                <fieldset data-ng-repeat="question in questions">

                    <button class="btn btn-info btn-sm" ng-show="$last" ng-click="removeQuestion()"><span class="glyphicon glyphicon-minus" ></span></button> 
                    <br /><br />

                    <div class="form-group">
                        <label name="question">Question:</label>
                        <input id="question" ng-model="question.question" name="question" class="form-control">
                    </div>

                    <div class="form-group">
                        <label name="answer">Correct Answer:</label>
                        <input id="answer1" ng-model="question.answer1" name="answer1" rows="10" class="form-control">
                    </div>

                    <div class="form-group">
                        <label name="answer">Wrong Answer 1:</label>
                        <input id="answer2" ng-model="question.answer2" name="answer2" rows="10" class="form-control">
                    </div>     

                    <div class="form-group">
                        <label name="answer">Wrong Answer 2:</label>
                        <input id="answer3" ng-model="question.answer3" name="answer3" rows="10" class="form-control">
                    </div>

                    <div class="form-group">
                        <label name="answer">Wrong Answer 3:</label>
                        <input id="answer4" ng-model="question.answer4" name="answer4" rows="10" class="form-control">
                    </div>

                </fieldset>

                <button class="btn btn-info btn-sm" onclick="return false" ng-click="addQuestion()" > <span class="glyphicon glyphicon-plus" > </span> </button>
                <br /><br />

            </div>

            <input type="submit" value="Create Quiz" class="btn btn-success btn-lg btn-block">
            <input type="hidden" name="_token" value="">
        </form>

The angular JS code that dynamically adds or removes more fields to the form

prequiz_module.controller('add-forms', function($scope){

$scope.questions = [{id: 'question1'}];

$scope.addQuestion= function(){
  var newQuestion = $scope.questions.length + 1;
  $scope.questions.push({'id':'choice'+newQuestion});

 };

$scope.removeQuestion = function(){

  var lastQuestion = $scope.questions.length-1;
  $scope.questions.splice(lastQuestion);
};});

Controller that stores the form inputs

public function store(Request $request)
{
    foreach ($request as $q){ 

        $this->validate($q, array(
                'question'=> 'required',
                'answer1' => 'required',
                'answer2' => 'required',
                'answer3' => 'required',
                'answer4' => 'required'
            ));

        $questions = new Questions;
        $questions ->quizID=Session::get('quizID');
        $questions ->question=$q->question;
        $questions->answer1=$q->answer1;
        $questions->answer2=$q->answer2;
        $questions->answer3=$q->answer3;
        $questions ->answer4=$q->answer4;

        $questions->save();
    }

    return redirect()->route('questions.show','testing');
}



via triiiples

Advertisement