HTML Submit form to PHP but need to use Javascript for some parsing

Question

So I have a form on a web page and I need to send the data to a php file. That much is okay - BUT there is a part of the form that can be added dynamically (using JavaScript) and so I need JavaScript to get this data and convert it to JSON (or any other format) and send to to the PHP file, preferably using POST.

My question is; how can I submit the form to PHP and then parse the specific area with JavaScript and then send that to the PHP form? Below is what I have:

<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 (in a seperate file called "scripts.js" - declared at top of HTML page)

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

And the PHP file - which obviously doesn't get the JSON data as I would like

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

Happy to clarify and post more code!

Cheers!

EDIT1 - K3lly:

So my HTML file now looks like this:

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

And PHP:

echo json_decode($_POST);

However, when the submit button is clicked the URL shows all the form data like GET would and the summary.php page is never loaded? The URL also doesn't show any of the dynamically added inputs.

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

In the PHP file:

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

There is no output. What am I doing wrong?

Remove the onSubmit function from your form tag, also get rid of the function onSub(){ because the jQuery event handler does it all for you. $("#dataSub")... — qelli
– qelli, Commented Mar 16, 2019 at 3:01

qelli · Accepted Answer · 2019-03-15 03:58:17Z

1

Since you are using jQuery as far I can see in your code, the solution to do this is a lot simpler.

Your JavaScript code will be as simple as:

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

After this, just make sure to read your POST data correctly with json_decode() in PHP. Try some debbuging first to see what you are getting server-side by echoing the entire POST result.

answered Mar 15, 2019 at 3:58

qelli

2,0872 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Liam G Over a year ago

Hi k3lly - I am not actually getting any data server-side. I've tried to use a test variable and I can't even retrieve that. I have updated my question.

qelli Over a year ago

You were using json_decode() on a $_POST variable, which won't format your data to JSON because it's not JSON syntax. You got two options. Return from PHP: json_encode($_POST) or remove the DataType from your javascript AJAX request.

Liam G Over a year ago

Okay I've removed the DataType from the AJAX request, I'm no longer using json_decode(). I am still having the same issue in that, all the data is visible in the url, which is not what POST is meant to do (eg. http://localhost:8080/?title=Testing), and no data is passed to the PHP script. This PHP script is meant to open display some HTML as well.

Jack Bashford · Accepted Answer · 2019-03-15 01:23:01Z

If you're passing the data via your JavaScript's XMLHttpRequest, then you don't need the form to be submitted - add an event listener and use preventDefault through JavaScript, and use document.getElementById to get the form:

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

Collectives™ on Stack Overflow

HTML Submit form to PHP but need to use Javascript for some parsing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related