HTML Отправка формы в PHP, но для анализа необходимо использовать Javascript

Question

Итак, у меня есть форма на веб-странице, и мне нужно отправить данные в файл php.Все в порядке - НО есть часть формы, которую можно динамически добавлять (используя JavaScript), и поэтому мне нужен JavaScript, чтобы получить эти данные и преобразовать их в JSON (или любой другой формат) и отправить в файл PHP,желательно используя POST.

Мой вопрос;Как я могу отправить форму в PHP, а затем проанализировать конкретную область с помощью JavaScript, а затем отправить его в форму PHP?Вот что у меня есть:

<form id="dataForm" action="summary.php" method="post" onSubmit="parseData(this)">
    <div className="actorDivHTML">
        <div className="actorInfoDiv"> //can be added dynamically
            //dynamic <input className="actorInfo"> goes here
        </div>
    </div>
</form>

JavaScript (в отдельном файле "scripts.js" - объявлено в верхней части HTML-страницы)

function parseData( form ) {
        var form = formID;

        //list of divs with this class name - dynamically added
        var infoDivs = form.getElementsByClassName( "actorInfoDiv" );
        var info = [];

        //loop through each div and append the raw data
        for ( i = 0; i < infoDivs.length; i++ ) {
            info.push( [ ...infoDivs[ i ].getElementsByClassName( "actorInfo" ) ] );
        }

        //extract the value of the input from the raw data
        var extractedInfo = [];
        for ( j = 0; j < info.length; j++ ) {
            var ind = [];
            for ( k = 0; k < info[ j ].length; k++ ) {
                ind.push( info[ j ][ k ].value );
            }
            extractedInfo.push( ind );
        }

        //  $.post('/summary.php',{array: JSON.stringify(extractedInfo)}); - first attepmt
        console.log( extractedInfo );

        //POST to PHP
        request = new XMLHttpRequest();
        request.open( "POST", "summary.php", true );
        request.setRequestHeader( "Content-type", "application/json" );
        request.send( JSON.stringify( extractedInfo ) );
    }

И файл PHP - которыйочевидно, не получает данные JSON, как я хотел бы

//gets all other form data
$str_json = file_get_contents( 'php://input' );
print_r( $str_json );
//continues to get all other form data

Рад уточнить и опубликовать больше кода!

Ура!

РЕДАКТИРОВАТЬ1 - K3lly:

Итак, мой HTML-файл теперь выглядит следующим образом:

<form id="dataForm" onSubmit="onSub()">
<input type="submit" name="submit_button" value="Submit">
<script src="https://code.jquery.com/jquery-1.10.2.js">
    function onSub(){
    $("#dataForm").submit(function(event){
    event.preventDefault();
    var data = $("#dataForm").serializeArray();
    //POST to PHP
    $.ajax({
       type: "POST",
       url: "summary.php",
       data: JSON.Stringify(data),
       success: function(response){
           //Do whatever you want when form is sent.
       },
       dataType: "JSON"
    });
}); 
}
</script>

И PHP:

echo json_decode($_POST);

Однако, когда нажимается кнопка отправки, URL отображает все данные формы как GET будет и страница summary.php никогда не загружается?В URL также не отображаются динамически добавленные входные данные.

РЕДАКТИРОВАТЬ 2 - k3lly:

    $("#dataForm").submit(function(event){
    event.preventDefault();
    //var serData = $("#dataForm").serialize();
    var test = $("#title").val();
        var serData = 'test1='+test;
    //POST to PHP
    $.ajax({
       type: "POST",
       url: "summary.php",
       data: serData,
       success: function(response){
           //Do whatever you want when form is sent.
       },
       dataType: "JSON"
    });

В файле PHP:

$test = $_POST["test1"];
echo $test;

Естьнет выхода.Что я делаю не так?

Answer 1

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

Ваш код JavaScript будет таким простым:

$("#dataForm").submit(function(event){
        event.preventDefault();
        var data = $("#dataForm").serializeArray();
        //POST to PHP
        $.ajax({
           type: "POST",
           url: "summary.php",
           data: JSON.Stringify(data),
           success: function(response){
               //Do whatever you want when form is sent.
           },
           dataType: "JSON"
        });
}); 

После этого просто убедитесь, что вы правильно прочитали POST-данные с помощью json_decode() в PHP. Сначала попробуйте выполнить некоторую отладку, чтобы увидеть, что вы получаете на стороне сервера, повторив весь результат POST.

Answer 2

Если вы передаете данные через XMLHttpRequest вашего JavaScript, тогда вам не нужно отправлять форму - добавьте прослушиватель событий и используйте preventDefault через JavaScript, и используйте document.getElementById, чтобы получить форму:

<form id="dataForm">
    <!-- Your form data here
</form>

JS:

function parseData() {
    var form = formID;

    //list of divs with this class name - dynamically added
    var infoDivs = form.getElementsByClassName( "actorInfoDiv" );
    var info = [];

    //loop through each div and append the raw data
    for ( i = 0; i < infoDivs.length; i++ ) {
        info.push( [ ...infoDivs[ i ].getElementsByClassName( "actorInfo" ) ] );
    }

    //extract the value of the input from the raw data
    var extractedInfo = [];
    for ( j = 0; j < info.length; j++ ) {
        var ind = [];
        for ( k = 0; k < info[ j ].length; k++ ) {
            ind.push( info[ j ][ k ].value );
        }
        extractedInfo.push( ind );
    }

    //  $.post('/summary.php',{array: JSON.stringify(extractedInfo)}); - first attepmt
    console.log( extractedInfo );

    //POST to PHP
    request = new XMLHttpRequest();
    request.open( "POST", "summary.php", true );
    request.setRequestHeader( "Content-type", "application/json" );
    request.send( JSON.stringify( extractedInfo ) );
}

document.getElementById("dataForm").addEventListener("submit", e => {
    e.preventDefault();
    parseData();
});