我试图将文件和一些文本字段以及下拉值传递给php,以便将它们全部上传到数据库中的查询中。我正在验证JavaScript中的文本字段输入,以防止提供任何错误的输入。但问题是价值不是一直都在通过JavaScript。所以我在表单操作中设置了php文件。那么现在发生了什么,它不是检查单个文本字段输入而不是显示错误。而是直接到PHP。现在我该如何解决这个问题
HTML
<form id="jobform" class="form-horizontal" method="post" action="test.php" enctype="multipart/form-data">
<h2><b>Post your job</b></h2><br><br>
<div class="form-group">
<label class="control-label col-sm-2">Job Position:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="jName" placeholder="Enter job name" name="jName" required>
<p id="jErr"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Job Salary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sal" placeholder="Enter job salary" name="sal" required>
<p id="salErr"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Job Type:</label>
<div class="col-sm-10">
<div class="dropdown">
<select id="jType">
<option value="part-time">Part-Time</option>
<option value="full-time">Full-Time</option>
<option value="internship">Internship</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Job Location:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="loc" placeholder="Enter job locations" name="loc" required>
<p id="locErr"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Add some detailed description:</label>
<div class="col-sm-10">
<input id="u_file" value="u_file" type="file" name="u_file" size="5000000" multiple onchange="showname()"><br><br>
</div>
</div>
<div class="container-fluid text-center">
<br><button name="submitJob" id="submitJob" type="submit" class="btn btn-default" onclick="job_checker()">Submit</button>
<p id="submitJobErr"></p></div>
</form>
的JavaScript
signFlagj = 0;
function job_checker() {
checkJobName();
checkSalary();
checkJobType();
checkJobLoc();
databasejobEntry();
}
function checkJobName() {
jobnameET = document.getElementById("jName");
var jobnameError = document.getElementById("jErr");
jobname = jobnameET.value;
console.log(jobname);
var regex = /^[a-zA-Z ]*$/;
if(!regex.test(jobname)){
jobnameError.innerHTML = "Only letters and white space allowed";
signFlagj = 1;
}
else {
jobnameError.innerHTML = "";
}
}
function checkSalary() {
var salaryET = document.getElementById("sal");
var salaryError = document.getElementById("salErr");
jobsal = salaryET.value;
console.log(jobsal);
var regex = /^[1-9.,][0-9.,]*$/;
if(!regex.test(jobsal)){
salaryError.innerHTML = "Only numbers with or without comma or point is allowed";
signFlagj = 1;
}
else {
salaryError.innerHTML = "";
}
}
function checkJobType() {
var jobTypeET = document.getElementById("jType");
jobType = jobTypeET.value;
console.log(jobType);
}
function checkJobLoc() {
var jobLocET = document.getElementById("loc");
var locError = document.getElementById("locErr");
jobLocation = jobLocET.value;
console.log(jobLocation);
var regex = /^[a-zA-Z0-9\/\s,'-]*$/;
if(!regex.test(jobLocation)){
locError.innerHTML = "Enter valid amount";
signFlagj = 1;
}
else {
locError.innerHTML = "";
}
}
function showname() {
jobFilename = document.getElementById('u_file');
console.log('Selected file: ' + jobFilename.files.item(0).name);
console.log('Selected file: ' + jobFilename.files.item(0).size);
console.log('Selected file: ' + jobFilename.files.item(0).type);
}
/*function toSubmit(){
preventDefault();
alert('I will not submit');
return false;
}*/
function databasejobEntry() {
if(signFlagj==1) {
console.log("fill up correctly!");
alert("Sign up correctly!");
window.location.href = "test.html";
}
else
{
// console.log('Selected file: ' + jobFilename.files.item(0).name);
console.log(jobname);
var submitError = document.getElementById("submitJobErr");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
console.log(this.readyState);
if(this.readyState == 4 && this.status == 200)
{
console.log(this.status);
var response = xhttp.responseText;
console.log(response);
submitError.innerHTML=response;
alert(response);
if(String(response.trim()) === "Success") {
alert("Successfully submitted :)");
var formdata = $('#jobform').serializeArray();
//alert(formdata);
document.getElementById("jobform").submit();
//window.location.href = "uploadJob.html";
}
}
}
xhttp.open("POST", "test.php?jobname="+jobname+"&jobType="+jobType+"&jobsal="+jobsal+"&jobLocation="+jobLocation+"&jobFilename="+jobFilename,true);
//xhttp.open("POST", "three.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//xhttp.open("POST", "test.php?jobname="+jobname+"&jobFilename="+jobFilename,true);
xhttp.send();
}
}
PHP
<?php
require_once('DBconnection.php');
//ini_set('display_errors', 1);
//ini_set('log_errors', 1);
$val="";
$jobName = $_POST["jName"];
$jobType = $_POST["jType"];
$jobSalary = $_POST["sal"];
$jobLocation = $_POST["loc"];
echo "$jobName";
echo "$jobType";
echo "$jobSalary";
echo "$jobLocation";
//print_r($jobName);
echo"<br>";
//$u_file = $_FILES['jobFilename'];
$file_type = $_FILES['u_file']['type'];
$file_size = $_FILES['u_file']['size'];
$file_name = $_FILES['u_file']['name'];
//echo "$jobName";
print_r($file_name);
echo"<br>";
print_r($file_size);
echo"<br>";
print_r($file_type);
echo"<br>";
//echo "****************";
$currentdir = getcwd();
$targetfolder = $currentdir . "/testupload/";
// echo "****************";
print_r($targetfolder);
$targetfile = $targetfolder . basename( $_FILES['u_file']['name']) ;
print_r($targetfile);
//print_r($currentdir);
//echo "****************";
$uploadOk=1;
//print_r($file_type);
//echo "The file ". basename( $_FILES['u_file']['name']). " is uploaded";
if ($file_type != "application/pdf" && $file_type != "image/png" && $file_type != "image/jpeg" && $file_type != "image/jpg") {
echo "Sorry, only JPG, JPEG, PNG & PDF files are allowed.";
$uploadOk = 0;
}
if (file_exists($targetfile)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
if($uploadOk==0){
echo "Problem in uploading file";
}
else {
if(move_uploaded_file($_FILES['u_file']['tmp_name'], $targetfile)) {
$fileUpQueryjob = "INSERT INTO jobs (job_name,job_type,job_salary,job_location,job_filename) VALUES ('$jobName','$jobType','$jobSalary','$jobLocation','$file_name')";
$upJob = $db->query($fileUpQueryjob);
if ($upJob == true) {
$val = "Success";
echo "The file ". basename( $_FILES['u_file']['name']). " is uploaded";
}
else
echo "Error: " . $fileUpQueryjob . "<br>" . mysqli_error($db);
}
}
//echo "$val";
$db->close();
?>
答案 0 :(得分:0)
这可能是因为您的按钮类型是&#39; sumbit&#39;并且它优先于onlick。最干净的方法,删除提交类型,并在验证后手动提交:
<button name="submitJob" id="submitJob" class="btn btn-default" onClick="job_checker()">Submit</button>
在您的&#34;验证&#34;上找到您的DOM表单功能,如果一切正常,则提交:
function job_checker() {
// just refactor all these functions to return "true" or "false"
var isValid = checkJobName() &&
checkSalary() &&
checkJobType() &&
checkJobLoc() &&
databasejobEntry();
// if all these validations went through,
if (isValid) {
document.querySelector('#jobForm').submit();
}
}
答案 1 :(得分:0)
您的javascript中存在错误。试试这个:
JAVASCRIPT
signFlagj = 0;
function job_checker()
{
checkJobName();
checkSalary();
checkJobType();
checkJobLoc();
databasejobEntry();
}
function checkJobName()
{
var jobnameET = document.getElementById("jName");
var jobnameError = document.getElementById("jErr");
var jobname = jobnameET.value;
console.log(jobname);
var regex = /^[a-zA-Z ]*$/;
if(!regex.test(jobname))
{
jobnameError.innerHTML = "Only letters and white space allowed";
signFlagj = 1;
}
else jobnameError.innerHTML = "";
}
function checkSalary()
{
var salaryET = document.getElementById("sal");
var salaryError = document.getElementById("salErr");
var jobsal = salaryET.value;
console.log(jobsal);
var regex = /^[1-9.,][0-9.,]*$/;
if(!regex.test(jobsal))
{
salaryError.innerHTML = "Only numbers with or without comma or point is allowed";
signFlagj = 1;
}
else salaryError.innerHTML = "";
function checkJobType()
{
var jobTypeET = document.getElementById("jType");
var jobType = jobTypeET.value;
console.log(jobType);
}
function checkJobLoc()
{
var jobLocET = document.getElementById("loc");
var locError = document.getElementById("locErr");
var jobLocation = jobLocET.value;
console.log(jobLocation);
var regex = /^[a-zA-Z0-9\/\s,'-]*$/;
if(!regex.test(jobLocation))
{
locError.innerHTML = "Enter valid amount";
signFlagj = 1;
}
else locError.innerHTML = "";
}
function showname()
{
var jobFilename = document.getElementById('u_file');
console.log('Selected file: ' + jobFilename.files.item(0).name);
console.log('Selected file: ' + jobFilename.files.item(0).size);
console.log('Selected file: ' + jobFilename.files.item(0).type);
}
/*
function toSubmit()
{
preventDefault();
alert('I will not submit');
return false;
}
*/
function databasejobEntry()
{
if(signFlagj==1)
{
console.log("fill up correctly!");
alert("Sign up correctly!");
window.location.href = "test.html";
}
else
{
// console.log('Selected file: ' + jobFilename.files.item(0).name);
console.log(jobname);
var submitError = document.getElementById("submitJobErr");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
console.log(this.readyState);
if(this.readyState == 4 && this.status == 200)
{
console.log(this.status);
var response = xhttp.responseText;
console.log(response);
submitError.innerHTML=response;
alert(response);
if(String(response.trim()) === "Success")
{
alert("Successfully submitted :)");
var formdata = $('#jobform').serializeArray();
//alert(formdata);
document.getElementById("jobform").submit();
//window.location.href = "uploadJob.html";
}
}
}
xhttp.open("POST", "test.php?jobname="+jobname+"&jobType="+jobType+"&jobsal="+jobsal+"&jobLocation="+jobLocation+"&jobFilename="+jobFilename,true);
//xhttp.open("POST", "three.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//xhttp.open("POST", "test.php?jobname="+jobname+"&jobFilename="+jobFilename,true);
xhttp.send();
}
}
PHP
<?php
require_once('DBconnection.php');
// ...
// Since you are using a database connection consider using a function
// to escape strings like mysli_real_escape_string() if you are using MySQL
$jobName = $_POST["jName"];
$jobType = $_POST["jType"];
$jobSalary = $_POST["sal"];
$jobLocation = $_POST["loc"];
?>