Suppose that I have the following:
<form action="shoecart" method="POST">
<div id="shoeslist">
<h2>Your bag</h2>
<div id="individualitem">
<img src="storage/pic1.png" alt="shoe picture">
<p>name</p>
<p>price</p>
</div>
</div>
</form>
Is there a way to send src of the image and the paragraph contents to the Controller? If yes, how do I send this data to any Controller so that it can add it to a table? As we can see that there are no inputs in the form.
CodePudding user response:
No, you cannot send the data like that. If you using ajax to submit the form, then you can bind the value there. if you do not want to show the input field, then use hidden input field. this could be your solution.
CodePudding user response:
you can use jquery
for example you have thyis image <img src="storage/pic1.png" alt="shoe picture">
so add id attribute like this :
<img src="storage/pic1.png" alt="shoe picture" id="myImg">
so you can access this element in jquery
like this : $('#myImg')
and you can send it to controller by ajax
but note you need to define this and add the image to formData
and append()
it before to send it to controller
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
});
CodePudding user response:
No. You would need to put those values into input[type=hidden]
fields or you would send them via an async request (AJAX) using FormData.
In short, you need to submit a form with the values that you want.
const formData = new FormData();
formData.append("img", "my_image_src");
formData.append("text", "my_paragraph_content");
let response = await fetch('my_endpoint_here', {
method: 'POST',
body: formData
});
console.log(await response.json());
CodePudding user response:
Yes. You can do it with the help of Ajax (javascript and jquery).
you need to fetch data(attribute and property) via id or class and pass data on particular event using ajax to the controller.