0

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">
                Add
            </button>

The MODAL FORM ->

            <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>
                            </button>
                            <h1 class="modal-title" id="myModalLabel">Add New Die</h1>
                        </div>

                        <!-- Modal Body -->
                        <div class="modal-body">
                        <form role="form">
                            <table class="borgy">
                            <tr>
                                <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>
                                    <?php
                                    $queryShapes = "SELECT * FROM tbl_shapes ORDER BY Shape_Name ASC";
                                    $result = mysqli_query($db, $queryShapes);
                                    if( ! $result ) {
                                        echo mysql_error();
                                        exit;
                                    }
                                    while ($row=mysqli_fetch_array($result)) {
                                        echo '<option value="' . $row['Shape_Name'] . '">' . $row['Shape_Name'] . '</option>';
                                    }
                                    ?>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <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>
                            </tr>
                            <tr>
                                <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>
                            </tr>
                            <tr>
                                <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>
                            </tr>
                        </table>
                            <p class="statusMsg"></p>
                        </form>
                        </div>

                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <br><br>
                            <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>
                        </div>
                    </div>
                </div>
            </div>

Here is my script for submitContractForm() ->

           <script>
                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.');
                        $('#addProfileNumber').focus();
                        return false;
                    }else if(Shapes.trim() == '' ){
                        alert('Please select SHAPES.');
                        $('#addShapes').focus();
                        return false;
                    }else{
                        $.ajax({
                            type:'POST',
                            url:'submit_new_die.php',
                            data:'contactFrmSubmit=1&addProfileNumber='+ProfileNumber+'&addShapes='+Shapes,
                            beforeSend: function () {
                                $('.submitBtn').attr("disabled","disabled");
                                $('.modal-body').css('opacity', '.5');
                            },
                            success:function(msg){
                                if(msg == 'ok'){
                                    $('#addProfileNumber').val('');
                                    $('#addShapes').val('');
                                    $('.statusMsg').html('<span style="color:green;">Entry successfully added! Please close the form or add another new entry.</p>');
                                }else{
                                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again. </span>');
                                }
                                $('.submitBtn').removeAttr("disabled");
                                $('.modal-body').css('opacity', '');
                            }
                        });
                    }
                }
            </script>

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

    <?php
    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
        mysqli_close($link);
    }
    ?>
2
Contributors
5
Replies
51
Views
8 Months
Discussion Span
Last Post by diafol
2

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:

https://github.com/francois2metz/html5-formdata

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.

0

Hi Diafol,

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

Edited by borgyborg

0

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

Edited by diafol

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.