javascript - 值不通过 Javascript 传递，而是直接传递给 PHP

Question

我正在尝试将一个文件和一些文本字段以及一个下拉值传递给 php，以便将它们全部上传到数据库中的查询中。我正在验证 JavaScript 中的文本字段输入，以防止给出任何错误的输入。但问题是这些值并不是一直通过 JavaScript。所以我在表单操作中设置了 php 文件。所以现在发生的事情是，它没有检查单个文本字段的输入，也没有显示错误。而是直接进入 php.ini。现在我该如何解决这个问题

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();
?>

Answer 1

这可能是因为您的按钮类型是“sumbit”并且它优先于 onlick。最干净的方法是删除提交类型，并在验证后手动提交:

    <button name="submitJob" id="submitJob" class="btn btn-default" onClick="job_checker()">Submit</button>

在“验证”函数中找到您的 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();
    }
}