Отправка Формы при помощи Ajax

Данные примеры не стоит тупо копировать, это примеры с зависимостью Bootstrap 4

Форма может быть любой

<form method="POST" action="#" name="uploadZakaz" data="modal" label="Пример, чего хочу" data-label="Пример, чего хочу" enctype="multipart/form-data">
    <input class="form" name="name" type="text" value="" placeholder="Имя" required autocomplete="off">
    <input class="form" name="phone" type="tel" value="" placeholder="+7 (   )    -  -" required autocomplete="off">
    <div class="imgPreview">
        <input class="imgPreviewInput" name="UF_PHOTO" type="file" accept="image/*" value="" autocomplete="off">
    </div>
    <button class="btn btn-success">Заказать</button>
</form>

Скрипт обработки

<script>
    jQuery('FORM[name=uploadZakaz]').submit(function(){
        var thisObj = jQuery(this),
            name = thisObj.find('INPUT[name=name]'),
            phone = thisObj.find('INPUT[name=phone]'),
            formDataPost = new FormData(thisObj[0]);
        if(name.val() == ''){
            jQuery('#alertModal DIV.modal-body').html('');
            jQuery('#alertModal DIV.modal-body').append("<h3>Не все поля заполненны</h3><p>Введите свое имя</p>");
            jQuery('#alertModal').modal();
            name.focus();
            return false;
        }
        if(phone.val() == ''){
            jQuery('#alertModal DIV.modal-body').html('');
            jQuery('#alertModal DIV.modal-body').append("<h3>Не все поля заполненны</h3><p>Введите свой телефон</p>");
            jQuery('#alertModal').modal();
            phone.focus();
            return false;
        } else {
            var r2 = /^\+7 \([0-9]{3}\) [0-9]{3}-[0-9]{2}-[0-9]{2}$/i;
            if(!r2.test(phone.val())){
                jQuery('#alertModal DIV.modal-body').html('');
                jQuery('#alertModal DIV.modal-body').append("<h3>Не все поля заполненны</h3><p>Введен не верный телефон</p>");
                jQuery('#alertModal').modal();
                phone.focus();
                return false;
            }
        }
        // append extra fields
        formDataPost.append('func', 'sentLoaded');
        jQuery.ajax({
            url: '/phpscript.php',
            type: 'POST',
            data: formDataPost,
            cache: false,
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            success : function(){}
        })
        .done( function(data){
            data = JSON.parse(data);
            if( data.id ){
                jQuery('#alertModal DIV.modal-body').html('');
                jQuery('#alertModal DIV.modal-body').append('<h3>Спасибо за заявку!</br>Мы свяжемся с Вами в ближайшее время!</h3>');
                jQuery('.onlineZayavka').modal('hide');
                jQuery('#alertModal').modal();
                jQuery('INPUT[name=name]').val('');
                jQuery('INPUT[name=phone]').val('');
                jQuery('INPUT[name=UF_PHOTO]').val('');
                jQuery('.imgPreview').css('background-image', '/images/noImg.jpg');;
            } else {
                jQuery('#alertModal DIV.modal-body .blockText').html('');
                jQuery('#alertModal DIV.modal-body .blockText').append("<h3>Не все поля заполненны</h3>");
                jQuery('#alertModal').modal();
            }
        })
        .fail(function(data){
            console.log(data);
            //alert('Error');
        });
        
        return false;
    });
</script>

Скрипт на стороне сервера

<?php
    /// пример
    if(!empty($_FILES['UF_PHOTO'])){
        require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/cropImage.php');
        $cropImage = new \cropImage();
        $dirRoot = '/images/uploads';
        $dir = $_SERVER['DOCUMENT_ROOT'] . $dirRoot;
        if(!file_exists($dir)){
            mkdir($dir, 0777, true);
        }
        $dirRootCache = '/cache/image-uploads';
        $dirCache = $_SERVER['DOCUMENT_ROOT'] . $dirRootCache;
        if(!file_exists($dirCache)){
            mkdir($dirCache, 0777, true);
        }
        $tmpName = rand(100,999) . rand(100,999) . '_' . $_FILES['UF_PHOTO']['name'];
        move_uploaded_file($_FILES['UF_PHOTO']['tmp_name'], $dirCache . '/' . $tmpName);
        $img = $dirCache . '/' . $tmpName;
        $createFile = !empty($_POST['name']) ? $_POST['name'] . '_' : '';
        $createFile .= date('His') . '_' . $_FILES['UF_PHOTO']['name'];
        $cropImage->cropImages($img, $dir . '/' . $createFile, 3000, 500, 80);
        $img = $dirRoot . '/' . $createFile;
    }
    
    $subject = 'Заявка с сайта ' . $_SERVER['SERVER_NAME'] . ' с файлом';
    $data = array(
        'name' => !empty($_POST['name']) ? $_POST['name'] : '',
        'phone' => !empty($_POST['phone']) ? $_POST['phone'] : '',
        'file' => !empty($img) ? $img : '',
        'label' => 'Заказ звонка с файлом',
    );
    $mailSender = new mailTo($mailToAdres, $mailFromAdres, $subject, $data);
    $mailSender->sendMail();
    
    echo json_encode( array(
        "id" => 1,
        "message" => "Ok",
    ));
Подобные материалы

CRG Home 2026

Не является публичной офертой.