Using Symfony Forms, HTML is generated that looks like this:
<input type="text" id="form_name" name="form[name]">
<input type="email" id="form_email" name="form[email]">
<textarea id="form_message" name="form[message]"></textarea>
With a bit of JS the entries are transformed to JSON and submitted:
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const jsonData = JSON.stringify(Object.fromEntries(formData));
// handle submission...
})
JSON that is sent to the backend:
"{"form[name]":"John Doe","form[email]":"example#domain.com","form[message]":"Some message"}"
In my controller (in PHP) I serialize the data into an array: $data = json_decode($request->getContent()); The issue is this data is formatted (as expected) like so:
["form[name]" => "John Doe", "form[email]" => "example#domain.com", "form[message]" => "Some message"];
Is there a built-in way to get the following result (either in PHP or JS)?
[ "name" => "John Doe", "email" => "example#domain.com", "message" => "Some message" ];
I looked into using the Serializer Component without success, and now wonder if I missed something or if the data should be fixed in JS before submission. Might there be a built-in solution?
If I'm not wrong you are submitting from using AJAX. And in that you can directly specify FormData object as body in AJAX API request. At backend you will receive data in $_POST or $_GET array as per your request method.
Here is the example code.
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(event.target);
fetch('<AJAX API URL>', {
method: 'POST',
body: formData
}).then(function (response) {
if (response.ok) {
return response.json();
}
return Promise.reject(response);
}).then(function (data) {
console.log(data);
}).catch(function (error) {
console.warn(error);
});
})
<form id="contact-form">
<input type="text" name="form['name']" />
<input type="text" name="form['job']" />
<input type="submit" value="submit" />
</form>
Here is how you will get data in POST array.
Array
(
[form] => Array
(
['name'] => 123
['job'] => 123123
)
)
Related
I have a react page that looks like this:
and right now when creating a new category the post request goes through to the database but the categories is not rendered again to display the new category unless you refresh the page (GET request for all categories on page start up).
SideBar.js
createNewCategory = async (input) => {
console.log("CREATING NEW: ", input);
var response = await fetch("http://localhost:8081/api/categories", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Token": 1234,
Accept: "application/json"
},
body: JSON.stringify({
title: input
})
})
let resp = await response.json();
this.setState({
categories: [...this.state.categories, resp]
})
}
CreateCategory.js
handleNewCategory = (event) => {
event.preventDefault()
this.props.createNewCategory(this.state.input)
this.setState({
input: ''
})
}
render(){
return (
<form onSubmit={this.handleNewCategory} className="new-category-form">
<h4>Create Category</h4>
<input onChange={this.handleInput} className="new-category-input" type="text" value={this.state.input} />
<input className="new-category-input" type="submit" value="Create" />
</form>
)
}
CategoriesContainer.js
function CategoriesContainer(props) {
function renderCategories(){
console.log("PROPS: ", props)
return props.categories.map(category => {
console.log("CATEACH: ", category)
return <Category key={category.id} category={category} />
})
}
return(
<div>
{renderCategories()}
</div>
)
}
At the moment if I create a new category with a name of letters I get the err
Uncaught (in promise) SyntaxError: Unexpected token a in JSON at position 0 sidebar.js:46
and if I create it with numbers I get
Warning: Each child in a list should have a unique "key" prop.
Im still new to react so hopefully Im not completely off the mark here, any ideas?
Fixed it. First off I was using response instead of resp to update the state and I was returning just the name rather than the whole object to the POST request.
I have a multi applicant form in my web app that has a radio button selector section. I managed to get the radio buttons fixed in every new application form but now have a problem in posting the data to PHP and MySQL database. My question is how do I go about posting an array of object to PHP and save it to MySQL database using axios?
I tried to find tutorials on the topic or even finding other questions asked but I didn't find an answer.
let app = new Vue({
el: "#app",
data: {
buttons: [{
val: null
}]
},
methods: {
addNewRadios(evt) {
evt.preventDefault();
this.buttons.push({
val: null
});
//console.debug(this.buttons);
},
onSubmit(evt) {
evt.preventDefault();
const formData = app.toFormData(app.buttons);
console.log(formData);
//What to do here???
},
toFormData(obj) {
let formData = new FormData();
for (var key in obj) {
formData.append(key, obj[key]);
}
return formData;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<h1>Multiple radio buttons VueJS</h1>
<div id="app">
<div class="radio">
<form #submit='onSubmit' method="post">
<div v-for="(button, index) in buttons">
<b>Index {{ index }}:</b>
<label :for="'rButton-' + index">option 1</label>
<input type="radio" :name="'rButton-' + index" value="value-1" v-model="button.val">
<label :for="'rButton-' + index">option 2</label>
<input type="radio" :name="'rButton-' + index" value="value-2" v-model="button.val">
</div>
<br>
<button #click="addNewRadios">Add radios</button>
<button type="submit">Submit</button>
</form>
</div>
<div>
</div>
</div>
Here, I have made a few modifications to your code. Build the form data with button values and then post the data using axios,
let app = new Vue({
el: "#app",
data: {
buttons: [{
val: null
}]
},
methods: {
addNewRadios(evt) {
evt.preventDefault();
this.buttons.push({
val: null
});
//console.debug(this.buttons);
},
onSubmit(evt) {
evt.preventDefault();
const formData = app.toFormData(app.buttons);
// What to do here???
// post data to your backend server.
axios({
method: 'post',
url: 'http://example.com/my-url',
data: formData,
}).then(response => {
console.log('Response:', response);
// upon successful post request, you will see the response from the backend server here.
}).catch(err => {
console.log('Error:', err);
// and in case of any error at the backend server.
});
},
toFormData(obj) {
let formData = new FormData();
for (let key in obj) {
formData.append(key, obj[key].val); // appending the button `val` property here, instead of the entire object.
}
return formData;
}
}
});
Then in the backend server, handle the post data. You should receive there an array of the button values that you'd sent.
I hope this helps.
I tried different ways to upload images to SQL, but the problem is that I cannot get the file's data at backend. Some answers say that it's because the form does not have an enctype but I tried that too. I'm not sure if it's applicable to Vue since I am using axios. Also, I tried using uploadFile as a parameter for the axios so $_FILES would also read it as $_GET, because it worked on some of my codes as well. By the way, the submitTestData is in another file in another folder, which is inside a store (VueX). I used dispatch to send the data towards the store so that it would finally send a post method to backend.
store.js
submitTestData2 ({ commit }, payload) {
console.log(payload.uploadFile)
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append('uploadFile', payload.uploadFile)
const config = {
headers: { 'Content-Type': 'multipart/form-data' }
}
axios
.post(
'http://localhost/MyComposer/',
{
token: payload.token,
subject: payload.subject,
timer: payload.timer,
question: payload.question,
answer: payload.answer,
formData
},
{
params: {
submitId: 7,
uploadFile: formData
},
config
}
)
.then(response => {
commit('SAVE_TEST_DATA', response.data)
console.log(response)
resolve(response)
})
.catch(error => {
reject(error)
})
})
},
AddTest.vue
<q-form class="q-pa-md" align="center">
<h5>Test Creation Form</h5>
<!-- <q-btn label="Add Subject" color="primary" to="/addsub" /> -->
<q-btn label="Return to Main" to="/dashboard" color="primary" />
<q-btn label="View Student Answers" color="primary" to="/subjectntestlist" />
<q-btn label="View Student Profile" color="primary" to="/studentprofile" />
<q-card>
<q-separator />
<q-card-section class="q-gutter-md" align="center">
<q-select
filled
v-model="testItems.subject"
:options="option"
map-options
emit-value
option-value="subjectId"
option-label="subjectName"
label="Choose a Subject"
style="width: 250px"
stack-label
input-debounce="0"
/>
<q-file
filled
v-model="testItems.uploadFile"
label="Upload File Here"
style="width: 500px"
/>
<h5>Timer</h5>
<q-input label="Minute(s)" name="timer" v-model="testItems.timer" style="width: 500px" />
<h5>Question</h5>
<q-input name="question" v-model="testItems.question" style="width: 500px" />
<h5>Answer</h5>
<q-input name="answer" v-model="testItems.answer" style="width: 500px" />
<br />
<q-btn label="Save Test Item" #click="submitTestData" />
</q-card-section>
</q-card>
</q-form>
submitTestData1() {
this.$store
.dispatch("submitTestData2", {
token: this.token,
subject: this.testItems.subject,
question: this.testItems.question,
answer: this.testItems.answer,
uploadFile: this.testItems.uploadFile,
timer: this.testItems.timer
})
.then(response => {
alert("Test was added to the database!");
});
},
<?php
namespace Classes;
use Classes\ConnectDb;
class TestClass
{
public function addTest()
{
$datab = new ConnectDb;
$db = $datab->Connect();
if (isset($_GET['submitId']) && $_GET['submitId'] == 7) {
$testdata = file_get_contents('php://input');
$testdecodedData = json_decode($testdata);
$subject = $testdecodedData->{'subject'};
$access_id = $testdecodedData->{'token'};
$question = $testdecodedData->{'question'};
$answer = $testdecodedData->{'answer'};
// $testImage = $testdecodedData->{'uploadFile'};
$testTimer = $testdecodedData->{'timer'};
$name = $_FILES['uploadFile'];
echo $name;
$testdataDb = array(
'SubjectId' => $subject,
'AccessId' => $access_id,
'Question' => $question,
'Answer' => $answer,
// 'TestImage' => $testImage,
'Timer' => $testTimer * 60
);
$testId = $db->insert('testdetails', $testdataDb);
if ($testId) {
echo 'Test details were added!';
}
}
}
You need to pass header as well like below
submitTestData ({ commit }, payload) {
console.log(payload.uploadFile)
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append('uploadFile', payload.uploadFile)
const config = {
headers:{'Content-Type' : 'multipart/form-data'}
};
axios
.post('http://localhost/MyComposer/',formData,config)
.then(response => {
commit('SAVE_TEST_DATA', response.data)
console.log(response)
resolve(response)
})
.catch(error => {
reject(error)
})
})
},
It looks like you're not getting the file's name properly from the $_FILES superglobal. You have $_FILES['uploadFile'] in your code however the $_FILES array is structured like this for uploads (uploadFile represents the name of the file upload input field from your form so this varies by input field name):
Array
(
[uploadFile] => Array
(
[name] => users_file_name.png
[type] => image/png
[tmp_name] => /path/to/temporary/files/abc123
[error] => 0
[size] => 12345
)
)
So to access the file's name, you need to change the code to this: $_FILES['uploadFile']['name'].
The actual file is stored in a temporary file location on the server so you'll need to grab that temporary file and move it somewhere else on your server. Something like this is what most people do:
$temp_file = $_FILES['uploadFile']['tmp_name'];
$target_upload_destination = 'path/to/desired/directory/' . basename($_FILES['uploadFile']['name']);
// Check to see that the file was moved to desired destination successfully
if (move_uploaded_file($temp_file, $target_upload_destination)) {
// do something here
} else {
// Fallback logic here
}
Obviously there should be some logic checks before moving the temp file on your server but, I hope you get the basic idea behind this. You should use the file path once it's moved for the DB insert. I hope this helps.
There are several problems here both in your client-side and server-side code.
Client side
If you want to send a file, you must use a multipart/form-data request with a FormData payload. You appear to be trying to combine a JSON payload with an embedded FormData which simply won't work.
You need something like this
const formData = new FormData()
Object.entries(payload).forEach(([key, val]) => {
// adds all the properties in "payload" to "formData"
formData.append(key, val)
})
axios.post('http://localhost/MyComposer', formData, {
params: { submitId: 7 }
})
❗ Note that there is no Content-type header added. Passing a FormData instance sets this automatically with the required mime boundaries.
Server-side
On the PHP side, you would get the token, subject, timer, etc values from $_POST
$subject = $_POST['subject'];
$access_id = $_POST['token'];
$question = $_POST['question'];
// etc
The upload file will be available in $_FILES (see https://www.php.net/manual/features.file-upload.post-method.php)
$uploadFile = $_FILES['uploadFile'];
if (!$uploadFile['error']) {
echo $uploadFile['name'];
}
I have a checkbox
<div class="checkbox">
<label>
<input type="checkbox" value="add user" v-model="user.permissions">Add User
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="edit user" v-model="user.permissions">
Edit User
</label>
</div>
the checkbox is v-model on user.permission array
user:{
permissions: []
},
in which when i check a checkbox it will produce a result like this
user:Object
permissions:Array[2]
0:"edit user"
1:"add user"
now when i fetch a data from my backend using axios and put the data on user
editUser: function(id){
let vm = this;
axios.get('api/users/' + id)
.then( response => {
vm.user = response.data.data; //PUT RESPONSE DATA TO USER OBJECT
vm.usersModal = true;
})
.catch( error => {
console.log(error);
});
},
it will produced an output like this
user:Object
created_at:"2018-08-28 03:17:33"
deleted_at:null
email:"aa#gmail.com"
id:3
name:"aa"
permissions:Array[2]
0:Object
created_at:"2018-08-28 03:03:41"
guard_name:"web"
id:2
name:"delete user"
pivot:Object
updated_at:"2018-08-28 03:03:41"
1:Object
created_at:"2018-08-28 03:03:41"
guard_name:"web"
id:3
name:"add user"
pivot:Object
updated_at:"2018-08-28 03:03:41"
updated_at:"2018-08-28 03:17:33"
Now how can I check the checkbox using only v-model user.permission. I used the v-model user.permission because I'm using it on posting a request. However when I fetch it using id the data structure changes.
You will have to modify the fetched response:
editUser: function(id){
let vm = this;
axios.get('api/users/' + id)
.then( response => {
response.data.data.user.permissions = response.data.data.user.permissions.map((item) =>
{
return item.name; // <--- convert the array of objects into array of strings
});
vm.user = response.data.data; //PUT RESPONSE DATA TO USER OBJECT
vm.usersModal = true;
})
.catch( error => {
console.log(error);
});
},
I know there is a very similar question asked over here but my object hierarchy is different than the one in that question.
Anyways, I want to store the HTML form input data in to my JavaScript object. Here is my HTML form code:
<form id="newAuction">
<input id="title" name="title" required type="text" value="" />
<input id="edate" name="edate" required type="datetime" value="" />
<input id="minbid" name="minbid" required type="number" value="" />
<button class="btn btn-primary">Submit</button>
</form>
What I want is to get the values of these 3 inputs and store it in my JS object.
I know the proper JSON format needed to post the data to my API. (I tried POSTing with POSTman and I get a status 200, so it works). The proper format is:
{
"auction": {
"Title": "Auction1",
"EDate": "01/01/1990",
"MinBid": 30
},
"productIds": [1,2,3]
}
This is what my JS object looks like:
<script>
$(document).ready(function() {
var vm = {
auction: {},
productIds: []
};
//validation and posting to api
var validator = $("#newAuction").validate({
//assigning values
vm.auction.Title = document.getElementById('title').value;
vm.auction.MinBid = document.getElementById('minbid').value;
vm.auction.EDate = document.getElementById('edate').value;
vm.productIds.push(1);
submitHandler: function () {
$.ajax({
url: "/api/newAuction",
method: "post",
data: vm
})
.done(function () {
toastr.success("Auction Added to the db");
//setting the vm to a new vm to get rid of the old values
var vm = { auction: {}, productIds: [] };
validator.resetForm();
})
.fail(function () {
toastr.error("something wrong");
});
return false;
}
});
});
</script>
As you can see, I am using document.getElementById('title').value; to get the values and assign them but I'm getting the syntax error Expected : Comma expected
Not sure if this matters, but this is inside a .NET MVC5 project.
Move your value assignment set of codes inside submitHandler. Check the syntax of validate() https://jqueryvalidation.org/validate/
//validation and posting to api
var validator = $("#newAuction").validate({
submitHandler: function () {
//assigning values
vm.auction.Title = document.getElementById('title').value;
vm.auction.MinBid = document.getElementById('minbid').value;
vm.auction.EDate = document.getElementById('edate').value;
vm.productIds.push(1);
$.ajax({
url: "/api/newAuction",
method: "post",
data: vm
})
.done(function () {
toastr.success("Auction Added to the db");
//setting the vm to a new vm to get rid of the old values
var vm = { auction: {}, productIds: [] };
validator.resetForm();
})
.fail(function () {
toastr.error("something wrong");
});
return false;
}
});