I am trying this but it show me this
The POST method is not supported for this route. Supported methods: GET, HEAD.
Route
'''
Route::get('/','EmployeeController#index');
Route::post('employee.store','EmployeeController#store')->name('employee.store');
'''
Ajax
'''
$(document).ready(function(){
$('#insert_form').on('submit',function(e){
event.preventDefault();
$.ajax
({
type:"POST",
url:"{{route('employee.store')}}",
data:new FormData(this),
dataType: 'json',
success: function(data)
{
alert();
window.location.reload();
}
});
});
})
'''
blade
'''
<form action="" id="insert_form" method="post">
#csrf
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Name" name="name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="email" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
</form>
'''
Pls modify your POST route:
// Routes should not contains dots.
Route::post('/employees','EmployeeController#store')->name('employee.store');
Related
when normal request performed , it saves data without any error but through ajax it returned error: [object HTMLDivElement].
but when I comment the create function in controller , request is performed successfully.
csrf token added in meta tag
data can be saved through normal request but not with the ajax
Route is properly configured
ass far as i understand , error is generating while performing create function in the controller.
Controller
public function store(Request $request)
{
$data = $request->all();
Contact::create($data);
return response()->json(['success'=>'Message Sent Successfully']);
}
Blade.php
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<form method="POST" action="{{route('contact.store')}}" class="php-email-form" id="contact-form">
<div class="row gy-4">
<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div>
#csrf
<div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Your Email" required>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="subject" placeholder="Subject" required>
</div>
<div class="col-md-12">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
</div>
<div class="col-md-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
<button type="submit" id="send-message">Send Message</button>
</div>
</div>
</form>
</section><!-- End Contact Section -->
Ajax
$(document).ready(function() {$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
$("#contact-form").submit(function(e){
e.preventDefault();
$('.loading').addClass("d-block");
var name = $("input[name=name]").val();
var email = $("input[name=email]").val();
var subject = $("input[name=subject]").val();
var message = $("input[name=message]").val();
$.ajax({
type:'POST',
url:"{{route('contact.store')}}",
data:{name:name, email:email, subject:subject, message:message},
success:function(data){
$('.sent-message').addClass("d-block");
$('.sent-message').text(data.success);
//$('#contact-form').trigger("reset");
},
complete: function(){
$('.loading').removeClass("d-block");
},
error:function(data){
$('.error-message').addClass("d-block");
$('.error-message').text(data.error);
}
});
});
});
I am using ajax but it behaves different. I just want code that I should
in Model , VIEW,Controller.
This while contain two operation insertion and fetching the data from that db.
![In image their is subject and textarea as input.When i click submit the input
dispaly in comment which is just above the Subject input]1
View
<form action="" method="POST">
<input type="hidden" name="myId" id="myId" value="" />
<div class="form-group px-4">
<label for="subject">Subject</label>
<input type="text" id="js_subject" name="js_subject">
</div>
<div class="form-group px-4">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" name = "js_text" id="js_text" rows="3"></textarea>
</div>
<input type="submit" id="comment-info" value="submit" name="submit" class="btn btn-primary">
</form>
Use an jQuery Ajax request,and on somepage.php use if and else for insert and select and
echo some message for both and die();
$('form').on('submit', function(event){
event.preventDefault();
$.ajax({
type:'post',
url:'somepage.php',
data:$(this).serialize(),
success:function(data){
var tmp = data;
if(data = "message1"){
//do whatever
}else if(data = "message2"){
//do whatever
}
})
});
From Postman, I am able to send a POST request to the server successfully as following:
Key Value
postinfo (file) info.json
data (file) data.csv
label (file) label.csv
Now I'm implementing this in HTML and JavaScript.
<div id="fileupload">
<form id="uploaddata" enctype="multipart/form-data">
<label for="file">Choose data file</label>
<input type="file" accept="file/csv">
<br>
<label for="file">Choose initial label file</label>
<input type="file">
<br>
<label for="file">Choose setting</label>
<input type="file">
<br>
<button type="submit">Next</button>
</form>
</div>
And JS:
$('#uploaddata').submit(function(e){
e.preventDefault();
var form = new FormData($("#uploaddata")[0]);
$.ajax({
url: albackend,
type:'POST',
data: form,
crossDomain: true,
processData: false,
contentType: false,
success:function(data){
console.log("success");
console.log(data);
$('#fileupload').hide();
$('#videoselect').show();
},
error: function (responseData, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
Data is not posted successfully yet, likely due to lacking of keys (postinfo, data, label). How could I solve this problem?
Your file inputs nave no name attributes, they need them to be the keys of the files in the request.
<div id="fileupload">
<form id="uploaddata" enctype="multipart/form-data">
<label for="file">Choose data file</label>
<input type="file" name="data" accept="file/csv">
<br>
<label for="file">Choose initial label file</label>
<input type="file" name= "label">
<br>
<label for="file">Choose setting</label>
<input type="file" name="postinfo">
<br>
<button type="submit">Next</button>
</form>
</div>
I want to insert some data into database using Bootstrap Modal. But the problem is Save button doesn't work properly on Bootstrap Modal as I couldn't insert the data into database through form. If anyone could help me to find it please!?
Here is the form part in blade:
<div id="myAlert" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Create User</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<div class="widget-box">
<div class="widget-content nopadding">
<form action="#" method="get" id="userForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">Name :</label>
<div class="controls">
<input class="span11" placeholder="Name" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label">Email :</label>
<div class="controls">
<input class="span11" placeholder="Email" type="email">
</div>
</div>
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls">
<input class="span11" placeholder="Enter Password" type="password">
</div>
</div>
<div class="control-group">
<label class="control-label">Confirm Password</label>
<div class="controls">
<input class="span11" placeholder="Confirm Password" type="password">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"><a data-dismiss="modal" class="btn btn-primary" href="#">Confirm</a> <a
data-dismiss="modal" class="btn" href="#">Cancel</a>
</div>
</div>
Here is the Ajax Part :
$('#userForm').on('success.form.fv', function(e) {
e.preventDefault();
$.ajax({
method: 'POST',
action:"{{ url('/register') }}",
data: $form.serialize()
});
});
You need the submit button. Try to put this code inside your form.
<button type="submit" class="btn btn-primary">Register</button>
Problem with your current Confirm button is: 1) he don't have type=submit; 2) he is outside the form.
first of all add type="submit" to your button
secondly check your network tab in the dev tools in your browser and check the request does it go to /register or not ?
if the request is hitting /register what's the parameters ?
Change form method get to post
I answer here for ajax call
Laravel ajax internal servor 500 (internal server-error)
Your input type elements are missing name attribute
<input class="span11" placeholder="Name" name="name" type="text">
<input class="span11" placeholder="Email" name="email" type="email">
<input class="span11" placeholder="Enter Password" name="password" type="password">
<input class="span11" placeholder="Confirm Password" name ="confirm_password" type="password">
You then retrieve the content using Request or Input by passing the value of the name attribute
At first change your form method from get to post. Then add save button with id btnSave.
Ajax :
$("#btnSave").click(function(e){
e.preventDefault()
var $form = $("#userForm");
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function (data, status) {
if(data.error){
return;
}
alert(data.success); // THis is success message
$('#myModal').modal('hide'); // Your modal Id
},
error: function (result) {
}
});
});
In controller :
public function store(Request $request)
{ try {
$inputs = $request->all();
ModelName::create($inputs);
$data = ['success' =>'Data saved successfully'];
} catch (\Exception $e) {
$data = ['error' =>$e->getMessage()];
}
return Response::json($data);
}
Form part in blade:
<div class="modal-footer"><a data-dismiss="modal" class="btn btn-primary" id="btnAdd">Confirm</a></div>
Ajax Part
$('#btnAdd').click(function () {
$.ajax({
url: '{{url('/register')}}',
type: 'POST',
data: $('#userForm').serialize(),
success: function (object) {
},
error: function (result) {
}
});
});
I am trying to submit a form to a PHP file to call a query and submit the form details into the database, however I grabbed this AJAX code off stackoverflow and adjusted it but it seems to be working in a weird way, I'm receiving the alert message whcih I should be receiving when the php page returns "success" (as far as i understand) but the PHP page itself is never reached, I know that because I added a "die" there.
So here's my simplified form:
<form role="form" id="promoProspectForm" type="post">
<div class="form-group">
<label for="name">Full name *</label>
<input name="name" type="text" class="form-control" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="company">Company *</label>
<input name="company" type="text" class="form-control" id="company" placeholder="Enter your company's name" required>
</div>
<div class="form-group">
<label for="url">Website URL *</label>
<input name="url" type="text" class="form-control" id="url" placeholder="Enter your website URL" required>
</div>
<div class="form-group">
<label for="number">Contact number *</label>
<input name="number" type="text" class="form-control" id="number" placeholder="Enter your contact number" required>
</div>
...Some more inputs
</form>
And here's my AJAX code which is included in the HTML page in the footer
$(function() {
$('#promoProspectForm').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'php/submit-prospect.php',
data: $('#promoProspectForm').serialize(),
success: function() {
alert('form was submitted');
}
});
});
});
And here's my submit-prospect.php file:
<?php
die("REACH");
if(isset($_POST) && !empty($_POST))
{
include_once(db.php);
$result = insert_prospect($_POST);
if(!$result)
{
return "fail";
}
else
{
return "success";
}
}
?>
I have also suspected that I have the wrong url to the php file so I tried changing it, basically my index.php is on the root, that ajax function is in js/ajax.js, and the php file i'm trying to reach is in php/submit-prospect.php, so to simplify it:
index.php
js/ajax.js
php/submit-prospect.php
So I tried changing the URL in the ajax to point at "../php/submit-prospect.php" but that also returned the same result.
What am I doing wrong? Thanks.
$(function() {
$('#promoProspectForm').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'php/submit-prospect.php',
data: $('#promoProspectForm').serialize(),
success: function(data) {
alert(data);
}
});
return false; // difference
});
});
return false
in in function "submit" of form, to cancel submit action of html code action .. I hope this help.