Проблема при отправке формы html себе, используя AJAX и кнопку - PullRequest
Новая
       1

Проблема при отправке формы html себе, используя AJAX и кнопку

0 голосов
/ 07 февраля 2020

Я пытаюсь написать страницу php, которая будет выполнять следующее:

  1. содержит форму ввода,
  2. отправит данные на ту же страницу php использование AJAX
  3. делает некоторые вставки mysql (не включены в следующий код)
  4. вывод mysql приводит к другому элементу div того же php

Как сейчас, у меня есть несколько проблем:

  1. При отправке формы результаты не помещаются в область div "submission_result", а вместо этого обновляют страницу. Я надеялся, что форма все еще видна после отправки.
  2. если одно из обязательных полей не заполнено, появляется сообщение об ошибке по умолчанию, и окно становится красным, но форма все еще отправлена, я надеялся, что отправка будет заблокирован. Он снова загружает страницу и помещает ее в область div «submission_result» (что-то вроде того, что я хочу, но только при правильном заполнении формы).
  3. Чтобы остановить обновление всей страницы, я попытался используя функцию event.preventDefault, которая не решает всех проблем ...: - (

Полагаю, я могу избежать использования тега кнопки, но у него есть хорошая проверка "обязательные поля", и упорядочить данные в $ _POST автоматически, что спасло бы меня от кодирования этих частей.

Вот мой код 

<head>
    <script src="jquery-3.2.1.js"></script>
    <script src="jquery-ui.js"></script>
</head>

<?php
    echo "<div id='input_form'>";

    if ( empty($_POST) )
    {
        echo "<h4>Submitting a new article:</h4>";
        echo "<form action='test_sub.php' id='submission_form' method='post' enctype='multipart/form-data'>";
        echo "<p> Title: </br><input type='text' id='title' name='title' value='test' required> </p>";
        echo "<p> url: </br><input type='url' id='url' name='url' > </p>";
        echo "</ul>";
        echo "<p> content: </br><textarea rows='5' id='content' name='article_content' required>hello world</textarea></br>";
        echo "<button class='sub_button' id='btn_sub_button' >Submit</button>";
    }
    else
    {
        echo "Input data";
        echo count($_POST);
        var_dump($_POST);
        /*
         * mysql insert ... etc
         * catch exception ... etc
        */ 
    }
    echo "</div>";

    echo "</br>";
    echo "</br>";

    echo "<div id='submission_result'>";
    echo "Submission result 1</br>";
    echo "Submission result 2</br>";
    echo "Submission result 3</br>";
    echo "</div>";

?>

<script>
      $(document).ready(function()
    {
          $("#btn_sub_button").click(function(){
                //event.preventDefault();
                $('#submission_result').load("test_sub.php");
                        });
    });
</script>

Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Согласно вышеприведенному разговору, я дошел до этого -
Поэтому, пожалуйста, замените ваш скрипт на приведенный ниже скрипт. 

<script>
    let count = 1; // to count the number of results
    let data = []; // for getting result with key value pair

      $(document).ready(function() { $("#btn_sub_button").click(function(event){ event.preventDefault();
        // getting form data as array with key value pair.
        let form_data = $("#submission_form").serializeArray();

        for(let i= 0; i< form_data.length; i++){
            data[form_data[i].name] = form_data[i].value;
        }

        $("#submission_result").append('<p><b><mark>Result ' + count +' = </b>' + '<b> Title :</b>'+data.title + ',<b> url : </b>'+ data.url + ',<b> article content: </b>' +data.article_content + '<p>');
        count++;
        //Add your AJAX code
        });

      });
</script>```
0 голосов
/ 07 февраля 2020

Вы должны попробовать 

$('form').on('submit',function(){
    event.preventDefault();
    //write your ajax here
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...