Vue-Select: Getting object selected value through page via POST method

Question

This is my reproduced code.

Vue.component('v-select', VueSelect.VueSelect);

var app = new Vue({
  el: '#app',
  data: {
    lokasi_select: '',
    lokasi_id: '',
    lokasi_list: [{
        id_Location: 'LOC0001',
        nama_Location: 'Indonesia'
      },
      {
        id_Location: 'LOC0002',
        nama_Location: 'China'
      },
      {
        id_Location: 'LOC0003',
        nama_Location: 'America'
      },
    ],
  }
});

<div id='app' class="form-group my-5 mx-5">
  <form method='post' action='action.php'>
    <label for="lokasi_id" class="control-label required">
      <strong>Lokasi</strong></label>
    <v-select id='lokasi_id' label='nama_Location' v-model='lokasi_select' name="lokasi_select" :options="lokasi_list" placeholder='Ketik lokasi..'>
      <span slot="no-options">Lokasi tidak ditemukan.</span>
    </v-select>

    <p>What you selected: {{lokasi_select}}</p>
    <button>Submit</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>

What I wanted to do

User input and select the values.
lokasi_select become an object and populated with the value of user's selected input.
User click submit. Moved to action.php.
action.php retrieve the value.

Get the value of the selected object, in this case it's lokasi_select then retrieve it in another page, be noted this is a form through POST method, which loads to the next page. I'm not using AJAX, cause I want to re-validate the user input on the next page. Like showing the receipt.

What's actually happened

User input and select the values.
lokasi_select become an object and populated with the value of user's selected input.
User click submit. Moved to action.php.
$_POST returns an array of NULL.

Now this is what my action.php looks like.

<?php
    var_dump($_POST) //Returns array(0) { }
?>

How could this be done? I'm open to alternative. But not AJAX. It has to reload to the next page. Also, if I can't pass an object, then only the value of id_Location is fine. Cause I had a hard time finding out how to make it pass to id_Location as well.

kuromoka · Accepted Answer · 2018-10-28 02:07:46Z

4

By referring to this issue, I think you need add hidden inputs as below.
I have confirmed PHP can receive post values by this code.

<div id='app' class="form-group my-5 mx-5">
  <form method='post' action='action.php'>
    <label for="lokasi_id" class="control-label required">
    <strong>Lokasi</strong></label>
    <v-select id='lokasi_id' label='nama_Location' v-model='lokasi_select' name="lokasi_select" :options="lokasi_list" placeholder='Ketik lokasi..'>
      <span slot="no-options">Lokasi tidak ditemukan.</span>
    </v-select>
    <input type="hidden" v-model="lokasi_select.id_Location" name="id_Location" />
    <input type="hidden" v-model="lokasi_select.nama_Location" name="nama_Location" />

    <p>What you selected: {{lokasi_select}}</p>
    <button>Submit</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>

<?php
    // Returns like
    // "array(2) { ["id_Location"]=> string(7) "LOC0001" ["nama_Location"]=> string(9) "Indonesia" }"
    var_dump($_POST);
?>

answered Oct 28, 2018 at 2:07

kuromoka

8427 silver badges13 bronze badges

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

4 Comments

Irfandy J. Over a year ago

Wah.. Thanks! I've been looking for this like a week! It's probably because I don't know how to type the things I wanted to do..

Irfandy J. Over a year ago

Would you mind telling me what's actually wrong? I don't get it when the issued says The component itself isn't a form input, so you'll need to use a hidden input., I guess I know that now I have to use hidden input for it. But why?

kuromoka Over a year ago

I'm not familiar with this issue, but I suppose hidden input is required because select box of vue-select don't include name attribute

Irfandy J. Over a year ago

Ah I see, I guess that explains a bit why my other VueJS input can go pass, but only vue-select's input is always NULL when passed.

Collectives™ on Stack Overflow

Vue-Select: Getting object selected value through page via POST method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related