J'ai donc un formulaire sur une page Web et j'ai besoin d'envoyer les données dans un fichier php. C'est bien - MAIS il y a une partie du formulaire qui peut être ajoutée dynamiquement (à l'aide de JavaScript) et j'ai donc besoin de JavaScript pour obtenir ces données et les convertir en JSON (ou tout autre format) et les envoyer au fichier PHP, de préférence en utilisant POST.

Ma question est; comment puis-je soumettre le formulaire à PHP, puis analyser la zone spécifique avec JavaScript, puis l'envoyer au formulaire PHP ? Ci-dessous ce que j'ai :

<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 (dans un fichier séparé appelé "scripts.js" - déclaré en haut de la page 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 ) );
    }

Et le fichier PHP - qui n'obtient évidemment pas les données JSON comme je le souhaiterais

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

Heureux de clarifier et de poster plus de code !

À votre santé!

EDIT1 - K3lly :

Donc mon fichier HTML ressemble maintenant à ceci :

<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>

Et PHP:

echo json_decode($_POST);

Cependant, lorsque le bouton d'envoi est cliqué, l'URL affiche toutes les données du formulaire comme le ferait GET et la page summary.php n'est jamais chargée ? L'URL n'affiche également aucune des entrées ajoutées dynamiquement.

EDIT 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"
    });

Dans le fichier PHP:

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

Il n'y a pas de sortie. Qu'est-ce que je fais mal?

0
Liam G 15 mars 2019 à 04:18

2 réponses

Meilleure réponse

Puisque vous utilisez jQuery pour autant que je puisse le voir dans votre code, la solution pour le faire est beaucoup plus simple.

Votre code JavaScript sera aussi simple que :

$("#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"
        });
}); 

Après cela, assurez-vous simplement de lire correctement vos données POST avec json_decode() en PHP. Essayez d'abord un débogage pour voir ce que vous obtenez côté serveur en faisant écho à l'intégralité du résultat POST.

1
k3llydev 15 mars 2019 à 03:58

Si vous transmettez les données via XMLHttpRequest de votre JavaScript, vous n'avez pas besoin de soumettre le formulaire - ajoutez un écouteur d'événement et utilisez preventDefault via JavaScript, et utilisez document.getElementById pour obtenir le formulaire :

<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();
});
0
Jack Bashford 15 mars 2019 à 01:23