Tengo un formulario dinámico en una de mis páginas web. El formulario almacena datos en el archivo de script y lo actualiza a medida que el usuario agrega más datos del formulario. Este es el objeto que creo en JS:
const survey = { title: '', createdBy: '', description: '', openingMsg: '', thankyouMsg: '', questions: [], }La matriz de preguntas contiene objetos de pregunta. Aquí está la clase:
class Question { constructor(id) { this.id = id } questionText = '' type = '' choices = new Map() }Agrego un detector de eventos al botón de enviar como este:
const saveSurveyBtn = document.getElementById('saveSurvey') surveyForm.addEventListener('submit', saveSurvey)y la función saveSurvey se ve así:
function saveSurvey(e) { e.preventDefault() fetch('../../actions/save-survey.php', { method: 'POST', body: JSON.stringify(survey), headers: { "Content-type": "application/json;charset=UTF-8" } }) }Como puede ver, estoy tratando de enviar los datos a un script php local desde JS. Todo está bien hasta que llego al script php. El problema es este; independientemente del hecho de que en mi llamada de búsqueda uso el método: POST , siempre se envía como una solicitud GET. ¿Por qué? ¿Cómo puedo arreglar esto?
Bien, no puedo decirle por qué no se publicaron los datos de mi formulario y confirmé que se envió como una solicitud GET. Pero así es como resolví este problema.
Agregué un campo oculto en el formulario y cambié el botón de tipo "enviar" para escribir "botón". Luego agarré ese botón a través de JS y configuré un detector de clics en él. Cuando el usuario presiona el botón, primero asigno mi objeto de encuesta serializado JSON al campo oculto. Luego envié manualmente el formulario y se envió a través de POST al script PHP. El método del formulario siempre fue "publicar", pero eso no pareció importar inicialmente. No sé por qué, pero aquí está mi entrada en el formulario:
<input name="survey" id="survey" type="hidden" value="">luego agarro el botón que se ve así:
<button type="button" class="btn btn-success" id="saveSurvey">Save Survey</button>observe que ya no es del tipo "enviar". Luego agrego un detector de eventos de clic y llamo a esta función cuando se hace clic:
function saveSurvey(e) { document.getElementById('survey').value = JSON.stringify(survey) surveyForm.submit() }Esto funcionó. No sé si respondí completamente mi propia pregunta, así que si alguien más viene con una mejor respuesta, ajustaré esta publicación. Gracias a todos por su ayuda.