Jun 6, 2017
0
Level 1
My Form keeps on refreshing my page even Vue derivative
I am working on a project and got stuck here. I have a form which i want to submit using ajax but any time i click on the submit button it keeps refreshing the page. I use this also @submit.prevent="createPost" but it keeps refreshing, even @click.prevent="createPost" but it still refreshing the page.
Here is my code
My master.blade.php
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
@yield('script');
Here is my form Page
@extends('layouts.app')
@section('content') Product entry
<div id="app">
@{{$title}}
<form @submit.prevent="createPost" method="POST" class="form-horizontal" role="form">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('product_name') ? ' has-error' : '' }}">
<label for="product_name" class="col-md-4 control-label">Product name</label>
<div class="col-md-6">
<input id="product_name" type="text" class="form-control" name="product_name"
value="{{ old
('product_name') }}" autofocus>
@if ($errors->has('product_name'))
<span class="help-block">
<strong>{{ $errors->first('product_name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('quantity_in_stock') ? ' has-error' : '' }}">
<label for="quantity_in_stock" class="col-md-4 control-label">Quantity in stock</label>
<div class="col-md-6">
<input id="quantity_in_stock" type="text" class="form-control"
name="quantity_in_stock"
value="{{ old('quantity_in_stock') }}">
@if ($errors->has('quantity_in_stock'))
<span class="help-block">
<strong>{{ $errors->first('quantity_in_stock') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('price_per_item') ? ' has-error' : '' }}">
<label for="price_per_item" class="col-md-4 control-label">Price per item</label>
<div class="col-md-6">
<input id="price_per_item" type="text" class="form-control"
name="price_per_item"
value="{{ old('price_per_item') }}">
@if ($errors->has('price_per_item'))
<span class="help-block">
<strong>{{ $errors->first('price_per_item') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button @click.prevent="alert" class="btn btn-primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product history</div>
<div class="panel-body">
@if($products->count() > 0)
<table class="table table-hover table-bordered table-striped">
<thead>
<th>Id</th>
<th>Product name</th>
<th>Quantity in stock</th>
<th>Price per item</th>
<th>Create at</th>
<th>Total value number</th>
<th>Modify</th>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<td>{{ $product->id }}</td>
<td><a href="#">{{ $product->product_name }}</a></td>
<td>{{ $product->quantity_in_stock }}</td>
<td>{{ $product->price_per_item }}</td>
<td>{{ $product->created_at }}</td>
<td>{{ $product->total_value_numbers }}</td>
<td><a href="/products/{{$product->id}}/edit">
<button type="button" class="btn btn-default">Edit</button>
</a>
<form class="form"
role="form"
method="POST"
action="{{ url('/products/'. $product->id) }}">
<input type="hidden"
name="_method"
value="delete">
{{ csrf_field() }}
<input class="btn btn-danger" Onclick="return ConfirmDelete();" type="submit"
value="Delete">
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
@else
Sorry, no Product at the moment!
@endif
{{ $products->links() }}
</div>
</div>
</div>
@section('script')
<script>
function ConfirmDelete() {
var x = confirm("Are you sure you want to delete?");
return x;
}
</script>
<script>
new Vue({
// mount Vue to .container
el: '#app',
data: {
post: {
title: 'My title',
body: '',
},
submitted: false,
// array to hold form errors
errors: [],
},
methods: {
createPost() {
let post = this.post;
this.$http.post('create-post', post).then(function (response) {
// form submission successful, reset post data and set submitted to true
this.post = {
title: '',
body: '',
};
// clear previous form errors
this.$set('errors', '');
this.submitted = true;
}, function (response) {
// form submission failed, pass form errors to errors array
this.$set('errors', response.data);
});
}
}
});
</script>
I don't use laravel-mix. I use vue via cdn.
Thanks in advance.
Please or to participate in this conversation.