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

Question

I am making 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 entered 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="{{ route('questions.store') }}">

            <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="{{ Session::token() }}">
        </form>

The AngularJS code that dynamically adds or removes more fields to the form, as follows:

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 input

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');
}

@triiiples are you trying to collection all questions and answers in some kind JavaScript object and then trying to submit them all at once to laravel app? If so, because of the way you have named your fields it will take the last instance/values. Tried using [] like question[], answer1[] and so on? For More Info: php.net/manual/en/faq.html.php — mishka
– mishka, Commented Mar 16, 2017 at 23:18

Tomasz Rup · Accepted Answer · 2017-03-16 23:18:30Z

1

Extending my comment.

You have duplicate fields with the same name="".

If you post any number of fields, if every of them has the same name="", only the last goes in. You can change it to name="question[]", so they get sent as an array with corresponding indexes.

If you do that for each input, you should get 5 arrays (question[], answer1[] etc.), which should have matching indexes. So answer1[0] belongs to question[0].

answered Mar 16, 2017 at 23:18

Tomasz Rup

8591 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

triiiples Over a year ago

This was exactly my problem. Thank you! I added: name="question[@{{$index}}]"... and made some minor edits in the controller and it works perfectly

jackel414 · Accepted Answer · 2017-03-16 23:08:52Z

0

I would use dd(); to confirm that value of your variables as you move through the function if you have issues. To start with though, I would update your foreach call to be:

foreach ($request->all() as $q) {

The array of values in the request is accessed via the all() method, as per the documentation.

answered Mar 16, 2017 at 23:08

jackel414

1,6862 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related