How to send multiple variables through ajax? - javascript

The code below sends the id of item to more.php to load more content. It works fine. Now to add some more features I need to send one more id to more.php through the same code.
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.display').append(html);
}
});
});
});
</script>
Suppose second id is var catid = '<?php echo $cat ?>'; how to send this catid through the same ajax code. data : {id : id, catid : catid} is something I should do but can't get how to deal in current situation when my data carries data:'id='+ID,.

your should look like. specify your data as an object:
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.show_more', function () {
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type: 'POST',
url: 'more.php',
data: { id:ID, userid: userid },
success: function (html) {
$('#show_more_main' + ID).remove();
$('.display').append(html);
}
});
});
});

To retrieve multiple input's I suggest combining them in a Form:
first embed your inputs in an form with a submit button, you should also not use the same name twice because it won't work now, create unique names
<form action="GET" id="myForm">
<input id="string" type="text" name="string" />
<input id="string2" type="text" name="string" />
<input type="submit" value="Go" />
</form>
and write code to submit the ajax way
$('#myForm').submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
var $form = $(this);
$.ajax({
type: "GET",
url: "retrieve.php",
data: $form.serialize(), //make it JSON
success: function() {
console.log("it worked");
}
});
});

Related

POST method not supported when submitting multiple forms through the same JS code. (405)

I have multiple forms on the same page that are submitted through the same JavaScript code.
<form class="form" id="cancelchallenge" method="POST" action="{{action('ChallengeController#cancelChallenge')}}">
<input type="hidden" name="cancel_challengeid" value="462f2e80-8012-11e9-8b02-65a0a3459d7a">
<button type="button" class="btn-submit-cancelchallenge">cancel challenge</button>
</form>
<form class="form" id="cancelchallenge" method="POST" action="{{action('ChallengeController#cancelChallenge')}}">
<input type="hidden" name="cancel_challengeid" value="9b9ef9d0-8012-11e9-aa0f-95ff09733e52">
<button type="button" class="btn-submit-cancelchallenge">cancel challenge</button>
</form>
There could be any number of forms all of which will have a unique value for each hidden input.
Here is my JavaScript code
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit-cancelchallenge").click(function(e){e.preventDefault();
var $form = $('#cancelchallenge');
var cancel_challengeid = $("input[name=cancel_challengeid]").val();
$.ajax({
type:'POST',
url: $form.attr('action'),
data:{cancel_challengeid:cancel_challengeid},
success:function(data){
if(data.successful) {
toastr.success(data.successful);
}
}
});
});
If I submit any given form using the above code it works but it will always only submit the input value - from the first form - regardless of which form I submit.
Okay So I realise I shouldn't be using the same ID's in multiple forms so I change the form ID from:
id="cancelchallenge" to class="cancelchallenge"
and then update the JS code from:
var $form = $('#cancelchallenge'); to var $form = $(this);
thinking that will allow to submit any given form with the correct input value. However this now results in a 405 error.
"The POST method is not supported for this route. Supported methods: GET, HEAD."
My route looks like this:
Route::post('cancelChallenge', 'ChallengeController#cancelChallenge');
Briefly my controller looks like this:
public function cancelChallenge(Request $request)
{
//Some validation
$challenge = Challenge::where(['id' => $request->cancel_challengeid,
'player1' => Auth::user()->id])->first();
//DB::beginTransaction();
//Update a row in the challenges table
//Insert a row into the transactions table
//Update a row in the users table
//Commit transaction
}
Anyone able to point me in the right direction? Thanks.
$(this) - current element.
el.parent() - parent of element.
el.find() - find selector inside element.
$('.btn-submit-cancelchallenge').click(function(e){
e.preventDefault();
let $form = $(this).parent();
let cancel_challengeid = $form.find('input[name=cancel_challengeid]').val();
$.ajax({
type:'POST',
url: $form.attr('action'),
data: {cancel_challengeid: cancel_challengeid},
success:function(data){
if(data.successful) {
toastr.success(data.successful);
}
}
});
});
Or better:
$('.btn-submit-cancelchallenge').click(function(e){
e.preventDefault();
let form = $(this).parent();
$.ajax({
type:'POST',
url: form.attr('action'),
data: form.serialize(),
success:function(data){
if(data.successful) {
toastr.success(data.successful);
}
}
});
});

How to send AJAX form without using HTML <form> tag

I want to send data to my PHP using AJAX but without using the HTML <form> tag because in my case if I have the form I have a loop of sending the form and AJAX PHP came into looping so I think I would not use form but how can I apply these if AJAX had a method of POST?
$(document).on('click', '#myButton', function(){
$.ajax({
url: "insert.php",
method: "post",
data:{data},
dataType:"text",
success:function(data){
alert('Successfully')
}
})
})
and my HTML is:
<div class = "myDiv1">
<input type = "text">
<input type = "button" id = "myButton">
</div>
Is there a possible way to do this? I'm just asking. Thank you :)
Javascript
$(document).on('click', '#myButton', function(){
$.ajax({
url: "insert.php",
method: "post",
data:{
text: $('.text-value').val()
},
dataType:"text",
success:function(data){
alert('Successfully')
}
})
})
HTML
<div class = "myDiv1">
<input type = "text" class="text-value">
<input type = "button" id = "myButton">
</div>
You can assign values to data in ajax like
var formData = {
value1 = $(element1).val();
value2 = $(element2).val();
// and so on
}
Pass the formData to ajax

LARAVEL: Use a javascript variable in php

I would like to get an id from a button. I need this id in my ajax request. This is my button:
<form>
<div class="form-group">
<button class="btn btn-primary" name="deletecar" id="{{$car->id}}">Delete</button>
</div>
</form>
I'm getting the id of the button this way:
<script type="text/javascript">var JcarID = this.id;</script>
Finally my Ajax Request.
$('[name="deletecar"]').click(function (e)
{
var JcarId = this.id;
e.preventDefault();
$.ajax({
type: "POST",
url: '{{ action('CarController#delete', [$user->id, $car->id])}}',
success: function (data)
{
// alert(data);
}
});
});
Thx for reading!
SOLUTION
Changed some bits in my code. I changed the url of my request.
$('[name="deletecar"]').click(function (e)
{
e.preventDefault();
$.ajax({
type: "POST",
url: '/users/{{$user->id}}/deletecar/'+this.id,
success: function (data)
{
// alert(data);
}
});
});
Hard to guess what is your requirement yet either if you want to get the button id value
this.attr('id'); or this.prop('id');
Or if you want to set the id value of button
$('[name="deletecar"]').attr('id', yourvalue)
I think you want to use JcarId rather $car->id in ajax request. Here what you can do rather than directly using PHP code in ajax call.
$('[name="deletecar"]').click(function (e)
{
var JcarId = this.id;
e.preventDefault();
$.ajax({
type: "POST",
url: '/CarController/delete',
data: {'carId':JcarId}
success: function (data)
{
// alert(data);
}
});
});

Using JQuery and AJAX to pass data to a PHP script

I have an HTML form that Is only composed of a button with a value. I would like to leave it this way. I am using AJAX/JQuery to pass the form data to a PHP script. But, for some reason, the button value is not sent. What could I be doing wrong?
HTML:
<form id="friend-send" method="post" action="">
<button type="submit" class="foll" name="approve-friend" value="4"> Approve </button>
</form>
AJAX/JQUERY:
$(document).ready(function() {
$("#friend-send").submit(function(e) {
var $this = $(this);
var dataString = $this.serialize();
e.preventDefault();
$.ajax({
type: "POST",
url: "relate.php",
data: dataString,
async: false,
success: function() {
$this.hide();
}
});
});
});
JQuery won't serialize a button, use a hidden field instead
<form id="friend-send" method="post" action="">
<input type="hidden" name="approve-friend" value="4" />
<button type="submit" class="foll"> Approve </button>
</form>
Also, You need to serialze the form by id, not the button by id
Instead of this
$("#friend-request-buttons")
It should be this
$("#friend-send")
Lastly, since you are using ajax to post, you can simplfy your form open tag to this...
<form id="friend-send">
<button>
tags are not supported by serialize https://api.jquery.com/serialize/
You would need to use an input of some kind. A hidden one would work.
Don't use serialize, create the input data yourself:
var dataString = {};
var $button = $this.find("[type=submit]");
dataString[$button.attr('name')] = $button.val();
When you provide an object as the data: argument to $.ajax, jQuery will serialize it automatically.
This answer would be if you are set on using the button alone
$(document).ready(function() {
$("#friend-send").submit(function(e) {
var $this = $(this);
var dataString = "?" + $(this).find('button').attr('name') + "=" + $(this).find('button').attr('value');
e.preventDefault();
$.ajax({
type: "POST",
url: "relate.php",
data: dataString,
async: false,
success: function() {
$this.hide();
}
});
});
});

problem in get value by ".serialize()"?

i want after click on #value(VALUE) get value input:checkbox with .serialize() ?
EXAMPLE: http://jsfiddle.net/tKBJ2/40/
$('#value').click(function(e){
e.preventDefault();
alert("this alert only after click on '#value'");
$('.table_show tr').each(function(){
if ($(this).prop('checked')) {
var dataString = $('.table_show').serialize(); // This don't work
alert(dataString);
$(this).parent().parent().fadeOut("slow");
$.ajax({
type: "POST",
url: "http://localhost/admin/customer_size/delete",
data: dataString,
cache: false,
success: function(){
},
error: function(data){
alert('Load was performed.');
}
})
}
})
});
serialize() is used to get query string from the inputs of a form, you should check if the selector select a form element or not.
cf jquery doc : http://api.jquery.com/serialize/
Encapsulate your div table_show in a form, and do serialize on this form:
<form class="myForm">
<div class="table_show">
rest of your code
</div>
</form>
Then in your js :
var dataString = $('.myForm').serialize();

Categories