Home/ Questions/Q 9269281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T15:04:45+00:00

I want to create a form page with validation using php and ajax jquery.

  • 0

I want to create a form page with validation using php and ajax jquery.
I downloaded the jquery from http://malsup.com/jquery/form/

Form Page:

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
function checkAll(){
var errmsg = ""
document.getElementById("errmsg").style.display = "none";

if(document.getElementById("txtbox1").value == ""){
    errmsg += "Type your title<br/>";
}

if(document.getElementById("file1").value == ""){
    errmsg += "Upload your picture<br/>";
}

if(errmsg != ""){
    document.getElementById("errmsg").style.display = "block";
    document.getElementById("errmsg").innerHTML = errmsg;
    return false;
}

}

$(document).ready(function() {
   var options = {
    target: '#div2', //Div tag where content info will be loaded in
    url:'uploadfile.php', //The php file that handles the file that is uploaded
    beforeSubmit: checkAll,
    success:  function() {
        //Here code can be included that needs to be performed if Ajax request was successful
    }
    };

    $('#Form1').submit(function() {
        $('#Form1').ajaxSubmit(options);
        return false;
    });
});
</script>
</head>
<body>
<span id="errmsg"></span>
<div id="div2"></div>
<form name="Form1" id="Form1" method="post" action="next.php" enctype="multipart/form-data">
Title <input type="text" name="txtbox1" id="txtbox1" />
Picture <input type="file" name="file1" id="file1" /><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>

Uploadfile.php:

<?php
if (((@$_FILES["file1"]["type"] == "image/gif") || (@$_FILES["file1"]["type"] == "image/png")
|| (@$_FILES["file1"]["type"] == "image/jpeg")
|| (@$_FILES["file1"]["type"] == "image/pjpeg"))
&& (@$_FILES["file1"]["size"] < 30720))
  {

  }
 else{
    echo "Check your file";
 }
?>

My problem:
I want to create validation for each form component including file upload (file type and size checking) and after completing form, user will be redirected to next.php (see form action).
Because of using ajax jquery for validating file upload, the action changed to uploadfile.php and if user completed the form, the page is going nowhere.
Please help me to solve this problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In uploadfile.php, when everything is OK, you can output a javascript redirection:

    {
    echo '<script type="text/javascript">window.location.replace("next.php");</script>';
}

    By the way, note that checking the file type is not reliable, as it is given by the browser (this is not mandatory) and can easily be forged. One safer way to check if a file is really an image is to check that getimagesize does not fail.

    • 0