0

I have a dynamic form on one of my web pages. The form stores data in the script file and updates it as the user adds more data from the form. This is the object that I create in JS:

const survey = {
   title: '',
   createdBy: '',
   description: '',
   openingMsg: '',
   thankyouMsg: '',
   questions: [],
}

The questions array holds Question objects. Here is the class:

class Question {
   constructor(id) {
      this.id = id
   }
   questionText = ''
   type = ''
   choices = new Map()
}

I add an event listener to the submit button like this:

const saveSurveyBtn = document.getElementById('saveSurvey')
surveyForm.addEventListener('submit', saveSurvey)

and the saveSurvey function looks like this:

function saveSurvey(e) {
    e.preventDefault()

    fetch('../../actions/save-survey.php', {
        method: 'POST',
        body: JSON.stringify(survey),
        headers: {
            "Content-type": "application/json;charset=UTF-8"
        }
    })
}

As you can see I'm trying to send the data to a local php script from JS. All is well until I get to the php script. The problem is this; regardless of the fact that in my fetch call I use method: POST, it always gets sent as a GET request. Why? How can I fix this?

Jo Momma
  • 1,126
  • 15
  • 31
  • 2
    Have you verified in the browser console that the HTTP request is sent as "POST"? (It certainly looks like it should be, but it would be good to make sure.) – Pointy Nov 22 '21 at 15:49
  • As Pointy said, check the browser console. Also, make sure there's no redirection, which can convert POST to GET. – Olivier Nov 22 '21 at 15:50
  • Another possibility: if your button is type "submit" (the default, usually), and it's inside a `
    `, then the form could be submitting as part of native browser behavior. You can explicitly make your button `type=button` instead to prevent that, and perhaps you don't really even need a `
    ` at all.
     – Pointy Nov 22 '21 at 15:50
  • Does this answer your question? [How to get body of a POST in php?](https://stackoverflow.com/questions/8945879/how-to-get-body-of-a-post-in-php) – James Nov 22 '21 at 15:51
  • @Pointy I have verified that it's a GET request in the PHP script: echo $_SERVER['REQUEST_METHOD']; I will check the console. – Jo Momma Nov 22 '21 at 15:56
  • Check the console, and in particular look for **two** requests being sent. – Pointy Nov 22 '21 at 16:23
  • 1
    Yes, the Network tab. It will show you every HTTP request. Simpler would be to review your HTML as I mentioned in a comment: if your ` – Pointy Nov 22 '21 at 16:55
  • OK, I'm only seeing on request and it's a GET request. I've changed the button type back and forth from "button" and "submit" with no difference......this is strange. Keep in mind, my JS script is an external file. I don't know if that makes a difference. I just want to post the data to a PHP file, process that data and save to a DB then redirect from the php file....Is my thinking wrong? – Jo Momma Nov 22 '21 at 17:25
  • Where you able debug and set a breakpoint with the fetch call with browser devtools? If not it might be indeed the default form action, which is `get` – theking2 Nov 22 '21 at 17:43

1 Answers1

0

OK, I can't tell you why my form data wasn't being posted and I have confirmed that it was being sent as a GET request. But this is how I solved this problem.

I added a hidden field in the form and changed the button of type "submit" to type "button". I then grabbed that button via JS and set a click listener on it. When the user presses the button I first assign my JSON serialized survey object to the hidden field. Then I manually submitted the form and it was sent via POST to the PHP script. The form's method was always "post" but that didn't seem to matter initially. I don't know why but here is my input in the form:

<input name="survey" id="survey" type="hidden" value="">

then I grab the button which looks like this:

<button type="button" class="btn btn-success" id="saveSurvey">Save Survey</button>

notice it's no longer of type "submit". I then add a click event listener to it and call this function when clicked:

function saveSurvey(e) {
    document.getElementById('survey').value = JSON.stringify(survey)
    surveyForm.submit()
}

This worked. I don't know if I fully answered my own question so if someone else comes along with a better answer I will adjust this post. Thank you everyone for your help.

Jo Momma
  • 1,126
  • 15
  • 31