We Keep Coding

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);
}
});
});

Asp.net button with ajax dont work

I'm trying to make a button in ASP.NET that call a ajax function and return another ASP.NET, with a method do search in my database. When I click into the button the ajax function it doesn't trigger, doesn't do anything.This Ajax will take something that the user will digit, like a ZIP-code, and will search in my database.
var cepjs = $('#MainContent_cepBrasil').val();
alert(cepjs);
$('#ButtonCEP').click(function () {
alert('cliquei');
$.ajax({
type: "POST",
url: "CEP.aspx/Consulta_CEP",
data: JSON.stringify({ scep: cepjs}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$('#MainContent_cepBrasil') = result.CEEP.localCEP;
$('#MainContent_ufEnderecoBrasil') = result.CEEP.localUF;
$('#MainContent_codMunicipioEnderecoBrasil') = result.CEEP.localMunicipio;
$('#MainContent_tpLogradouro') = result.CEEP.localTpLog;
$('#MainContent_descLogradouroBrasil') = result.CEEP.localLogradouro;
$('#MainContent_complementoBrasil') = result.CEEP.localComplemento;
$('#MainContent_bairroBrasil') = result.CEEP.localBairro;
}
});
});
<div class="form-group">
<!--<input Type="button" ID="ButtonCEP" name="btnConsultar_CEP" Class="btn btn-primary btn-sm" value="Consultar" />-->
<button id="ButtonCEP">Consultar</button>
</div>
I've try it to do everything in the ajax, even change the click.function to on('click', function()), but didn't work too, and i try to use some different forms in button style, with button and input type button.
Anyone could help me, I'll appreciate. Thanks

You have 2 errors here, you are not including the jquery source file, and not waiting for the doc to be ready
$( document ).ready(function() {
console.log( "ready!" );
var cepjs = $('#MainContent_cepBrasil').val();
alert(cepjs);
$('#ButtonCEP').click(function () {
alert('cliquei');
$.ajax({
type: "POST",
url: "CEP.aspx/Consulta_CEP",
data: JSON.stringify({ scep: cepjs}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$('#MainContent_cepBrasil') = result.CEEP.localCEP;
$('#MainContent_ufEnderecoBrasil') = result.CEEP.localUF;
$('#MainContent_codMunicipioEnderecoBrasil') = result.CEEP.localMunicipio;
$('#MainContent_tpLogradouro') = result.CEEP.localTpLog;
$('#MainContent_descLogradouroBrasil') = result.CEEP.localLogradouro;
$('#MainContent_complementoBrasil') = result.CEEP.localComplemento;
$('#MainContent_bairroBrasil') = result.CEEP.localBairro;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<!--<input Type="button" ID="ButtonCEP" name="btnConsultar_CEP" Class="btn btn-primary btn-sm" value="Consultar" />-->
<button id="ButtonCEP">Consultar</button>
</div>

Can you try invoking the function after DOM is ready by
$(document).ready(function() {
//
});

Thanks guys, I've got the solution, I was calling the .ready function into another .ready function, and that was the problem, i just don't know why , but I put this function out off it in the beginning of the code, and it work. Thanks for the helping.

jquery event (on submit) is affecting all my divs and not the only one where the button was clicked?

what's up guys? look... I have a comment system for my web page... and I've been dealing with this little problem for a entire week. I really need some help here x_x ... the thing is that when a user leave a comment on my page, this comment is showed automatically thanks to ajax, that's ok...
each comment can be voted. and here's my problem... these divs that contain the forms for voting are build dynamically and the thing is that when I do click on the button for sending the form in any comment... the resulting data appears in all the comments! instead of appear in the specific one where the submit button was clicked, so I don't know what to do at this point, I hope you can give me a hand. this is my code
the form:
<label > Vote </label>
<form action="vote.php" method="POST" class="form-vote" id="form-vote">
<button class="icon-thumbs-up" id="icon-thumbs-up"></button>
<input hidden="hidden" type="text" name="num-comment" id="num-comment" value="'.$d['id'].'" >
<input hidden="hidden" type="text" name="point" id="point" value="'.$d['point'].'" >
<p id="actual-points" class="actual-points"> '.$d['point'].'</p>
<div id="result" class="result"> </div>
</form>
the script:
<script type="text/javascript">
$(document).ready function() {
$('.form-vote')on('submit', function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('.actual-points').hide();
$('.result').html(data).fadeIn('slow');
}
})
return false;
});
})
</script>

Have you tried saving the 'this' object of the original event and using it inside the success function like this:
$('.form-vote')on('submit', function(e) {
e.preventDefault();
var $form = $(this); // Save here
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
// use here
$form.find('.actual-points').hide();
$form.find('.result').html(data).fadeIn('slow');
}
})
return false;
});

change this:
$('.result').html(data).fadeIn('slow');
to this:
$(this).find('.result').html(data).fadeIn('slow');

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();
}
});
});
});

How to submit a form through ajax in safari browser in grails

I am trying to submit a form through ajax function while button
but on safari browser its submitting like a normal form submitting.
and In other browser its working properly through ajax function
<g:form action="addEmpHistory" name="formNew" method="post">
<button id="submitBtn" name="submitBtn" onclick="submitform(formNew);"></button>
</g:form>
//Ajax code
function submitform(data){
$("#"+data).submit(function(event) {
new Event(event).preventDefault();
event.preventDefault();
$.ajax({
type: 'POST',
url: '/user/addUSer',
data: $('#'+data).serialize(),
success: function (data) {
location.reload();
}
});
});
}

Seen as you are using jQuery, consider removing onclick
<form action="addEmpHistory" id="formNew" name="formNew" method="post">
<button id="submitBtn" name="submitBtn">Submit</button>
</form>
and replacing your submitform function with jQuery event binding, something like:
$(document).ready(function() {
$("#formNew").submit(function() {
$.ajax({
type: 'POST',
url: '/user/addUSer',
data: $("#formNew").serialize(),
success: function(data) {
alert(data);
}
});
return false; // prevent actual form submit
});
});