Is it possible to insert or delete a database record using Javascript?

Question

I'm new to Javascript and I couldn't find this information so far.

I'd like to create a button which, when clicked, creates a new entry in my database, and another one which removes a specific entry when clicked. The reason I don't want to use PHP is because I don't want the page to reload when the button is clicked.

Where can I find information on how to achieve this?

EDIT

Okay I found this:

<script type="text/javascript">
    $(document).on('click','#save',function(e) {
        var data = $("#save-form").serialize();
        $.ajax({
            data: data,
            type: "post",
            url: "save.php",
            success: function(data){
                alert("Data Save: " + data);
            }
        });
    });
</script>

My HTML:

<form id="save-form" method="post">
    <input id="save" type="submit" value="Save" name="save-submit" />
</form>

My PHP file (save.php), which creates a new record in my database, works, but only if my form's action is action="save.php". What should I put in my form's action to trigger the script?

Also, it seems like the submit button still reloads the page (even if my form has no action).

use ajax to trigger (using javascript) the php execution without reloading the page — Lelio Faieta, Oct 01 '18 at 10:07
Ajax is your answer. Client-side javascript runs on the browser and doesn't have access to server resources (well not directly) — Iceman, Oct 01 '18 at 10:07
Possible duplicate of https://stackoverflow.com/questions/22577457/update-data-on-a-page-without-refreshing — Sudhir Ojha, Oct 01 '18 at 10:07
BTW it wouldn't be that smart to use js to edit a database (if possible). Everyone could then send queries to your database.. — Elias, Oct 01 '18 at 10:12
change your button type as button and check whether its reloading the page or not — Arunprasanth K V, Oct 01 '18 at 12:49

Arunprasanth K V · Answer 1 · 2018-10-01T10:18:26.573

4

You cannot directly communicate with Database from your javascript. What you can do is like use Ajax to communicate with your server side language(It can be anything like PHP,.net,Java etc..) and with the help of server side language communicate with Database

If you are using Ajax then you can make the way asynchronous.

If you really want use JavaScript to communicate with Database then you can go for Node.js(There you can use javascript syntax) but still it is a server side language based on Javascript and its not related to your browser

Why you cannot connect database from client side ??

The main reason is Security. You're not granting DB access to anyone but web server/app user.

The other few reason are

DB load reduction

Scalability  Issues 

Encapsulation Issues 

Ability for fault tolerance

edited Oct 01 '18 at 10:18

answered Oct 01 '18 at 10:07

Arunprasanth K V

20,733
8
41
71

Correct answer. In case you don't want to use PHP you could use Node.js in the backend. As `AJAX` alternative there would also be `WebSockets` – Elias Oct 01 '18 at 10:09
2

Regarding your second paragraph, whether the request is asynchronous or not is not related to whether the page will be reloaded. – nnnnnn Oct 01 '18 at 10:13

score 0 · Answer 2 · answered Oct 01 '18 at 10:11

0

See there are ways to insert into db with using PHP and without doing a postback. But specific to your question you can find answer in below link

Insert Record in Database Using Textboxes in JavaScript

answered Oct 01 '18 at 10:11

Ajit

11
3

score 0 · Answer 3 · answered Oct 01 '18 at 11:16

Not only in PHP but also in any other programming language(e.g: asp.net,java etc) you can create an entry and remove a specific entry without loading the page. You need to use the plugin of jquery which is called 'ajax'.

Using 'ajax' you can send data to the server without loading the page. And after having your data in server side, you can do whatever you want to do.

You will find ajax documentation here: http://api.jquery.com/jquery.ajax/

Same kind of question answered here: Delete record without refresh page using php

If you having any problem,let me know.

score 0 · Answer 4 · answered Oct 01 '18 at 11:37

Here is an example of a simple client server communication model. Client codes are executed at the browser which is JavaScript. The Server side codes are PHP, Nodejs, java, python etc) Which resides on server only. Client sends a request to the server for a resource. And server and back a response with an HTTP status. Which represents the status of a response. The client side JavaScript cannot communicate directly with the server database. What it does is sending a request to the server which will eventually trigger the actual code in server which inserts the data into the server.

The one you mentioned is the ajax method which sends an HTTP request without actually reloading a page. You can also use a form to post data into the server without ajax which will reload the page.

You must validate the user inputs in server side even though you will be validating it in the client side.

You can use the event.preventDefault() to prevent the form submit and then insert it via ajax.

$(document).ready(function() {
  $('#save-form').on('submit', function(e){      
      e.preventDefault();
       var data = $("#save-form").serialize();
        $.ajax({
            data: data,
            type: "post",
            url: "save.php",
            success: function(data){
                alert("Data Save: " + data);
            }
        });
  });
});

Is it possible to insert or delete a database record using Javascript?

4 Answers4