Fetch and show json after submiting a form

Question

I have a problem with my json. I want that when I submit the form to fetch the json and put into the table but now when I submit form I are redirect to a blank page. My form:

 {{ Form::open(array('url'=>'/register/showMarks','method' => 'post','id'=>'mark-form')) }}
 <p>
 {{ Form::label('Code:') }}
 {{ Form::text('idno',null,array('class'=>'form-control')) }}
 </p>
 {{ Form::submit('Send',array('class'=>'btn btn-primary')) }}
 {{ Form::close() }}

My Controller:

public function getMarks(){
    $idno = Input::get('idno');
    $aMarks = DB::table('students')
        ->join('marks','marks.student_id', '=', 'students.id')
        ->join('objects','marks.object_id', '=', 'objects.id')
        ->where('students.idno', '=', $idno)
        ->select('marks.note',
                'objects.name')
        ->get();
    echo '{"marks":'.json_encode($aMarks).'}';
}

My Json

{
  "marks": [
    {
      "note": "6",
      "name": "Name 1"
    },
    {
      "note": "9",
      "name": "Name 2"
  },]
}

My jquery :

<table class="mGrid" id="jsondata">
     <thead>
        <th>Object</th>
     </thead>
     <tbody></tbody>
</table>
<script type="text/javascript">
   $(document).ready(function(){
      $('#mark-form').submit(function(e){
         var url='/register/showMarks';
         $("#jsondata tbody").html("");
         $.getJSON(url,function(data){
           $.each(data.marks, function(i,mark){
              var newRow =
                  "<tr>"
                     +"<td>"+mark.name+"</td>"
                  +"</tr>" ;
              $(newRow).appendTo("#jsondata tbody");
           });
        });
     });
  });
 </script>

I am back-end developer and I think the error is in this jquery but I don't understand where.

possible duplicate of [Build a table from an sql select after submiting a form](http://stackoverflow.com/questions/27317704/build-a-table-from-an-sql-select-after-submiting-a-form) — Ferret, Dec 08 '14 at 12:52

score 0 · Answer 1 · answered Dec 08 '14 at 12:50

You need to prevent the default action during form submit. You can do that using e.preventDefault method.

More on that: https://developer.mozilla.org/en/docs/Web/API/event.preventDefault

Check if this works:

  $(document).ready(function(){
                $('#mark-form').submit(function(e)
                e.preventDefault();
                   {
                    var url='/register/showMarks';
                        $("#jsondata tbody").html("");
                            $.getJSON(url,function(data){

                            $.each(data.marks, function(i,mark){
                    var newRow =
                        "<tr>"
                            +"<td>"+mark.name+"</td>"
                        +"</tr>" ;
                    $(newRow).appendTo("#jsondata tbody");
                    });
                });
                });
            });

Then it's most probably has to do with form's action. Where is it submitting? — Thilak Rao, Dec 08 '14 at 14:28

Fetch and show json after submiting a form

1 Answers1