javascript - Submit form without redirection with ajax -
i'm trying make things ajax , doesn't work.
i have view divs functionality of page.
the view's code this:
@extends('cms.public.layouts.default') @section('content') <div class="col-md-10"> <h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">proyectos</h3> </div> <div id="listall"> <!-- div list projects start here --> <div class="col-md-2" style="padding:20px;"> <button type="button" id="buttoncreate" class="btn btn-danger">crear proyecto</button> </div> <table class="table"> <thead style="color:white"> <tr> <th>id</th> <th>slug</th> <th>order</th> <th>public</th> <th>path header</th> <th>path home</th> <th>fecha creación</th> <th>fecha ultima actualización</th> <th><span class="glyphicon glyphicon-cog"></span></th> </tr> </thead> <tbody style="color:white"> @foreach ($projects $key => $project) <tr> <th>{{$project->id}}</th> <td>{{$project->slug}}</td> <td>{{$project->order}}</td> <td>{{$project->public}}</td> <td>{{$project->pathheader}}</td> <td>{{$project->pathhome}}</td> <td>{{ date('m j, y', strtotime($project->created_at))}}</td> <td>{{ date('m j, y', strtotime($project->updated_at))}}</td> <td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">view</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">edit</a> @endforeach </tr> </tbody> </table> <br><br> </div> <!-- div list projects end here --> <div id="form1" style="display:none;" class="col-md-8"> <!-- div show create project form 1 start here--> <div> <h3>crear nuevo proyecto</h3> </div> <div id="formcreateproject"> <form method="post" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data" id="myform" name="myform"> <div class="form-group"> <label name="title">slug:</label> <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm"> <label name="order">order:</label> <input type="number" id="order" name="order" class="form-control form-control-sm"> <label name="public">public:</label> <input type="number" id="public" name="public" class="form-control form-control-sm"> <label name="body">header</label> <input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="filehelp"><br> <label name="body">home</label> <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="filehelp"><br> <input type="submit" value="crear proyecto" id="createprojectsubmit" class="btn btn-danger btn-md"> <input type="hidden" name="_token" value="{{ session::token() }}"> <br><br><br> </div> </form> </div> </div> <!-- div show create project form 1 end here--> <div id="form2" style="display:none;" class="col-md-6"> <div class="col-md-"> <h3>crear nuevo proyecto</h3> </div> <form method="post" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data"> <div class="form-group"> <label name="title">slug:</label> <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm"> <label name="order">order:</label> <input type="number" id="order" name="order" class="form-control form-control-sm"> <label name="public">public:</label> <input type="number" id="public" name="public" class="form-control form-control-sm"> <label name="body">header</label> <input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="filehelp"><br> <label name="body">home</label> <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="filehelp"><br> <input type="submit" value="crear proyecto" id="createprojectsubmit" class="btn btn-danger btn-md"> <input type="hidden" name="_token" value="{{ session::token() }}"> <br><br><br> </div> </form> </div> </div> @stop and javascript function this:
//javascript view /projects/menu.blade.php $(document).ready(function(){ $("#buttoncreate").click(function(){ $("#listall").hide(); $("#form1").fadein(1000); $("#createprojectsubmit").submit(function(e){ e.preventdefault(); $.ajax({ url:'/admin/projects/postupload', type:'post', data:$('#myform'), success: function(){ $("#form1").fadeout(1000); $("#form2").fadein(1000); } }); }); }); }); the function of hide first div , fade in second works, , submit , create new project. url change , show me white page.
my first thing fadeout form1 , fadein second form. great, if when fadeout form1, in space appears tick/check.
thanks lot, appreciated.
you calling submit event on button not belong button. belongs form. call click event on button , use preventdefault() stop form submitted as
$("#createprojectsubmit").submit(function(e){ e.preventdefault(); //your further code goes here } use this
$("#createprojectsubmit").click(function(e){ e.preventdefault(); //your further code goes here } you can trigger submit event on form as
$("#myform").submit(function(e){ e.preventdefault(); //your further code goes here } 
Comments
Post a Comment