How to post from vue form to php file in Vue.js

Question

I am working with vue.js and php /I have this Vue form and i want selected elements to be posted to php file. how can I do that. I need the selected elements in the php page as a post variable. Help please. what are the possible options to achieve the task.

<template>
    <div class="row">
        <div class="col-lg-offset-3 col-md-offset-2 col-sm-offset-2 col-lg-6 col-md-8 col-sm-8">
            <div class="form-group">
                <h3><i class="fa fa-file-excel-o"></i>&nbsp;Fixed Asset Report2</h3>
            </div>

            <divider></divider>

            <!-- category / status -->
            <div class="form-group">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">Category</label>
                        <select
                                class="form-control input-lg"
                                v-model="query.category"
                                placeholder="Select Category">
                            <option value="">-- Report All Category --</option>
                            <option
                                    v-for="category in categoryList"
                                    track-by="$index"
                                    :value="category"
                                    v-text="category"></option>
                        </select>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">Status</label>
                        <select
                                class="form-control input-lg"
                                v-model="query.status"
                                placeholder="Select Status">
                            <option value="">-- Report All Status --</option>
                            <option
                                    v-for="status in statusList"
                                    track-by="$index"
                                    :value="status"
                                    v-text="status"></option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- ./ category / status -->

            <divider></divider>

            <div class="form-group">
                <checkbox
                        :model.sync="query.date"
                        true-message="List Within Specified Range (Acquisition Date)"
                        false-message="List Within Specified Range (Acquisition Date)"></checkbox>
            </div>

            <!-- start / end -->
            <div
                    class="form-group"
                    v-show="query.date === true"
                    transition="fade">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">Start <code>DD-MM-YYYY</code>*</label>
                        <date-time
                                format="YYYY-MM-DD"
                                display-format="DD-MM-YYYY"
                                class="form-control input-lg"
                                :required="true"
                                :model.sync="query.start"></date-time>

                        <small
                                class="help-block"
                                v-show="query.start.length < 1"><code>Start</code> is required</small>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">End <code>DD-MM-YYYY</code>*</label>
                        <date-time
                                format="YYYY-MM-DD"
                                display-format="DD-MM-YYYY"
                                class="form-control input-lg"
                                :required="true"
                                :model.sync="query.end"></date-time>

                        <small
                                class="help-block"
                                v-show="query.end.length < 1"><code>End</code> is required</small>
                    </div>
                </div>
            </div>
            <!-- ./ start / end -->

            <divider></divider>

            <div class="form-group">
                <label class="control-label">Select Columns to export to CSV</label>

                <!-- filter -->
                <div class="row">
                    <!-- toggle -->
                    <div class="col-lg-12">
                        <checkbox
                                :model.sync="all"
                                true-message="Select All"
                                false-message="Select None"></checkbox>
                    </div>
                    <!-- ./ toggle -->

                    <!-- filters -->
                    <div class="col-lg-6" v-for="(k, f) in filter" track-by="$index">
                        <checkbox
                                :model.sync="filter[k].show"
                                :true-message="f.label"
                                :false-message="f.label"></checkbox>
                    </div>
                    <!-- ./ filters -->
                </div>
                <!-- ./ filter -->
            </div>

            <divider></divider>

            <div class="form-group text-center">
                <button
                        type="button"
                        class="btn btn-lg btn-success-outline"
                        @click="generate">&nbsp;&nbsp;&nbsp;<i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Download Report&nbsp;&nbsp;&nbsp;</button>
            </div>
        </div>
    </div>
</template>

PHP file

<?php
$__REST__['REPORT_FOR_FIXED_ASSET'] = function($routeInfo) {
    if ($_POST){

        die(print_r($_POST));
    }


};

Egor Stambakio · Accepted Answer · 2017-04-10 09:26:28Z

2

You can use

vue-axios

or vue-resource (not recommended anymore though)

in order to send requests within Vue.

answered Apr 10, 2017 at 9:26

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

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

Comments

Boris K · Accepted Answer · 2017-04-10 09:19:38Z

0

Vue cannot handle HTTP requests.

Add one form tag surrounding every input (just after <template>):

<form id="my-form" action="your-php-file.php" method="POST">

Then, use jQuery to submit your form:

$('#my-form').submit();

answered Apr 10, 2017 at 9:19

Boris K

1,5641 gold badge12 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to post from vue form to php file in Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related