Don't reload page after form submission using ajax and jquery

Question

Project: Shopping List Aim: To add item into unordered list. User adds item in a form, form should not reload and the web page seamlessly display the added item into the list. The added item should be pass into MySQL database.`

As of right now I only have one table in my MySQL and only one row

The HTML:

<form id="inputItem" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
    <div>
        <ul>
            <div id="list"></div>
            <li>
                <input type="text" name="itemIn" id="itemIn"></input>
                <button onclick="addList(document.getElementById('itemIn').value)">ADD</button>
            </li>
        </ul>
    </div>
</form>

The JavaScript Code:

function addList(item){
    document.getElementById('list').innerHTML += "<li><input type='checkbox'>" + item + "</input></li>";
}

I need to have a checkbox by the side of the items, for deleting item purpose.

The PHP Script:

<?php 
       define('DB_SERVER', 'localhost');
       define('DB_USERNAME', 'root');
       define('DB_PASSWORD', '');
       define('DB_DATABASE', 'list');
       $conn = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $itemIn = $_POST['itemIn'];

    $sql = "INSERT INTO item (name) VALUES ('$itemIn')";                        
?>

All of these are in one page, if anyone has any idea how to put them into separate files that would be very much appreciated

Thank You

You need to catch the form submit event in javascript, cancel it so that the page does not get reloaded and make an ajax request to your php script instead from that submit handler. — jeroen, Mar 17 '16 at 13:38
Are you using jquery? That SQL isn't being executed currently, once it is you will be open to SQL injections. You should use parameterized queries. — chris85, Mar 17 '16 at 13:38

score 2 · Answer 1 · edited May 23 '17 at 12:07

You pretty much already did all the necessary work by separating these in your post.

Separating the files :

Just save these in separates files like this :

"form.php" containing the html. Don't forget to put the necessary tags around (like the header, body, etc...)
"form.js" containing your js code
"formaction.php" for the form treatment and bdd logic.

Change your form action to point "formaction.php" :

<form id="inputItem" method="post" action="formaction.php" >

Include form.js in your html with a script tag in the head of your html :

<script src='form.js'></script>

edit: as the commenters said, your code is vulnerable to sql injection, you should sanitize the values from your form post before inserting them.

Sanitizing input :

To do so, you have 2 possibilities :

Use an escape function which enclose every value you insert with quotes, escape specials chars etc... you can use the mysqli_escape_string function : http://php.net/manual/fr/mysqli.real-escape-string.php
Use prepared statements (best option) : http://php.net/manual/en/mysqli.quickstart.prepared-statements.php

Submitting the form without reloading :

As for preventing the page reload, as other said, you can :

Add a submit button to allow the form to be submitted. Then you must to catch the form submit event and send the form via ajax. These posts have nice examples on how you can do this :
- jQuery AJAX submit form
- jquery ajax form submit
Trigger an ajax call at the end of your addList function (if you want the form to be automatically submitted) which posts the data to formaction.php. You can check @umair-khan answer which provides an example.

Your php file that inserts the form data should also send some data back to your html page indicating the success or the failure of the operation AND/OR any values you would like to display after the validation.

Splitting the code over different files is nice, but it does not solve the OP's problem. — jeroen, Mar 17 '16 at 13:40
You're right, I think my answer only adresses the last part of the question : "All of these are in one page, if anyone has any idea how to put them into separate files that would be very much appreciated" — kerwan, Mar 17 '16 at 13:42
1/ How to prevent sql injection? 2/ I don't want the page to reload after form submission — Syahnur Nizam, Mar 17 '16 at 13:43
I updated my answer to take your remarks into account, thanks ! — kerwan, Mar 17 '16 at 14:07
The best way of dealing with SQL-injection is prepared statements, while escaping can be enough, it's often best just to use prepared statements ;-) — Qirel, Mar 17 '16 at 16:57

score 1 · Accepted Answer · answered Mar 17 '16 at 13:56

1

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

answered Mar 17 '16 at 13:56

Umair Khan

283
3
13

score 0 · Answer 3 · answered Mar 17 '16 at 13:44

0

HTML form should contain a "submit" button to submit the form. Before ending the form Please add a submit button.

answered Mar 17 '16 at 13:44

kachmi

43
1
10

1

Having the submit button won't solve my problem.... I need to the page to seamlessly show the value (in this case: items' names) that the user input into a list – Syahnur Nizam Mar 17 '16 at 13:47
Nope, submit button isn't needed for AJAX which is what OP wants. The form isn't even needed. – chris85 Mar 17 '16 at 13:50

score 0 · Answer 4 · answered Mar 17 '16 at 13:56

You had to use ajax. If you don't want/can use external files, you can call with ajax the url in form "action" attr, but you can't print a confirm by php, because the data response is all web page. Split the files is better, because you can print a feedback after query and check if all is ok and then make innetHtml or make an alert for the error.

Don't reload page after form submission using ajax and jquery

4 Answers4