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>

for this form, there isn't any - the whole project is in vue, but for the form using only "methods" so - only plain javascript — xx5ko
– xx5ko, Commented Sep 5, 2018 at 13:48
you can put that form in a component, and associate a script, in that script you can add an object and send it via a method — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 5, 2018 at 13:53

Boussadjra Brahim · Accepted Answer · 2018-09-05 15:23:45Z

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

Collectives™ on Stack Overflow

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

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