Send JSON response dynamically

Hello! After watching the VUE tutorials from the courses available I am looking to apply some features in my personal project.

My goal is to create a form, which has two parts (1- a popup window; 2- a multi-step-form). So the user starts typing the data on the popup window and after is redirected to continue filling the form.

The important number that binds both forms is the 'Ref', which is filled first, stored in the DB and then I would like to retrieve this number to continue the process of filling.

I managed to store the data into the DB and redirect it to the new page, even though the 'Ref' is static (10), but I need it dynamic.

Another possibility would be to get the last Ref inserted on the DB.

Any suggestions are welcome.

the popup VUE template

<template>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">New CMR</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="" action="" method="POST" @submit.prevent="onSubmit">
          <div class="">
            <label for="">New Transport*</label>
            <input required type="text" v-model="fields.Ref">
          </div>

          <div class="">
            <label for="CMRtype">Type of CMR*</label>
            <select required class="" name="CMRtype" v-model="fields.CMRtype">
              <option value="international_CMR">International CMR</option>
              <option value="consigment_note">Consigment Note</option>
            </select>
          </div>

          <p>(*) Mandatory</p>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Create</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

</div>
</template>

<script>

  export default {
    data() {
      return {
        fields: {},
        errors:{}
      }
      },

    methods: {
      onSubmit() {
        this.errors = {};
        axios.post('/new_cmr', this.fields).then(response => {
          window.location = response.data.redirect;
        });

      },
  },
}
</script>

The Controller

 public function store_pop(Request $request)
 {
   $this ->validate($request, [
     'Ref',
     'CMRtype'
   ]);

   eCMR::create([
     'Ref' => request('Ref'),
     'CMRtype' => request('CMRtype'),
   ]);

     return ['redirect' => 'operations/new_ecmr/',
              'Ref' => 10];
 }

automica

5 years ago

Best Answer

Level 54

@henrique_f with your

 axios.post('/new_cmr', this.fields).then(response => {
          window.location = response.data.redirect;
        });

when responding to that post request, you should be able to pass back an id of the newly created resource, and this can be part of an argument for your redirect.

public function store_pop(Request $request)
{
    $this->validate($request, [
        'Ref',
        'CMRtype'
    ]);

    $result = eCMR::create([
        'Ref' => request('Ref'),
        'CMRtype' => request('CMRtype'),
    ]);

    return ['redirect' => 'operations/new_ecmr/' . $result->id];
}

then you can deal with the rest of your form with an other method:

public function completeForm(eCMR $eCMR) { // uses route model binding

return view('your-blade', compact('eCMR'));
}

with route:

Route::get('operations/new_ecmr/{eCMR}', [YourController::class, 'completeForm']);

1 like

henrique_f

5 years ago

Level 1

Thank you, it worked very well!!!

1 like

Please or to participate in this conversation.