in a view im repating the same form and posting it via ajax, my concern is the ajax is working for 1st form but not working from second form, below is the code im using.
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<script type="text/javascript">
$('.post_comment').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('.comment_text').val()
};
$.ajax({
url: "<?php echo site_url('/comment'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
</script>
Your problem is post_text: $('.comment_text', this).val() which will give you the value of the first selected .comment, what you want is the .comment in the current form. Try
<script type="text/javascript">
$('.post_comment').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $(this).closest('form').find('.comment_text').val()
};
$.ajax({
url: "<?php echo site_url('/comment'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
</script>
Also element ids should be unique.
Related
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');
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>
Please can someone provide a simple example for ajax in laravel 5.1. I have tried everything and still no success. Tried the other solutions here but no luck, maybe it is my copy of laravel, I really don't understand. I just want to see how its done correctly. Please help me out. Thanks.
Route: Route::post('/signin', 'UserController#ajax');
<form action="signin" method="POST" id="form1">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<fieldset>
<p><label for="email">E-mail address</label></p>
<p><input type="email" value="{{ old('email') }}" onBlur="if(this.value=='')this.value='mail#address.com'" onFocus="if(this.value=='mail#address.com')this.value=''" name="email"></p> <!-- JS because of IE support; better: placeholder="mail#address.com" -->
<p><label for="password">Password</label></p>
<p><input type="password" name='password' value="password" onBlur="if(this.value=='')this.value='password'" onFocus="if(this.value=='password')this.value=''"></p> <!-- JS because of IE support; better: placeholder="password" -->
<p><input type="submit" value="Login" name="submit" id="sign"></p>
</fieldset>
</form>
for the controller:
public function ajax(Request $request)
{
if(Request::ajax()) {
$data = Request::all();
print_r($data);
]);
}
And ajax:
$('#sign').click(function(event) {
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
var inputs = $('#form1').serialize();
$.ajax({
url: 'http://localhost/laravel/public/signin',
type: 'POST',
dataType: 'json',
data: inputs,
success: function (data) {
console.log(data);
}
})
return false;
});
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 have the following page, and checking the request, I can't find the HTTP_X_REQUESTED_WITH header? I even tried various hacks such as adding the header manually (per another question here), but to no avail. Anyone have any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#form").bind("submit", function(e) {
e.preventDefault()
$.post("/members/login/", $("#form").serialize(),
function(data){
alert(data);
});
});
});
});
</script>
<form id="form" action="" method="post">
<ul>
<li><label for="id_email">Email:</label> <input type="text" name="email" value="" id="id_email" /></li>
<li><label for="id_password">Password:</label> <input type="password" name="password" id="id_password" /></li>
</ul>
<input type="hidden" name="next" value="" />
<input id="submit" type="submit" value="" />
</form>
This shouldn't matter, but I use django and check with request.is_ajax(). I verified that the header isn't in the request. This is deployed on localhost.
There seems to be a closing too much in your code, try this:
<script type="text/javascript">
$(function() {
$("#form").on("submit", function(e) {
e.preventDefault()
$.post("/members/login/", $("#form").serialize(), function(data){
console.log(data);
});
});
});
</script>