Unable to send data from Form to SQL database

Question

So Ive this code which accepts input from user into a form and updates the SQL database when submit is clicked (without refreshing the page). The problem is that it isnt updating/sending the values to sql table.

I've tried to follow examples and tutorials I've found on several sites, but I can't get any of them to work.

I have the form(index.html) and the php file(upd.php) for db connection and update . The code for it is below.

I'm trying to save these values to the database table named messages:-

timestamp(tstamp) : Is a dynamic value, which is the timestamp of the video file being played in the browser( for example 1.935771),
message(any comments)
checkbox values

index.html

<body>
  <h1>VIDO LABELLING TOOL</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
  data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
    <source src="project.m4v" type='video/mp4'>
    <track src='br.srt' kind="subtitles" srclang="en" label="English" default>
  </video>



<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");

// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};


</script> 


<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">
    <form name="contact-form" action="" method="post" id="contact-form">
        <label for="email">Comments about the frame</label>
        <textarea name="message" class="form-control" id="message"></textarea>

        <div class="error" id="error_message"></div>

        <label>Vehicle Type:</label>
        <input name="veh_type_1"  id="veh_type_1" type="checkbox" value="lmv">lmv
        <input  name="veh_type_2" id="veh_type_2" type="checkbox" value="2w">2w
        <p>TimeStamp: <span id="tstamp"></span></p>
  </div>
  <p class="submit">
    <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
  </p>

   <div class="display-content">
    <div class="message-wrap dn">  </div>
   </div>
   </form>
</div>


<script>
    function myFunction() {
        document.getElementById("tstamp").innerHTML = aud.currentTime;
    }
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#contact-form").on("submit",function(e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "insert.php",
                data: $( this ).serialize(),
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });
    });
</script>
</body>

The php file as follows:-

<?php
$servername = "localhost";
$database = "test";
$username = "root";
$password = "";

// Create connection

$conn = mysqli_connect($servername, $username, $password, $database);

// Check connection

if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
}

echo "Connected successfully";


if(isset($_POST['Submit'])) {
    $tstamp=addslashes($_POST['tstamp']);
    $message=addslashes($_POST['message']);
    $veh_type_1=addslashes($_POST['veh_type_1']);
    $veh_type_2=addslashes($_POST['veh_type_2']);


    mysqli_query($conn, "insert into messages(message,tstamp,veh_type_1, veh_type_2) values ('$message','$tstamp','$veh_type_1', '$veh_type_2')");
    $sql = mysqli_query($conn, "SELECT message,tstamp,veh_type_1,veh_type_2  id FROM messages order by id desc");

    $result = mysqli_fetch_array($sql);
    echo '<div class="message-wrap">' . $result['message'] . '</div>';
}
?>

The table structure is as follows:-

 #database=test, table_name=messages
1   idPrimary   int(11)             No  None        AUTO_INCREMENT      
2   message     text        latin1_swedish_ci       Yes     NULL                
3   tstamp      float           No  None            
4   veh_type_1  varchar(5)  latin1_swedish_ci       No  None            
5   veh_type_2  varchar(5)  latin1_swedish_ci       No  None

EDIT : added the ajax code to index.html, still when I click submit, it says submitted but nothing is updated in table

No error message? Or unexpected behaviour. This isn't answerable in its current from. Also worth fixing [how to prevent SQL injection in PHP](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). — danblack, Jun 27 '19 at 08:16
@danblack the problem is that the tables arent getting updated. They are just blank. The data is not being sent to the tables I guess. — vinita, Jun 27 '19 at 08:19
You have no `
` in the HTML. And the inputs need `name` attributes to create POST data. — Barmar, Jun 27 '19 at 08:26
@BhaveshTailor whatever Ive written here is the only code/files Im using. Im new to ajax/jquery so I might have missed something important. Pls help !! — vinita, Jun 27 '19 at 08:26
@MayankPandeyz don't have much clue about ajax, I'm a noob. This is all I could manage to write. — vinita, Jun 27 '19 at 08:28
There's no AJAX code. Read the documentation for [`$.ajax`](https://api.jquery.com/jquery.ajax/) — Barmar, Jun 27 '19 at 08:28
SO is not a tutoring service, you're expected to learn the basics on your own, then we'll help you fix what you've written. But we're not going to write it for you. — Barmar, Jun 27 '19 at 08:29
@Barmar added the ajax code to index.html, still when I click submit, it says submitted but nothing is updated in table — vinita, Jun 27 '19 at 08:54
@MayankPandeyz updated the ajax code to index.html, still when I click submit, it says "form submitted" but nothing is updated in table — vinita, Jun 27 '19 at 08:58

score 2 · Answer 1 · answered Jun 27 '19 at 08:57

2

There are multiple issues with your code. Checkout the basics about php form handling.

https://www.w3schools.com/php/php_forms.asp

Add a form-tag arround your inputs
Give name attributes to your inputs
Add type attribute (submit) to your save button

<form action="[path_to_your.php]" method="post">
  <input type="[input type]" name="[name to submit]" >
  ...
  <input type="submit">
</form>

regards

answered Jun 27 '19 at 08:57

Ebby

514
3
9

Thanks Ebby, Ive updated the index.html now. Pls have a look coz its still not updating the tables. – vinita Jun 27 '19 at 09:00

score 2 · Answer 2 · answered Jun 27 '19 at 09:01

All your input fields need to have names in order for $("form").serialize() to get their values. So

<input id="veh_type_1" type="checkbox" value="lmv">lmv
<input id="veh_type_2" type="checkbox" value="2w">2w

should be

<input name="veh_type_1" type="checkbox" value="lmv">lmv
<input name="veh_type_2" type="checkbox" value="2w">2w

.serialize() also won't post the contents of a <span>, you should add a hidden input for this.

<input name="tstamp" id="hidden-tstamp" type="hidden">

and change your function to:

function myFunction() {
    $("#tstamp").text(aud.currentTime);
    $("#hidden-tstamp").val(aud.currentTime);
}

Bhavesh Tailor · Answer 3 · 2019-06-27T09:06:36.850

<body>
<h1>VIDEO TOOL</h1>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
       data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
    <source src="project.m4v" type='video/mp4'>
    <track src='br.srt' kind="subtitles" srclang="en" label="English" default>
</video>
<script>
    // Get the audio element with id="my_video_1"
    var aud = document.getElementById("my_video_1");
    // Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
    aud.ontimeupdate = function() {myFunction()};
</script>
<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">
    <form name="contact-form" action="" method="post" id="contact-form">
        <label for="email">Comments about the frame</label>
        <textarea name="message" class="form-control" id="message"></textarea>

        <div class="error" id="error_message"></div>

        <label>Vehicle Type:</label>
        <input name="veh_type_1"  id="veh_type_1" type="checkbox" value="lmv">lmv
        <input  name="veh_type_2" id="veh_type_2" type="checkbox" value="2w">2w
        <p>TimeStamp: <span id="tstamp"></span></p>
</div>
<p class="submit">
    <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
</p>

<div class="display-content">
    <div class="message-wrap dn">  </div>
</div>
</form>
</div>


<script>
    function myFunction() {
        document.getElementById("tstamp").innerHTML = aud.currentTime;
    }
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#contact-form").on("submit",function(e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "saveFile.php",
                data: $( this ).serialize(),
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });
    });
</script>
</body>

Thanks Bhavesh, Ive updated ajax code in index.html (pls see my post), but when I click submit/save , though it says "form submitted" but nothing is being updated still in the tables. — vinita, Jun 27 '19 at 08:57
Updated everything as per your suggestion (pls check my post) , but still saying "form submitted", but nothing is getting updated in the tables :-( — vinita, Jun 27 '19 at 09:22
Its showing "form submitted" , but then why aint anything updating in sql table :-| — vinita, Jun 27 '19 at 09:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195622/discussion-between-bhavesh-tailor-and-vinita). — Bhavesh Tailor, Jun 27 '19 at 09:31

Unable to send data from Form to SQL database

3 Answers3