email file attachment php, Ajax, Jquery

Question

i have problem with email file attachment php, Ajax, Jquery on the following codes, also i need the file attachment field mandatory. the uploaded file in the form doesn't pass to the email!

i need to place code into the Ajax to receive file(s) from the form and check the empty field, then it everything goes fine pass the fields include file(s) to the form. and from the form to the Email.

HTML Form:

<form role="form">
                <div class="form-group">
                <label for="inputName" class="form-label "></label>
                <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/>
                </div>
                <div class="form-group">
                    <label for="inputEmail" class="form-label "></label>
                    <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/>
                </div>
                <div class="form-group">
                    <label for="inputMessage" class="form-label "></label>
                    <input type="text"  class="form-control"  id="inputMessage" placeholder="Phone Example:+1234567890"></textarea>
                </div>
            </form>


            <button type="button" class="btn sign-btn-primary submitBtn" onclick="submitContactForm()">Request</button>

        <p class="statusMsg"></p>

my php file :

// Submitted form data
$name   = $_POST['name'];
$email  = $_POST['email'];
$message= $_POST['message'];

/*
 * Send email to admin
 */
$to     = 'info@test.org';
$subject= 'CCI2017 Download Log';

$htmlContent = '
<h4>The CCI 2017 has been downloaded by person, details are given below.</h4>
<table cellspacing="0" style="width: 300px; height: 200px;">
    <tr>
        <th>Name:</th><td>'.$name.'</td>
    </tr>
    <tr style="background-color: #e0e0e0;">
        <th>Email:</th><td>'.$email.'</td>
    </tr>
    <tr>
        <th>Phone:</th><td>'.$message.'</td>
    </tr>
</table>';

// Set content-type header for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// Additional headers
$headers .= 'From: ME' . "\r\n";

// Send email
if(mail($to,$subject,$htmlContent,$headers)){
    $status = 'ok';
}else{
    $status = 'err';
}

// Output status
echo $status;die;

}

my jquery:

<script type="application/javascript">
    function submitContactForm() {
        var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        var regp = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/;
        var name = $('#inputName').val();
        var email = $('#inputEmail').val();
        var message = $('#inputMessage').val();
        if (name.trim() == '') {
            alert('Please enter your name.');
            $('#inputName').focus();
            return false;
        } else if (email.trim() == '') {
            alert('Please enter your email.');
            $('#inputEmail').focus();
            return false;
        } else if (email.trim() != '' && !reg.test(email)) {
            alert('Please enter valid email.');
            $('#inputEmail').focus();
            return false;
        } else if (message.trim() != '' && !regp.test(message)) {
            alert('Please enter your Phone.');
            $('#inputMessage').focus();
            return false;
        } else {
            $.ajax({
                type: 'POST',
                url: 'submit_form.php',
                data: 'contactFrmSubmit=1&name=' + name + '&email=' + email + '&message=' + message,
                beforeSend: function () {
                    $('.submitBtn').attr("disabled", "disabled");
                    $('.modal-body').css('opacity', '.5');
                },
                success: function (msg) {
                    if (msg == 'ok') {
                        $('#inputName').val('');
                        $('#inputEmail').val('');
                        $('#inputMessage').val('');
                        $('.statusMsg').html('<a href="Doc/MENACA CCI (c).pdf" class="btn cci-btn-primary btn-sm">Download</a>');
                    } else {
                        $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                    }
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            });
        }
    }

</script>

Answer 1

Solutions:

<form role="form">
    <div class="form-group">
        <label for="inputName" class="form-label "></label>
        <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="form-label "></label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/>
    </div>
    <div class="form-group">
        <label for="inputMessage" class="form-label "></label>
        <input type="text"  class="form-control"  id="inputMessage" placeholder="Phone Example:+1234567890"></textarea>
    </div>
</form>


<button type="button" class="btn sign-btn-primary submitBtn" onclick="submitContactForm()">Request</button>

<p class="statusMsg"></p>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type="application/javascript">
    function submitContactForm() {
        var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        var regp = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/;
        var name = $('#inputName').val();
        var email = $('#inputEmail').val();
        var message = $('#inputMessage').val();
        if (name.trim() == '') {
            alert('Please enter your name.');
            $('#inputName').focus();
            return false;
        } else if (email.trim() == '') {
            alert('Please enter your email.');
            $('#inputEmail').focus();
            return false;
        } else if (email.trim() != '' && !reg.test(email)) {
            alert('Please enter valid email.');
            $('#inputEmail').focus();
            return false;
        } else if (message.trim() != '' && !regp.test(message)) {
            alert('Please enter your Phone.');
            $('#inputMessage').focus();
            return false;
        } else {
            $.ajax({
                type: 'POST',
                url: 'submit_form.php',
                data: 'contactFrmSubmit=1&name=' + name + '&email=' + email + '&message=' + message,
                beforeSend: function () {
                    $('.submitBtn').attr("disabled", "disabled");
                    $('.modal-body').css('opacity', '.5');
                },
                success: function (msg) {
                    if (msg == 'ok') {
                        $('#inputName').val('');
                        $('#inputEmail').val('');
                        $('#inputMessage').val('');
                        $('.statusMsg').html('<a href="Doc/MENACA CCI (c).pdf" class="btn cci-btn-primary btn-sm">Download</a>');
                    } else {
                        $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                    }
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            });
        }
    }

</script>

Submit_form.php

<?php

// Submitted form data
$name   = $_POST['name'];
$email  = $_POST['email'];
$message= $_POST['message'];


$to = 'kiran.mind2014@gmail.com';

// Subject
$subject = 'CCI2017 Download Log';

// Message
$message = '
<h4>The CCI 2017 has been downloaded by person, details are given below.</h4>
<table cellspacing="0" style="width: 300px; height: 200px;">
    <tr>
        <th>Name:</th><td>'.$name.'</td>
    </tr>
    <tr style="background-color: #e0e0e0;">
        <th>Email:</th><td>'.$email.'</td>
    </tr>
    <tr>
        <th>Phone:</th><td>'.$message.'</td>
    </tr>
</table>
';

// To send HTML mail, the Content-type header must be set
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=iso-8859-1';

// Additional headers
$headers[] = 'To: Kiran <kiran.mind2014@gmail.com>';
$headers[] = 'From: CCI2017 Download Log <kiran.mind2014@gmail.com>';

// Send email
if(mail($to, $subject, $message, implode("\r\n", $headers))){
$status = 'ok';
}else{
$status = 'err';
}

// Output status
echo $status;die;

It is working fine!!!.