In my Laravel 5.3 application, I am having a modal component which gets displayed when a user clicks on a button to edit the data.
Loading of modal window is done with the following code:
<a
href="#"
class="btn btn-sm btn-info"
data-toggle="modal"
data-target="#editCountryModal"
data-country-id="{{ countries['id'] }}"
data-country-code="{{ countries['code'] }}"
data-country-name="{{ countries['name'] }}"
data-country-currency-code="{{ countries['currency_code'] }}"
data-country-currency-name="{{ countries['currency_name'] }}"
data-country-display="{{ countries['display'] }}"
>
<i class="fa fa-lg fa-pencil"></i>
</a>
The above code loads the following form which is inside a modal component.
<template>
<div class="errors"></div>
<form method="POST" @submit.prevent="updateCountry">
<div class="form-group">
<label for="name">Id:</label>
<input
type="text"
name="id"
id="countryId"
class="inputText"
autofocus="autofocus"
placeholder="1"
readonly="readonly"
v-model="formData.countryId"
/>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
name="name"
id="name"
class="inputText"
placeholder="Eg. India"
required="required"
v-model="formData.name"
/>
<div class="error">
<span v-if="formErrors['name']"
class="text-danger"
>
{{ formErrors['name'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="code">Code:</label>
<input
type="text"
name="code"
id="code"
class="inputText"
placeholder="Eg. IND"
required="required"
v-model="formData.code"
/>
<div class="error">
<span v-if="formErrors['code']"
class="text-danger"
>
{{ formErrors['code'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="currency_name">Currency Name:</label>
<input
type="text"
name="currency_name"
id="currency_name"
class="inputText"
placeholder="Eg. Indian National Rupee"
required="required"
v-model="formData.currency_name"
/>
<div class="error">
<span v-if="formErrors['currency_name']"
class="text-danger"
>
{{ formErrors['currency_name'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="currency_code">Currency Code:</label>
<input
type="text"
name="currency_code"
id="currency_code"
class="inputText"
placeholder="Eg. INR"
required="required"
v-model="formData.currency_code"
/>
<div class="error">
<span v-if="formErrors['currency_code']"
class="text-danger"
>
{{ formErrors['currency_code'] }}
</span>
</div>
</div>
<div class="form-group">
<label for="display">Display:</label>
<select name="display"
id="display"
class="selectText"
required="required"
v-model="formData.display"
>
<option value="Disabled" selected="selected">Disabled</option>
<option value="Enabled">Enabled</option>
</select>
<div class="error">
<span v-if="formErrors['display']"
class="text-danger"
>
{{ formErrors['display'] }}
</span>
</div>
</div>
<button type="submit" class="button button--teal">Edit</button>
</form>
</template>
<script>
export default {
data() {
return {
formData: {
countryId: '',
name: '',
code: '',
currency_name: '',
currency_code: '',
display: ''
},
formErrors: {},
allCountries: []
}
},
ready: function() {
this.fetchAllCountries();
},
methods: {
notify: function(mType, mTitle, mMessage, nDelay) {
$.iGrowl({
type: mType == 'success' ? 'success' : 'error',
title: mTitle,
message: mMessage,
icon: mType == 'success' ? 'steadysets-checkmark !' : 'feather-cross',
delay: nDelay,
animShow: 'bounceInRight',
animHide: 'bounceOutRight'
});
},
fetchAllCountries: function() {
$.get('/api/all-countries', function(countries) {
this.allCountries = countries;
}.bind(this), 'json');
},
updateCountry: function(e) {
$('.button').addClass('button--disabled')
.html('<i class="fa fa-spinner fa-spin"></i> Editing...');
$(document).find('i.fa.fa-spinner.fa-spin').show();
this.$http
.post('/admin/settings/update-country/' + this.formData.countryId, this.formData)
.then((result) => {
var res = result.data;
$('.button').removeClass('button--disabled').html('Edit');
$(document).find('i.fa.fa-spinner.fa-spin').hide();
// 3000 is the number of seconds before disappearing
this.notify(res.status, res.title, res.message, 3000);
},
(err) => {
$('.button').removeClass('button--disabled').html('Edit');
$(document).find('i.fa.fa-spinner.fa-spin').hide();
if ( err.status === 422 ) {
var errors = err.data;
this.formErrors = errors;
}
});
return false;
}
}
}
</script>
What is happening is, whenever I submit the above form, it gets submitted with no values at all. Meaning I get an empty string for all the fields above. But, if I go to each field manually, it gets submitted with proper field values.
I want that whenever a user just clicks on the submit button, the values should get updated. Meaning the user should not be forced to click on every field, so that vue can recognize it.
EDIT 1:
This is how I call the modal:
@section('pageScripts')
<script>
$('#editCountryModal').on('show.bs.modal', function(e) {
var link = $(e.relatedTarget);
var id = link.data('country-id');
var name = link.data('country-name');
var code = link.data('country-code');
var currency_name = link.data('country-currency-name');
var currency_code = link.data('country-currency-code');
var display = link.data('country-display');
var modal = $(this);
modal.find('.modal-title').html('Edit Country: ' + name);
modal.find('.modal-body #countryId').val(id);
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #code').val(code);
modal.find('.modal-body #currency_name').val(currency_name);
modal.find('.modal-body #currency_code').val(currency_code);
modal.find('.modal-body #display').val(display);
});
</script>
@endsection
Bottom line question: How do I submit the default values (loaded in the modal window) of the form if the user just clicks on the submit button ?
Any help is highly appreciated. Thanks.
