0

I have been trying everything to get this to work. When I hit the submit button nothing happens. It just sits there.

I have the html calling to a javascript that sends the data to a php file so that the webpage won't refresh. I just need a message to show up saying "success" and the database to update.

But when I hit submit, it doesn't update the database, and the success messages don't show up. I have checked this over and over. Am I calling them improperly? Please help!

function passData() {
 //getting values from HTML
 var title= $("#title").value;
 var year= $("#year").value;
 var director= $("#director").value;
 var genre= $("#genre").value;
 var runtime= $("#runtime").value;

 if (title == '' || year == '' || director == '' || genre == '' || runtime == '') {
  alert("Please fill all fields");
 } else {
  // AJAX code to submit form.
  $.ajax({
   type: "POST",
   url: "insert_DVD.php",
   data: {
    title1: title,
    year1: year,
    director1: director,
    genre1: genre,
    runtime1: runtime},
   cache: false,
   success: function(html) {
    alert(html);
   }
  });
 }
 return false;
}
<?php
//getting values from JS
$title = $_POST['title11'];
$year = $_POST['year1'];
$director = $_POST['director1'];
$genre = $_POST['genre1'];
$runtime = $_POST['runtime1'];

$title = addslashes($title);
$director = addslashes($director);
$year = addslashes($year);
$genre = addslashes($genre);
$runtime = addslashes($runtime);

//connecting to server
$connection = mysql_pconnect($host,$user,$pass); 
if (!($db = mysql_select_db($database))) 
   echo "<p> could not connect to database </p><br>");

//open database
if(!mysql_select_db($table,$db)) 
   echo "<p> could not open collection database </p><br>"); 
 
//insert query
if (isset($_POST['title1'])) {
 $query = "INSERT INTO `collection` (`title` , `year` , `director` , `genre` , `runtime` ) VALUES ('$title', '$year', '$director', '$genre', '$runtime')";
 if(!$results = mysql_query($query, $db){
  print("<p> could not excute query </p>");
 } else {
  echo "succuess";
 }
}else {
 echo "Something went wrong";
}

//close connection
mysql_close($connection); 
?>
<!DOCTYPE html>
<html>
  <head>
 <meta charset = "utf-8">
 <title>test</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript" src="refreshForm.js"></script>
  <link rel="stylesheet" href="webpage.css">
  </head>
  <body class="subStyle"> 
 <form id="form" method="post">
  If there is more than one director, seperate with comma.
  <table border=0>
  <tr>
  <th>Movie Title</th>
  <th>Year Made</th>
  <th>Director</th>
  <th>Genre</th>
  <th>Runtime(Minutes)</th>
  </tr>
  
  <tr>
  <td><input type=text name="title"    id="title"    maxlength=100 size=30></td>
  <td><input type=text name="year"     id="year"     maxlength=4   size=10></td>
  <td><input type=text name="director" id="director" maxlength=100 size=30></td>
  <td><input type=text name="genre"    id="genre"    maxlength=20  size=20></td>
  <td><input type=text name="runtime"  id="runtime"  maxlength=4   size=20></td>
  </tr>
  
  <tr><td>
  <input type="submit" id="submit" name="submit" onclick="passData();" value="Update Database"></td></tr>
  </table>
 </form>
 
 <div id="results">
  <!-- All data will display here  -->
 </div>
   </body>
</html>
  • don't just settle for _it just sits there_, you need to be aware of whats happening, the first step is to look under the hood, open up your developer console always when using JS, don't use SO as your personal debugger. FYI, use `.val()` method when using jQuery context – Kevin Apr 09 '18 at 01:21
  • 1
    Use `$("#title").val();` to get value from HTML. Same for year, director, gender, and runtime. – Justinus Hermawan Apr 09 '18 at 01:31
  • `$_POST['title11']` <- typo – Karlo Kokkak Apr 09 '18 at 01:36
  • Your code maybe is vulnerable to sql injections: https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php – Karlo Kokkak Apr 09 '18 at 01:39
  • `addslashes` does very little to prevent SQL injection. – ceejayoz Apr 09 '18 at 02:02

1 Answers1

0

My answer is based on the assumption that your Javascript function passData() is inside the file refreshForm.js.

There's a few issues here.

The Javascript function cannot be called because it's declared in another file

Each .js file has its own scope. The easiest way to fix this is to assign the passData() function to the global scope. This is the quickest way but do note that there are much better ways like export.

Calling the Javascript function from onclick does not prevent the entire form from submitting

Your function gets called, but then Javascript continues with the form submission since that's the default behaviour of a submit button. You will need some way to tell Javascript to prevent this default action from happening.

// refreshForm.js

window.passData = function (e) { // <-- Assign passData to the global scope
    e.preventDefault(); // <-- Tell Javascript to prevent the default action of form submission

    //getting values from HTML
    var title= $("#title").value;
    var year= $("#year").value;
    var director= $("#director").value;
    var genre= $("#genre").value;
    var runtime= $("#runtime").value;

    if (title == '' || year == '' || director == '' || genre == '' || runtime == '') {
        alert("Please fill all fields");
    } else {
        // AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "insert_DVD.php",
            data: {
                title1: title,
                year1: year,
                director1: director,
                genre1: genre,
                runtime1: runtime},
            cache: false,
            success: function(html) {
                alert(html);
            }
        });
    }
    return false;
};

Next, change your onclick handler in your HTML to onclick="return passData(event);"

csb
  • 674
  • 5
  • 13
  • I tried out your suggestion with no luck. Also the button is of type button, not submit. If i put the same code in my html file, it kind of works. I at least get the alert messages, but it doesn't carryout the php call. – Ruttle Head Apr 10 '18 at 02:36