Я пытаюсь все, чтобы заставить это работать. Когда я нажимаю кнопку отправки, ничего не происходит. Он просто сидит там.
У меня есть html-вызов javascript, который отправляет данные в php файл, чтобы веб-страница не обновлялась. Мне просто нужно сообщение, чтобы показать "успех" и базу данных для обновления.
Но когда я попал в submit, он не обновляет базу данных, и сообщения об успешности не отображаются. Я проверял это снова и снова. Я называю их ненадлежащим образом? Пожалуйста помоги!
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>
Мой ответ основан на предположении, что ваша функция Javascript passData()
находится внутри файла refreshForm.js
.
Здесь есть несколько вопросов.
Функция Javascript не может быть вызвана, потому что она объявлена в другом файле
Каждый .js
файл имеет свою собственную область. Самый простой способ исправить это - назначить passData()
глобальной области. Это самый быстрый способ, но обратите внимание, что есть намного лучшие способы export
.
Вызов функции Javascript из onclick
не препятствует отправке всей формы
Ваша функция вызывается, но Javascript продолжает submit
форму, поскольку это поведение по умолчанию кнопки submit
. Вам нужно каким-то образом сказать Javascript, чтобы предотвратить это действие по умолчанию.
// 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;
};
Затем измените обработчик onclick
в вашем HTML на onclick="return passData(event);"
.val()
при использовании контекста jQuery$("#title").val();
чтобы получить значение из HTML. То же самое для года, директора, пола и времени выполнения.