JQuery form submit into database

Question

I want to make a simple CRUD using modal bootstrap and Jquery submit button and framework that i use is laravel 5.2, below is my controller, modal, jquery and routes, the problem is when i click save changes nothing happen, is there anything im doing wrong?

MODAL

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title"><span class="glyphicon glyphicon-plus"></span> Add Barang</h3>
            </div>
            <div class="modal-body" id="addModal">
                <form id="tambahform" class="form-horizontal" role="form">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-3 control-label">Name</label>
                            <div class="col-md-9">
                                <input type="text" id="client-nama" name="clientName" class="form-control" placeholder="Your Name">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        <div class="modal-footer">
            <button type="button" class="btn-add btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

JQuery

$(document).ready(function(){
    var check1=0;
    $('#tambahform').submit(function(e){
    if (check1==0){
        $("#addModal").animate({scrollTop:0}, 'slow');
    }else{
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url:'form/insert',
            data:formData,
            type:'POST',
            contentType: false,
            processData: false,
            success:function(data){
                $("#addModal").hide();
                window.location.reload(true);
            }
        });
    }
    return false;
    });

Controller

public function insert(){
    $nama = Input::get('nama');
    $this->nama = Input::get('clientName');
    $query = DB::table('profile')->insert(array('nama'=>$nama));  

}

ROUTES

Route::get('form/insert', 'FormController@insert');

This should be $nama = Input::get('nama'); this $nama = Input::get('clientName'); — devpro, Feb 14 '16 at 05:09

score 1 · Accepted Answer · edited May 23 '17 at 11:59

You need to define the method you will be using to submit the form as. There is no method mentioned so it is submitting its default, GET.

so you form tag should look like this:

<form method="POST" id="tambahform" class="form-horizontal" role="form">

In the url, you need to give it a full path or else it will give a 404 not found error. Take a look at this code:

e.preventDefault();
var formData = $(tambahform).serialize(); //<--use Serialize
 $.ajax({
     url:'form/insert.php', //<--add full path including the files extension here
     data:formData,
     type:'POST',
     contentType: false,
     processData: false,
     success:function(data){
            $("#addModal").hide();
            window.location.reload(true);
            }

Drudge Rajen · Answer 2 · 2016-02-14T04:52:47.023

0

Instead of this

Route::get('form/insert', 'FormController@insert');

use this

Route::post('form/insert', 'FormController@insert');

edited Feb 14 '16 at 04:52

answered Feb 14 '16 at 04:44

Drudge Rajen

7,584
4
23
43

still nothing happen, when i click submit button nothing happen, am i doing wrong in my controller or my script? – Mirza Chilman Feb 14 '16 at 04:49
you should check the error in console using firebug . – Drudge Rajen Feb 14 '16 at 04:51
well i already read how to use it, but still don't know how to use it – Mirza Chilman Feb 14 '16 at 05:10
in firebug there is console part, just submit the form , after submission if it works then you will get the post request in console. – Drudge Rajen Feb 14 '16 at 06:06

JQuery form submit into database

2 Answers2