Collect data from form, stack in object and send it with AJAX using Vue

Question

Trying to collect all the HTML data from my form, then to store it as an object and then send it using ajax request. Any ideas, please? Appreciate some help. I was trying with serialize's jquery, but read this in that way cannot be sent (to an API URL, no PHP) using ajax(post).

    <form class="form" action="" method="" id="createProposal">
        <div class="form-group">
            <label class="col-md-12 control-label" for="asset-drop">Asset</label>
            <div class="col-md-12">
                <select id="asset-drop" name="asset-drop" class="form-control" >
                                    <option value="1"> {{ this.assets[0] ? this.assets[0].name : '' }} </option>
                                    <option value="2">{{ this.assets[1] ? this.assets[1].name : '' }}</option>
                                    <option value="3">{{ this.assets[2] ? this.assets[2].name : '' }}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-12 control-label" for="amount-invest">Amount</label>
            <div class="col-md-12">
                <input id="amount-invest" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12 control-label" for="description-input">Description</label>
            <div class="col-md-12">
                <textarea class="form-control" id="description-input" name="description-input"></textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
            <button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
        </div>
    </form>

Answer 1

i suggest to create an object in your data section which you call proposal and bind your form to that object using v-model, i'm using single file component but it doesn't matter, you can fit that solution to your case :

<template>
    <form class="form" action="" method="" id="createProposal">
        <div class="form-group">
            <label class="col-md-12 control-label" for="asset-drop">Asset</label>
            <div class="col-md-12">
                <select id="asset-drop" name="asset-drop" class="form-control" v-model="proposal.selectedAsset" >
                                    <option :value="index" :key="index" v-for="(asset,index) in proposal.assets">{{asset}}  </option>
                                  
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-12 control-label" for="amount-invest">Amount</label>
            <div class="col-md-12">
                <input id="amount-invest" v-model="proposal.amount" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12 control-label" for="description-input">Description</label>
            <div class="col-md-12">
                <textarea class="form-control"  v-model="proposal.description" id="description-input" name="description-input"></textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
            <button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
        </div>
    </form>
</template>

<script>
export default {
  data(){
    return{
      proposal:{
        assets:[],
        selectedAsset:'',
        amount:'',
        description:''
      }
    }
  },
  methods:{
    hideCreatePropolsal(){

    },
    formDataCreation(){
      /*   $.ajax({
                url: "yourUrl",
                type: "POST",
                data:this.proposal,
                success: function (response) {
                 
                }});*/
    }
  }
};
</script>

<style>
</style>

you could check the whole code