I have this form here I am trying to send data to the controller using Ajax but something keeps failing and ajax is not working at all. I am trying to insert a question and sending the quiz id through the form and to the controller
<div id="form_two" class="container col-sm-8">
<div class="row card border-secondary align-items-center">
<div class="form-group col-sm-7">
<br><br>
<form id="report">
#csrf
<input type="hidden" name="quizTest" value="{{ \Illuminate\Support\Facades\Session::get('testID') }}">
<input class="form-control" id="question" type="text" name="question" placeholder="Question" size="40" required><br>
<input class="form-control" id="answerA" type="text" name="answerA" placeholder="Option A" size="40" required><br>
<input class="form-control" id="answerB" type="text" name="answerB" placeholder="Option B" size="40" required><br>
<input class="form-control" id="answerC" type="text" name="answerC" placeholder="Option C" size="40" required><br>
<input class="form-control" id="answerD" type="text" name="answerD" placeholder="Option D" size="40" required><br>
<input class="form-control" id="correct_answer" type="text" name="correct_answer" placeholder="Correct Answer" size="40" required><br>
<button class="btn btn-primary" id="registraion-form" >ADD A QUESTION </button>
</form>
</div>
</div>
</div>
Here is my ajax code that I am trying to send data to the /test endpoint, but when I am submitting the form nothing is printing on the console.log and nothing is being returned from the response from the controller which leads to the conclusion that ajax is not working. When I am pressing the submit button only the URL is changing, what I am doing wrong?
$('#registraion-form').click(function (e) {
e.preventDefault();
let question = $("input[name=question]").val();
let answerA = $("input[name=answerA]").val();
let answerB = $("input[name=answerB]").val();
let answerC = $("input[name=answerC]").val();
let answerD = $("input[name=answerD]").val();
let quizTest = $("input[name=quizTest]").val();
let correct_answer = $("input[name=correct_answer]").val();
$.ajax({
type: "POST",
url: "/test",
data : {
quizTest: quizTest,
question : question,
answerA:answerA,
answerB:answerB,
answerC:answerC,
answerD:answerD,
correct_answer : correct_answer
},
success: function(response) {
console.log(response);
console.log(response.message);
$("#report")[0].reset();
},
error : function (error) {
console.log(error);
}
})
})
just because you have added #csrf to your form, doesn't mean that you're ok on everything.
Since AJAX is submitting a POST request, also that request should have with it the csrf token, otherwise it won't work.
Check for example this question.
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
}
})
});
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.
I am trying to apply ajax with my spring mvc, but couldn't find where I make thing wrong. I try to follow several tutorials but couldn't customize mine to work. It always falls to error state.
So this is my ajax call
function doAjax() {
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
var json = {
"username" : useranme,
"email" : email,
"password" : password
}
//alert("username: " + username + " email: " + email + " password: " + password);
$.ajax({
type: "POST",
url: $('form').attr('action'),
data: JSON.stringify(json),
dataType: "JSON",
success: function(data) {
},
error:function(data, status, err) {
alert("error");
}
});
};
And this is my form:
<div class="form">
<spring:url var="registerUrl" value="http://localhost:9004/Project/register" htmlEscape="true" />
<form method="post" action="${registerUrl}">
<div class="form_field">
<label for="username">Username</label><br/>
<input class="field" id="username" type="text" name="userName" autocomplete="off"/>
</div>
<div class="form_field">
<label for="email">Email</label><br/>
<input class="field" id="email" type="email" name="email" autocomplete="off" />
</div>
<div class="form_field">
<label for="password">Password</label><br/>
<input class="field" id="password" type="password" name="password" />
</div>
<div class="form_field prefix_clear">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<input id="submit" class="action_button" type="submit" value="Register"/>
</div>
</form>
Click me
</div>
So if I submit the form using the input, it works perfectly. But it doesn's work when I try to submit it using anchor tag. Please help.
To make your ajax call work exactly as a form submit, you should, instead of using the JSON, just replace your data:JSON.stringify to
data:$("form").serialize();
If you have to make a request with JSON data, than you'll have to edit your question with the mapping method and command object to get help, but one thing that is obviously wrong with your code, is that you're not including the _csrf parameters in your ajax request
Received http://examle.com/ajax/login.html:
<form method="post" action="/login.html" name="formLogin" data-ng-model="formLogin" data-ng-submit="submitLogin($event)" novalidate="novalidate" >
<input type="hidden" csrf="csrf" data-ng-model="formLogin.csrf" value="" name="LoginForm[csrf]">
<input type="text" data-ng-minlength="2" data-ng-required data-ng-model="formLogin.email" placeholder="e-mail" autofocus="autofocus" name="LoginForm[email]"></div>
<span class="error" ng-show="formLogin['LoginForm[email]'].$error.required">Required!</span>
<input type="text" data-ng-minlength="2" data-ng-required data-ng-model="formLogin.password" placeholder="password" autofocus="autofocus" name="LoginForm[password]"></div>
<span class="error" ng-show="formLogin['LoginForm[password]'].$error.required">Required!</span>
<button ng-disabled="formLogin.submitted" name="login-button" class="btn btn-primary" type="submit">OK</button>
</form>
The directive code looks as below:
app.directive('formLogin', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
var inputs = element[0].querySelectorAll('input');
}
};
});
In a classic example, if specify the name of the form, the form controller will be published into related scope, under this name. Is it possible to do for AJAX-loaded form, something like?
The problem is in the validation inputs after loading form.