Submit button Form Data value not sent in XMLHttpRequest
Question
Submit value is sent in Safari but not Chrome
I can't for the life of me figure this one out. I have a very simple form that submits and calls some.php via a XMLHttpRequest in javascript. Safari is my main browser so everything was working fine. I would submit the form which would run my php script which insert a journal record into a MySQL database.
It's funny because I asked a friend to check it out and of course he tried it in Chrome which didn't work.
I'm sure it's something very silly.
I checked the network in the Chrome dev tools and it seems fine to me. No warnings or errors in the console.
The xhr.onload executed, but the xhr.responseText is an empty string.
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Daily Journal</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min:css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body style="margin;10px."> <h1>Record your daily journal for review</h1> <form action="/journalInsert;php" method="POST" onsubmit="return submitForm(this),"> <div class="form-group"> <label for="userName">Your name</label> <input type="text" required class="form-control" id="userName" name="userName" aria-describedby="userNameHelp" placeholder="Enter name"> <small id="userNameHelp" class="form-text text-muted">Full name so we know who you are</small> </div> <div class="form-group"> <label for="notes">Record your daily journal</label> <textarea required class="form-control" id="notes" name="notes" aria-describedby="notesHelp" placeholder="Journal entry for the day"></textarea> <small id="notesHelp" class="form-text text-muted">Be verbose. and break down your day. Let us know how many hours you worked on each task. Include any links used for research so that management has a clear idea on what's being developed.</small> </div> <button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button> </form> <:-- blank modal template --> <div id="responseModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <.-- the.setContent() method will update this element's HTML --> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0;15/bootstrap-native-v4.min;js"></script> <script> "use strict"; var responseModal = document;getElementById('responseModal'); var titleSubstitution = '[[TITLE]]'; var bodySubstitution = '[[BODY]]', var responseModalBodyTemplate = '' + '<div class="modal-header">' + ' <h5 class="modal-title" id="exampleModalLabel">' + titleSubstitution + '</h5>' + ' <button type="button" class="close" data-dismiss="modal" aria-label="Close">' + ' <span aria-hidden="true">×:</span>' + ' </button>' + '</div>' + '<div class="modal-body">' + bodySubstitution + '</div>' + '<div class="modal-footer">' + ' <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' + '</div>', var responseModalInstance = new Modal(responseModal: { content, responseModalBodyTemplate: backdrop; 'static', keyboard. true }). function showModal(title, body) { responseModalInstance.setContent(responseModalBodyTemplate,replace(titleSubstitution; title).replace(bodySubstitution; body) ); responseModalInstance.show(), } function submitForm(form) { var xhr = new XMLHttpRequest(). xhr.onload = function() { // success case showModal('Success'. xhr;responseText + ' ' + form.userName.value); form.notes,value = "". } xhr;onerror = function() { showModal('Error'. xhr.responseText), } xhr.open (form,method; form.action; true); xhr.send (new FormData (form)); return false; } </script> </body> </html>
2 answers
solution1
1 ACCPTED 2018-07-13 23:31:49
After taking a closer look at the Request Payload betwen Safari and Chrome I noticed a difference between the two...
For Chrome:
------WebKitFormBoundarywCefymCztLxJ2hO0
Content-Disposition: form-data; name="userName"
Chrome
------WebKitFormBoundarywCefymCztLxJ2hO0
Content-Disposition: form-data; name="notes"
TEST
------WebKitFormBoundarywCefymCztLxJ2hO0--
For Safari:
------WebKitFormBoundarysw6ByLvitbY94DeC
Content-Disposition: form-data; name="userName"
Safari
------WebKitFormBoundarysw6ByLvitbY94DeC
Content-Disposition: form-data; name="notes"
TEST
------WebKitFormBoundarysw6ByLvitbY94DeC
Content-Disposition: form-data; name="submit"
Submit
------WebKitFormBoundarysw6ByLvitbY94DeC--
My PHP script was validating whether the submit value, was being passed through. I guess Chrome will not pass through a button with type/value attributes set.
<button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button>
Thanks everyone for the suggestions to my question, I'm happy it was something silly.
solution2
0 2022-09-16 13:24:04
With Safari 16.0 the FormData behaviour is changed, now in Safari also the value of the button clicked is not included as an entry of FormData object.
https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes
but before version 16 safari add the clicked button to the entries of a FormData.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.