javascript - How to make sure another (new) page is not shown when submitting a form -
for assignment need have table made of json data gotten server through ajax request. have have row able fill in data well, data has added server make ajax request from, using ajax post request. both things have been able do, have table shows data server can add data well. problem when click 'submit' button page load showing new url made added data server. want add data table, without opening new page. have seen answers on <form> tags, since have use <form> tag can not use 1 inside. how possible using <input> tag , button?
this code in html have row fill in own data.
<tr> <td rowspan="1" colspan="1"> <input type="text" name="name" placeholder="name" required=""> </td> <td rowspan="1" colspan="1"> <input type="text" name="category" placeholder="category" required=""> </td> <td rowspan="1" colspan="1"> <input type="number" name="amount" min="1" placeholder="amount" required=""> </td> <td rowspan="1" colspan="1"> <input type="text" name="location" placeholder="location" required=""> </td> <td rowspan="1" colspan="1"> <input type="date" name="date" min="2000-01-02" required=""> </td> </tr> </tfoot> </table> <input type="submit" value="submit" id="submit"> </form> and code in javascript adding data server table:
$(function func(json) { var url = '%url%' $.ajax({ type: "get", url: '%url%', datatype: "jsonp", }); $.getjson(url, function(data){ var tr; (var = 0; < data.length; i++) { tr = $('<tr/>'); tr.append("<td>" + data[i].name + "</td>"); tr.append("<td>" + data[i].category + "</td>"); tr.append("<td>" + data[i].amount + "</td>"); tr.append("<td>" + data[i].location + "</td>"); tr.append("<td>" + data[i].date + "</td>"); $('#table_one').append(tr); } }); }); i hope have provided enough information, , in advance :)
edit:
i edited code (with lot of acquaintance) solve this, looks this:
var url = '%url% var tabinithtml = ''; function filltable() { $('#table_one').html(tabinithtml); $.getjson(url, function(data){ var tr; (var = 0; < data.length; i++) { tr = $('<tr/>'); tr.append("<td>" + data[i].name + "</td>"); tr.append("<td>" + data[i].category + "</td>"); tr.append("<td>" + data[i].amount + "</td>"); tr.append("<td>" + data[i].location + "</td>"); tr.append("<td>" + data[i].date + "</td>"); tr.sort $('#table_one').append(tr); } }); } function insertrecord() { $.post( url, $( "#form" ).serialize() ); } $( document ).ready(function() { tabinithtml = $('#table_one').html(); filltable(); $('#form').submit(function(e) { e.preventdefault(); insertrecord(); filltable(); return false; }); });
you have prevent form submission using
$("form").submit(function(){ return false; });
Comments
Post a Comment