Problem sending formdata to php using fetch

[eaglehopes]

Hi all. Today I tried a form which sends data inside the formData object to a php file with fetch method. But when I try to capture the sended "thumbing" variable from php file, I could not got it! 

sql.html 

<form id="thumbEvaluationForm" method="POST" action="sql_connection.php" >  
  <div>
    <input id="thumbup" type="radio" name="thumbing" value="1" >
    <input id="thumbdown" type="radio" name="thumbing" value="-1" >
    <input type="submit" name="Submit" > 
  </div>
</form>

and sql_connection.php file content : 

<?php
	error_reporting(E_ALL);
	mysqli_report(MYSQLI_REPORT_OFF);
	unset($thumbing);
		
	if( isset($_REQUEST["thumbing"] ) ) { 
		echo " request get as thumbing ".$_REQUEST["thumbing"];
	}

	if( isset($_POST["thumbing"] ) ) {
		$thumbing=$_POST["thumbing"];
		echo "thumbing is set : ".$thumbing;
	} else {
		echo "thumbing is not set...";
	}

then I add a listener to submit event of the form to send formdata to php file(sql_connection.php). 

window.onload= function() { 
	var thumbform = document.getElementById("thumbEvaluationForm");

	thumbform.addEventListener('submit', (event) => {
		event.preventDefault(); // disable event's default behaviour
		const thumbFormData = new FormData(thumbform); 
		alert("thumbing is send as : " + thumbFormData.get("thumbing")); // got correct result of thumbing from radio button ! 
		fetch("sql_connection.php", {
			method: 'POST',
			body: thumbFormData
		})
		.then(response => {
			if (response.ok) {
			// Handle the successful response
			} else {
			// Handle the error
			}
		})
		.catch(error => {
		// Handle the error
		});
	});
}

I could not get $_POST['thumbing'] or $_REQUEST['thumbing'] in sql_connection.php code? Why? Where is the mistake? Thanks.

[kicken]

Your code doesn't show you doing anything with the response, so how do you know you're not receiving the data in your script?

[Strider64]

You need to do something like this ->

        // Add an event listener to the edit form's submit event
        editForm.addEventListener("submit", async function (event) {
            // Prevent the default form submit behavior
            event.preventDefault();

            // Create a FormData object from the edit form
            const formData = new FormData(editForm);
            //console.log("form data", formData);
            // Send a POST request to the edit_update_blog.php endpoint with the form data
            const response = await fetch("edit_update_blog.php", {
                method: "POST",
                body: formData,
            });

            // Check if the request was successful
            if (response.ok) {
                const result = await response.json();
                console.log(result);
                // If the response has a "success" property and its value is true, clear the form
                if (result.success) {
                    resultInput.value = '';          // Clear the current value of the search input field
                    resultInput.placeholder = "New Search"; // Set the placeholder to `New Search`
                    image_for_edit_record.src = "";
                    image_for_edit_record.alt = "";
                    editForm.reset(); // Resetting the edit form
                    searchForm.reset(); // Resetting the search form

                    // Reset select box to default (first) option
                    const selectBox = document.querySelector('select[name="heading"]');
                    selectBox.selectedIndex = 0;
                }

            } else {
                console.error(
                    "Error submitting the form:",
                    response.status,
                    response.statusText
                );
                // Handle error response
            }
        });

also using `console.log` helps in debugging, plus your `sql_connection.php` is expecting back json data back.

Edited September 2, 2023 by Strider64

[ginerjm]

And stop using $_REQUEST.  Use either Post or Get.  And I don't see the use of any 'fetch' let alone a query.

Edited September 2, 2023 by ginerjm

[eaglehopes]

1 hour ago, kicken said:

Your code doesn't show you doing anything with the response, so how do you know you're not receiving the data in your script?

I think I do something with these? 

if( isset($_POST["thumbing"] ) ) {
		$thumbing=$_POST["thumbing"];
		echo "thumbing is set : ".$thumbing;
	} else {
		echo "thumbing is not set...";
	}

I think I echoed if the "thumbing" variable passed successfully? Didn't I do it correctly?

[ginerjm]

That code is retrieving data from the user. Definitely not doing any php work though.

[Barand]

Everything echo'd in response to a fetch or ajax request goes into the response that is returned to your handler function. They do not go to the screen for you to read.

Use your browser developer tools network tab to view the response.

[eaglehopes]

Thanks all, I corrected my code and finally got and see correct returns for "thumbing" variable and use it in my php code to add it to mysql database.

I did not changed anything in my fetch code(so I did not re-post it here), but I did : 

1. I used $_REQUEST[] to see whether my response goes there or not, but finally I deleted $_REQUEST[] line.

2. I used strider64's code to see all errors in console. As Barand's suggestion(after strider64's code), I looked to the console and all errors shown in console in fantastically detailed such that finding and correcting my code takes about a minute ! Thanks strider64! Then I returned to my own code and it worked like a charm!

3.  replace wrong string concetanation operator (+) in my php code(sql_connection.php) with correct ones (.) Yes, Chrome's F12-console is very helpful in debugging ! 

I added my php code to use thumbing result to add it into my mariadb database (in sql_connection.php). I gave it, maybe, I hope it helps someone  . My code was :

 

if( isset($thumbing) ) {
  echo "thumbing is ok" . $thumbing;
  addThumbValues($sendedFilePath,$thumbing);
}
	
function addThumbValues($thumbResponse)  {
		$up=""; 
		$down="";
		// TODO can use ternary operator to save code lines in future
		if($thumbResponse == 1 ) {
			$up=1;
			$down="0";
		} else if (thumbResponse == -1) {
			$down=1;
			$up="0";
		}
		
		$conn = OpenConnection(); // open database connection
		
		$sql = mysqli_prepare($conn,"INSERT INTO `thumbs` (up,down) VALUES ('$up','$down')"); 
		if($sql !== FALSE){
			if(mysqli_stmt_execute($sql)){
				//echo "New record created successfully";
			} else {
				echo mysqli_stmt_error($sql);
				echo "Error in record creation : failed!";
			}
		} else{
			echo mysqli_error($conn) ." sql statement is false";	
		}
		CloseConnection($conn); // close database connection
	}

Thanks. 

[eaglehopes]

Sorry, I had made a mistake, I noticed it ! I corrected my code as above  :

On 9/3/2023 at 12:34 AM, eaglehopes said:

// TODO can use ternary operator to save code lines in future
		if($thumbResponse == 1 ) {
			$up=1;
			$down="0";
		} else if ($thumbResponse == -1) {  // I had forgotten to add $ sign before variable
			$down=1;
			$up="0";
		}

 

:D