Как передать значения формы ajax запросом в php?

288

21 июля 2022, 14:30

Не получается передать значения формы в php файл..
php файл лежит в папке "/php/send.php" Библиотеку ("jquery": "^3.5.1") я подключил..
После нажатия кнопки отправить в браузерной строке появляется всё то, что я ввёл и всё..
Я не понимаю где я допустил ошибку и в чём..

https://mu-site.com/?name=ddddd&socialname=ddddd&numberfo=1000&email=dddd%40dddd&text=ddddddddd&myfile%5B%5D=

Вот JS код AJAX запроса и ниже HTML форма

function funcSucces() {
    $(".title-fe2").text("Is Ready...");
}
$(function() {
    let doc = documetnt,
        name = doc.querySelector(".name").value,
        socialname = doc.querySelector(".socialname").value,
        numberfo = doc.querySelector(".numberfo").value,
        email = doc.querySelector(".email").value,
        text = doc.querySelector(".text").value;
    $("#send-btn-form").bind("click", function() {
        $.ajax({
            url: '../php/send.php', // Это то куда мы отправляем данные
            type: 'POST', // Это то каким методом мы отправляем данные
            data: ({ // Передаём переменные 
                name: name,
                socialname: socialname,
                numberfo: numberfo,
                email: email,
                text: text
            }),
            dataType: "text", // Определяем, что мы передаём. text или html
            success: funcSucces // Этот параметр вызывается когда фунция успешна отработала. Когда приходит ответ "любой" этот параметр срабатывает.
        });
    });
});

<form enctype="multipart/form-data" id="form">
                        <div class="form-em">
                            <div class="form-group">
                                <input type="text" name="name" class="fg-mr inpform-f" placeholder="Your name" required>
                                <input type="text" name="socialname" class="inpform-f" placeholder="Social @username">
                            </div>
                            <div class="form-group">
                                <div class="fg-mr fg-btn">
                                    <input type="button" class="quantity-arrow-minus" value="-">
                                    <input type="number" name="numberfo" class="quantity-num inpform-f" placeholder="No., of followers">
                                    <input type="button" class="quantity-arrow-plus" value="+">
                                </div>
                                <div class="fg-btn">
                                    <input type="email" name="email" class="inpform-f" placeholder="Your email" required>
                                </div>
                            </div>
                            <textarea name="text" rows="5" class="inpform-f" placeholder="Enter your message..."></textarea>
                            <div class="form-group">
                            </div>
                            <div class="form-group">
                                <input class="fg-mr fg-clear" value="Clear form" type="reset">
                                <div class="fg-mr fg-wrap">
                                    <input class="fg-mr fg-upload-none" type="file" name="myfile[]" multiple id="myfile" accept=".jpg, .jpeg, .png, .gif, .bmp, .doc, .docx, .xls, .xlsx, .txt, .tar, .zip, .7z, .7zip" data-multiple-caption="{count} files selected" multiple>
                                    <label id="upload-container" class="fg-upload" for="myfile"><strong>Load file</strong></label>
                                </div>
                                <button id="send-btn-form" class="fg-send button-f" type="submit" value="Send">Send message</button>
                            </div>
                        </div>
                    </form>

Вот так вот подключаю в php.

$name = $_POST['name'];
$socialname = $_POST['socialname'];
$numberfollow = $_POST['numberfo'];
$email = $_POST['email'];
$text = $_POST['text'];
$file = $_FILES['myfile'];

Answer 1

У вас есть форма, и кнопка type=submit которая отправляет форму, а вы вместо отправки ещё и клик на кнопку вешаете, при этом не останавливая behavior.

$("#form").on("submit", function(evt) {
    evt.preventDefault();
    $.ajax({
        url: '../php/send.php',
        type: 'POST',
        data: { 
            name: name,
            socialname: socialname,
            numberfo: numberfo,
            email: email,
            text: text
        }, 
        success: funcSucces
    });
});

dataType: "text", // Определяем, что мы передаём. text или html

во-первых, это не обязательный параметр, jq умеет сам определять тип, во-вторых, это тип ожидаемых получаемых данных, т.е. тех данных, которые нам отдаёт сервер, а не "что мы передаем", в-третьих, не text или html а есть 5 основных типов - xml, json, script, text или html. То есть, по сути, это параметр указывает как интерпретировать получаемые данные; при этом обязательно указанный тип должен соответствовать mime-типу возвращаемых данных сервером.

Ну и в data скобки лишнее, data: {...}

P.S. не забываем валидировать передаваемые данные: name, socialname и другие