Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm very new to Ajax, so this is my first try to bind laravel and Ajax together. Anyway I've understood what it's all about and everything, but when I try to post data using a submit button, the data is delivered as a get method, it's as if the code never gets to the ajax function.
Here is My form :
<form id="addtocart">
<button class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
<input id="name" type="hidden" value="{{$one->name}}" name="data">
<input id="price" type="hidden" value="{{$one->price}}" name="price">
<input id="image" type="hidden" value="{{$one->image_path}}" name="image">
</form>
My Ajax Function :
jQuery(document).ready(function(){
jQuery('#addtocart').submit(function(e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/addtocart') }}",
method: 'post',
data: {
name: jQuery('#name').val(),
image: jQuery('#image').val(),
price: jQuery('#price').val()
},
success: function(result){
jQuery('.alert').show();
jQuery('.alert').html(result.success);
}});
});
});
Thanks for your help !!! (I thought that the script wasn't running at first because I was including the jquery library after the ajax function .. But that wasn't the case)
Insert method="post" inside form tag
<form id="addtocart" method="post">
<button class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
<input id="name" type="hidden" value="{{$one->name}}" name="data">
<input id="price" type="hidden" value="{{$one->price}}" name="price">
<input id="image" type="hidden" value="{{$one->image_path}}" name="image">
</form>
Hope it will be work
Why don't you add an id to your button
<button id="addtocart" class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
and then assign the event listener to the button click instead:
jQuery('#addtocart').on('click', function(e){}); // the closure body should be the same.
In your form tag, assign the action attribute to a hashtag value.
<form id="addtocart" action="#">
<button class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
<input id="name" type="hidden" value="{{$one->name}}" name="data">
<input id="price" type="hidden" value="{{$one->price}}" name="price">
<input id="image" type="hidden" value="{{$one->image_path}}" name="image">
</form>
Without it, the form will execute traditionally first, thats why the ajax script isn't catching the submit function.
Related
Greetings fellow programmers, I've been trying to solve this all day but I dont know much with ajax. I can handle regular forms that require refresh.
Basically I have a form where the client enters their desired quantity and a button that says add to cart with an ajax function that handles the post request.
<form id="qnt'.$ID'">
<input type="hidden" value="'.$price.'" name="price">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
This is the ajax request:
<script type="text/javascript">
function add(id){
qnt = $('#qnt'+id).serialize();
$('#qnt'+id).trigger("reset");
$.ajax({
url:'add2cart.php',
method:'POST',
data:{
'id': id,
'qnt': qnt
},
success:function(data){
console.log(data);
}
});
}
</script>
Now this works completely fine(Tbh a friend helped me do it) , Now I reached a situation where I want to add another variable to the form:
<form id="qnt'.$ID'">
<input type="hidden" value="'.$newPrice.'" name="newPrice">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
How can I pass that new hidden input with the ajax script? Thanks.
You can place the id in a hidden input in the form, then the serialize will have the id in it
<form id="qnt'.$ID'">
<input type="hidden" value="'.$ID.'" name="id">
<input type="hidden" value="'.$newPrice.'" name="newPrice">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
function add(id){
qnt = $('#qnt'+id).serialize();
$('#qnt'+id).trigger("reset");
$.ajax({
url:'add2cart.php',
method:'POST',
data: qnt,
success:function(data){
console.log(data);
}
});
}
View app
I made a multi update row with js ... the button function uses put to retrieve the id of each row ...
this success but..
I want to add input form for data that is updated
I don't know what to do
<form action="{{ url('UpdateAll') }}" >
<input type="text" name="name" placeholder="test">
<input type="submit" class="btn btn-primary delete_all" value="Mass Update">
</form>
code detail
I just had a look at your code in the link provided. Is it because your ajax request PUT url is set to :
url: $(this).data('url'),
But you're not actually setting that URL on your input? eg.
This:
<input type="submit" class="btn btn-primary delete_all" value="Mass Update">
Should be:
<input type="submit" class="btn btn-primary delete_all" value="Mass Update" data-url="/your-put-url-here">
I have implemented a working Modal form using HTML, Bootstrap CSS and PHP, which displays information about a document. In the footer of the Modal I have a 'Delete Document' button which should post to the same page (index.php). The form doesn't react to the submit button.
Reading up on the subject a lot of people are using AJAX to submit from a Bootstrap Modal. This seems unnecessary? Do I really need to implement a JSON post in AJAX just to submit this Modal?
The code:
<div class="modal-footer">
<form action="index.php" method="post">
<input type="hidden" name="DocumentID" value="<?php echo $row['DocumentID']; ?>" />
<input type="hidden" name="top-search" value="<?php echo $_POST['top-search']; ?>" />
<button type="submit" name="deleteDocument" class="btn btn-w-m btn-danger" onclick="return confirm('Are you sure you want to delete this Document?')">Delete</button>
</form>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
I have an example where a Modal submits successfully although to a different page using a similar method but using target="_blank"
Its not onclick - but onClick.
Also, you need to place the scripts inside {}. The following code should work.
/*
* A simple React component
*/
class Application extends React.Component {
render() {
return (<div class="modal-footer">
<form action="index.php" method="post">
<input type="hidden" name="DocumentID" value="<?php echo $row['DocumentID']; ?>" />
<input type="hidden" name="top-search" value="<?php echo $_POST['top-search']; ?>" />
<button type="submit" name="deleteDocument" class="btn btn-w-m btn-danger" onClick={ function() {
return confirm("Yes/No?");
}}>Delete</button>
</form>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>);
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
Im with a problem..
When i click in a normal button, for example <input type="button" value="1">, he executes the form and i don't wanna do that way.
What i need?
I need, when i submit the form, he will get the value of the button with a simple POST method.
Im using this at the moment:
<form method="post">
<button name="list_items_qt" value="16">
<button name="list_items_qt" value="32">
<input type="submit" value="Send">
</form>
In summary, i just need to post the value of the button that i selected before!
Sorry for the bad english!
Thanks in advance!
using jquery
<form method="post">
<button name="list_items_qt_1" value="16" id="list_items_qt_1">
<button name="list_items_qt_2" value="32" id="list_items_qt_2">
<input type="submit" value="Send" id="submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var btn1 = $('#list_items_qt_1').val();
var btn2 = $('#list_items_qt_1').val();
alert(btn1+=+btn2);
});
});
</script>
(i'll do it for 1 button)
i'm using Jquery here.
<form method="post">
<input id="btn1" type="hidden" name="btn1" value=""/>
<input type="submit" value="Send">
</form>
<button id="list_items_qt" onClick="btn1()">
<script>
function btn1(){
$('#btn1').val('32');
}
</script>
Then on page form you can find
$_POST['btn1'];
The code is untested and is an example.
i have the following button:
<form method="GET" action="/cms/deleteBlog/">
<input class="btn btn-danger btn-small" type="submit" name="'.$blogID.'" value="Delete">
</form>
So right now i get the following url:
cms/deleteBlog/?1=Delete
obviously i want something like the following:
cms/deleteBlog/id=1
So i tried the following (which is obviously not working):
name="id='.$blogID.'"
So how do i solve this? i've been looking around on the internet, and i know the solution is quite easy. But i just can't remember the way how it is done!
Add a hidden form field.
<input type="hidden" name="id" value="1" />
Also, you should never use GET to delete or modify data. Read Why should you delete using an HTTP POST or DELETE, rather than GET? for insight.
Why not use a hidden input field, e.g:
<form method="GET" action="/cms/deleteBlog/">
<input type="hidden" name="id" value="'.$blogID.'">
<input class="btn btn-danger btn-small" type="submit" value="Delete">
</form>
Or, if you want pretty URLs:
<form method="GET" action="/cms/deleteBlog/id='.$blogID.'">
<input class="btn btn-danger btn-small" type="submit" value="Delete">
</form>