Saving multiple data dynamic form in Laravel 5.1 and Vue JS

Question

I have to add/post data form. But the form dynamically can increase as user 'click' on a button. I've already browse about it and there some answer i get like using $request->all() to fetch all data from input forms.

And then my problem is, my app using VueJS as front-end. Is there any some configuration on VueJS script to post all data from that dynamic form??

My Blade template that will be increase dynamically:

<div id="form-message">
{!! Form::text('rows[0][DestinationNumber]', null, [
    'id' => 'recipient',
    'class' => 'form-control',
    'v-model' => 'newMessage.DestinationNumber'
    ])
!!}
{!! Form::textarea('rows[0][TextDecoded]', null, [
    'rows' => '3',
    'id' => 'recipient',
    'class' => 'form-control',
    'v-model' => 'newMessage.TextDecoded'
    ]) 
!!}
</div>

That zero number will increase depends on how much user click add button. And then here my VueJS script

var newSingleMessage = new Vue({
el: '#newsinglemsg',
data: {
    newMessage: {
        DestinationNumber: '',
        TextDecoded: ''
    },
},
methods: {
    onSubmitForm: function(e) {
        e.preventDefault();
        var message = this.newMessage;

        this.$http.post('api/outbox', message);
        message = { DestinationNumber: '', TextDecoded: '' };
        this.submitted = true;
    }
}

});

On laravel controller, i have simple logic to test result how data passed.

$input = $request->all();
$output = dd($input);
return $output;

And, I test it using 2 additional form. So, the data should be 3 rows. The result (checked from FireBug) to be like this

{"DestinationNumber":"1234567890","TextDecoded":"qwertyuio"}

Data passed just one, and then the type is JSON. Even I use return $output->toArray(), type still JSON.

Oh yeah, once more. Idk how to make the zero number increase dynamically using javascript. When testing, i just manual add the form. Here my add click function javascript

var i = 0,
clone = $('#form-message').clone(),
recipient = document.getElementById('recipient');
recipient.setAttribute('name', 'rows['+ i +'][DestinationNumber]');
clone.appendTo('.form-message:last');
i++;

For second and next rows, name attribute not added on the input elements. Thanks

Jeff · Accepted Answer · 2016-01-20 07:28:19Z

3

You're mixing blade and jquery and vue in a way that is pretty confusing. Check out this JS fiddle that accomplishes all of this with Vue:

https://jsfiddle.net/cr8vfgrz/10/

You basically have an array of messages that are automatically mapped to inputs using v-for. As those inputs change, your messages array changes. Then when submit is pressed, you just post this.messages and the array of messages is sent to server. Then you can clear the array to reset the form.

Template code:

<div id="form-message">
<button class="btn btn-default" @click="addNewMessage">New Message</button>
<template v-for="message in messages">
    <input type="text" v-model="message.DestinationNumber" class="form-control">
    <textarea rows="3" v-model="message.TextDecoded" class="form-control"></textarea>
</template>
<button class="btn btn-success" @click.prevent="submitForm">Submit</button>
</div>

Vue code:

var newSingleMessage = new Vue({
    el: '#form-message',
    data: {
        messages: [
            {
                DestinationNumber: '',
                TextDecoded: ''
            }
        ],
        submitted:false
    },
    methods: {
        addNewMessage: function(){
            this.messages.push({
                DestinationNumber: '',
                TextDecoded: ''
            });
        },
        submitForm: function(e) {
            console.log(this.messages);
            this.$http.post('api/outbox', {messages:this.messages})
            .then(function(response){
                //handle success
                console.log(response);
            }).error(function(response){
                //handle error
                console.log(response)
            });
            this.messages = [{ DestinationNumber: '', TextDecoded: '' }];
            this.submitted = true;
        }
    }
});

Edit:

In the controller you can use $request->input('messages'); which will be the array of messages. You can insert multiple new Outbox model using:

Outbox::insert($request->input('messages'));

or

foreach($request->input('messages') as $message){
    Outbox::create($message);
}

edited Jan 20, 2016 at 7:28

answered Jan 20, 2016 at 5:33

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

3 Comments

Muhammad Izzuddin Al Fikri Over a year ago

Wonderful! Now how I can save that data with single query or without using loop??

Jeff Over a year ago

Would need to see your controller code. Do you have a Model created for these messages and a database table? Using a loop to save them to the database would be just fine I think

Muhammad Izzuddin Al Fikri Over a year ago

yes, i have a model. It called "Outbox", column just ID(guarded auto increment), DestinationNumber, TextDecoded and unfortunately I just try to dump it using dd() function :D Try to use foreach but not sure how to catch value from JSON Object. I mean use this $request->get('this sud be values'). Can you updated your answer for the example?? Noprob if using loop

Collectives™ on Stack Overflow

Saving multiple data dynamic form in Laravel 5.1 and Vue JS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related