1

План такой:

Хочу сделать проверку на знание иностранных слов. Создал БД 'word', и в ней таблицу 'vocab'. Соответственно три поля: word_id, word_eng, word_ua;

Но у меня возникла проблема с отправкой данных из форм. Т.к. у меня же слов 10 и значит, как мне сделать для каждой формы свой AJAX-запрос?


Я думал сперва засунуть ajax-скрипт внутрь цикла вывода форм, но понял, что будет много лишнего кода. Как мне реализовать такое?

Может попробовать что-то типа: <input ... data-id="'.$id.'">?

index.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="container">
        <?
            for ($i=1; $i<=10; $i++) {
                $id = $i;
                echo '<form action="include/add.php" method="post" id="'.$id.'">
                        <b>Word: #'.$id.'</b>
                        <br><br>
                        <input type="text" placeholder="English" name="EngWord">
                        <input type="text" placeholder="Ukrainian" name="UaWord">
                        <input type="submit" name="sub">
                        <br><br><hr><br>
                    </form>';
            }
        ?>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        // Тут должен быть AJAX
    </script>
</body>
</html>

add.php:

<?
    $host = 'localhost';
    $database = 'word';
    $user = 'main';
    $pass = 'main';
    $connect = mysqli_connect($host, $user, $pass, $database);

    if (isset($_POST['sub'])) {
        $EngWord = $_POST['EngWord'];
        $UaWord = $_POST['UaWord'];

        $sql = "INSERT INTO `vocab` (`word_eng`, `word_ua`) VALUES ('$EngWord', '$UaWord')";
        $res = mysqli_query($connect, $sql);
        mysqli_close($connect);
    }
?>
2
  • Не вижу в вашем коде никакой проверки. Тут 10 форм с добавлением по 1 слову. Commented 15 июн. 2017 в 7:31
  • @ArtemGorlachev, до этапа проверки я еще не дошел. Меня вот вопрос с отправкой форм интересует.
    – user242433
    Commented 15 июн. 2017 в 7:37

1 ответ 1

0
<?php
    if($_POST != []) {
        var_dump($_POST); exit;
    }

    //Я знаю про for, но while мне удобнее
    $i = 0;
    while($i != 10):
?>
<h4>Word #<?php echo $i+1; ?></h4>
<form method="post" form-type="word">
    <input name="en" placeholder="en" value="en<?php echo $i+1; ?>" />
    <input name="uk" placeholder="uk" value="uk<?php echo $i+1; ?>" />
</form>
<?php $i++; endwhile; ?>
<button onclick="add_words();">Add</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    function add_words() {
        // .get() чтобы были только элементы
        var wforms = $('*[form-type="word"]').get();
        wforms.forEach(function(wform) {
            $.ajax({
                url: 'add.php',
                type: 'POST',
                data: $(wform).serialize(),
                success: function(data) {
                    alert(data);
                }
            });
        });
    }
</script>

Мой скрипт отправляет данные в файл add.php данные с каждой формы, т.е. будь хоть 200 форм, он всё равно отправит их, только главное их помечать form-type="word".

Всё гениальное просто!

5
  • А что собственно в файле add.php должно быть?
    – user242433
    Commented 16 июн. 2017 в 7:51
  • Код add.php остаётся неизменным. Просто поменяйте поля в форме (их name атрибуты). Commented 16 июн. 2017 в 16:36
  • а как быть с if(isset($_POST['sub']){...} в файле add.php? Нету же такой кнопки. Вот тут загвоздка. И то, я решил убрать эту проверку..но оказалось, что алерт ничего не выводит, но код работает. Как так?)
    – user242433
    Commented 16 июн. 2017 в 20:32
  • 1
    Сделайте проверку на метод. if($_SERVER['REQUEST_METHOD'] == 'POST') { /* код */ } else { /* не POST */ } Commented 17 июн. 2017 в 11:05
  • И на счёт алерта, var_dump который я запихнул в начало надо переместить в add.php. Там проверка $_POST != [] это проще, но менее надёжно Commented 17 июн. 2017 в 11:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.