VueJS Axios POST returns NULL when passing variable through pages

Question

I've been trying hours to understand this and re-check StackOverflow's answer. Tried copy pasting too, didn't work.

var app = new Vue({
  el: '#app',
  data: {
    jobtype_select: '',
    jobtype_list: [{
        id_JobType: 'JTY0001',
        name_JobType: 'Survey'
      },
      {
        id_JobType: 'JTY0002',
        name_JobType: 'Research'
      },
      {
        id_JobType: 'JTY0003',
        name_JobType: 'Maintenance'
      }
    ],
    woFormABCD: '',
    totallyRandom: 'Hello Heiayo'
  },

  methods: {
    recordTESTWo() {
      var form = new FormData();
      form.append('test', this.totallyRandom);
      axios.post('action.php',
          form
        )
        .then(function(response) {
          alert('Success!');
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }

});

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id='app'>
  <form method="post" action="action.php" @submit.capture='recordTESTWo'>
    <div class="">
      <label for="jobtype_id" class="control-label required"><strong>Choose Job Type</strong></label>
      <div v-for='jobtype in jobtype_list'>
        <label class="">
                            <input  type="radio" 
                                    id= 'jobtype_id'
                                    v-model= 'jobtype_select'
                                    :value="jobtype.id_JobType"
                                    name='jobtype_select' 
                                    > 
                            {{jobtype.name_JobType}}
                        </label>
      </div>
      <p> This is : {{jobtype_select}}</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
</div>

What I wanted to do was to try to pass totallyRandom value to the next page. Which is action.php.

<?php
    session_start();
    //$data = json_decode(file_get_contents("php://input"), TRUE);
    printf("This is GET: \r\n");
    var_dump($_GET);
    printf("This is POST: \n");
    var_dump($_POST);
?>

What I expect to see, the variable of totallyRandom being passed to action.php so I can use it on action.php page.

What I see, Also, when I go to action.php, and do var_dump it returns NULL. The radio button passed, but that's not using Axios. More details can be asked,

I just noticed that it produces an error log, question updated with info of .capture and .prevent errror log. So does this mean it's Vue's fault instead? Not Axios'? — Irfandy J.
– Irfandy J., Commented Oct 25, 2018 at 23:41
Two things wrong. First, it's methods, not method. Second, when you use FormData, axios will post a application/x-www-form-urlencoded encoded request body so your PHP should use $_POST['test'] and not php://input. Voting to close as a typo — Phil
– Phil, Commented Oct 26, 2018 at 0:11
@Phil Ok, so I tried yours, changed 'method' to methods', changed url to 'action.php' then alert('Success') is launched. I've seen data on console, but in my action.php when I var_dump("$_POST"); Now it says I have an array which is zero instead. — Irfandy J.
– Irfandy J., Commented Oct 26, 2018 at 1:52
Wanted to edit, and upload a picture, unfortunately StackOverflow won't let me, and I don't have any idea why, but let that aside. I uploaded it here i.sstatic.net/8tsPx.png — Irfandy J.
– Irfandy J., Commented Oct 26, 2018 at 2:13

tony19 · Accepted Answer · 2022-07-15 23:24:35Z

2

The problem is that your <form> is submitting normally. That's why you see the jobtype_select POST parameter instead of test.

This can be easily solved by using the .prevent event modifier instead of .capture

<form @submit.prevent="recordTESTWo" ...

FYI, .capture is for...

an event targeting an inner element is handled here before being handled by that element

This relates to the useCapture parameter of addEventListener() whereas .prevent calls preventDefault() on the event.

edited Jul 15, 2022 at 23:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 26, 2018 at 3:44

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

VueJS Axios POST returns NULL when passing variable through pages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related