newbie here!

I am working with a simple PHP form with few fields and few uploads. I want to use the Modal pop up form for this.

Below codes are working fine. I was able to insert the fields into MYSQL successfully but I don't know how to add file upload of docs/images into a folder and insert the URL into MYSQL.

Here are my codes:

Calling the Modal Form ->

            <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm">


            <div class="modal fade" id="modalForm" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span class="sr-only">Close</span>
                            <h1 class="modal-title" id="myModalLabel">Add New Die</h1>

                        <!-- Modal Body -->
                        <div class="modal-body">
                        <form role="form">
                            <table class="borgy">
                                <td width="300" class="jam0106"><label for="ex3">Profile Number</label><label class="jam01062016">&nbsp;*</label></td>
                                <td width="300"><input type="text" class="form-control" id="addProfileNumber" name="addProfileNumber" placeholder="Enter Profile Number" /></td>
                                <td width="300" class="jam0106"><label for="ex3">Shapes</label><label class="jam01062016">&nbsp;*</label></td>
                                <td width="300">
                                    <select class="form-control" name="addShapes" id="addShapes" />
                                    <option value="">Select Shapes</option>
                                    $queryShapes = "SELECT * FROM tbl_shapes ORDER BY Shape_Name ASC";
                                    $result = mysqli_query($db, $queryShapes);
                                    if( ! $result ) {
                                        echo mysql_error();
                                    while ($row=mysqli_fetch_array($result)) {
                                        echo '<option value="' . $row['Shape_Name'] . '">' . $row['Shape_Name'] . '</option>';
                                <td width="300" class="jam0106"><label for="ex3">Upload Drawing</label><label class="jam01062016">&nbsp;*</label></td>
                                <td width="300"><input type="file" name="uploadDrawing" /></td>
                                <td width="300" class="jam0106"><label for="ex3">Upload Profile</label><label class="jam01062016">&nbsp;*</label></td>
                                <td width="300"><input type="file" name="uploadProfile" /></td>
                                <td width="300" class="jam0106"><label for="ex3">Upload Photo</label><label class="jam01062016">&nbsp;*</label></td>
                                <td width="300"><input type="file" name="uploadPhoto" /></td>
                            <p class="statusMsg"></p>

                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="history.go(0)">Close</button>
                            <button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">SUBMIT</button>

Here is my script for submitContractForm() ->

                function submitContactForm(){
                    //var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
                    var ProfileNumber = $('#addProfileNumber').val();
                    var Shapes = $('#addShapes').val();
                    if(ProfileNumber.trim() == '' ){
                        alert('Please enter your PROFILE NUMBER.');
                        return false;
                    }else if(Shapes.trim() == '' ){
                        alert('Please select SHAPES.');
                        return false;
                            beforeSend: function () {
                                $('.modal-body').css('opacity', '.5');
                                if(msg == 'ok'){
                                    $('.statusMsg').html('<span style="color:green;">Entry successfully added! Please close the form or add another new entry.</p>');
                                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again. </span>');
                                $('.modal-body').css('opacity', '');

and below is my PHP script that will insert into MYSQL -->

    if(isset($_POST['contactFrmSubmit']) && !empty($_POST['addProfileNumber'] && !empty($_POST['addShapes']))) {

        // Submitted form data
        $ProfileNumber   = $_POST['addProfileNumber'];
        $Shapes  = $_POST['addShapes'];

        $link = mysqli_connect("localhost", "root", "", "profile");

    // Check connection
        if($link === false){
            die("ERROR: Could not connect. " . mysqli_connect_error());
    // Attempt insert query execution
        $sql = "INSERT INTO tbl_dies (`Profile_Number`, `Shape_ID`) VALUES ('$ProfileNumber', '$Shapes')";
        if(mysqli_query($link, $sql)){
            $status = 'ok';
        } else{
            $status = 'err';
        echo $status;die;
    // Close connection

Recommended Answers

All 5 Replies

Member Avatar

Uplodaing a file using ajax used to be a right mess, employing flash and all sorts of hacks. These days we can use the FormData object in js. It can be a little iffy in old browsers, so you may need use an formdata emulation script if you need to support them:

Once you have uploaded the file (via ajax), then your PHP gets the file from the $_FILES superglobal array and stores it wherever you want. Next store the location/filename in the DB with the other fields.

Return a status code or msg to js.

Hi Diafol,

Would you mind giving me sample codes? Thanks in advance! Cheers!

Member Avatar

Sorry no. I think you can search for formdata object? Try some code. Come back if you have issues.

I have successfully added the file upload. Thanks anyway.

Member Avatar

Great ews borgyborg. If you have time, perhaps you could post your code so that others may benefit? Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.