Pass variable values from js function into ajax as data
Pass variable values from js function into ajax as data
I currently have javascript in place so that when a button is clicked, it fires up my modal and captures data shown on that modal to be used in AJAX (this is for a delete, so I'm showing confirmed data in the modal that will be passed to a delete function in the database).
Anyway, I log everything here and I have exactly what I need. However, I'm unsure how to pass those things into an ajax function outside of it.
Here's the js that pops up the modal and captures what I need
$('.deleteModal').click(function()
var groupingSplit = grouping.split(" - ");
namingSplit = naming.match(/[a-z0-9]+/gi);
number = groupingSplit[0];
name = groupingSplit[1];
2ndNumber = namingSplit[0];
3rdNumber = namingSplit[1];
referenceNumber = document.getElementById("reference").value;
console.log(number);
console.log(name);
console.log(2ndNumber);
console.log(3rdNumber);
console.log(referenceNumber);
)
and outside of it I'm building ajax:
$("#deleteButton").click(function(e)
e.preventDefault(e);
$.ajax(
url:'deleteFunction',
data:
/*Here I need
number
name
2ndNumber
3rdNumber
referenceNumber
from the other function
*/
,
"_token": " csrf_token() ",
type:"POST",
success:function(data)
console.log(data);
,
error: function(jqxhr, status, exception)
alert('Exception:', exception);
);
What is the best way I can send this data from the first function to the AJAX?
grouping
naming
So the first function grabs those values and stores them from text in the div with the modal button.
– Tom N.
Sep 14 '18 at 15:21
Well in that case I would either bind the click delete button at the moment I show my modal, that is, inside the delete modal click handler, or I would directly get the values from the input inside of the delete button click scope (Which is dangerous if your input values change while your modal is open, but you're in a modal so, not likely to happen)
– Logar
Sep 14 '18 at 15:29
1 Answer
1
You will need a way to share the data between both functions.
An easy way would be to use global variables
let deleteData = ;
$('.deleteModal').click(function()
var groupingSplit = grouping.split(" - ");
namingSplit = naming.match(/[a-z0-9]+/gi);
number = groupingSplit[0];
name = groupingSplit[1];
secondNumber = namingSplit[0];
thirdNumber = namingSplit[1];
referenceNumber = document.getElementById("reference").value;
deleteData = number, name, secondNumber, thirdNumber, referenceNumber;
)
And then access it in the other function
$("#deleteButton").click(function(e)
e.preventDefault(e);
$.ajax(
url:'deleteFunction',
data:deleteData,
"_token": " csrf_token() ",
type:"POST",
success:function(data)
console.log(data);
,
error: function(jqxhr, status, exception)
alert('Exception:', exception);
);
Perfect, thanks! So if I had another ajax for an edit/update function, I could actually use the same data there as well, for a different button?
– Tom N.
Sep 14 '18 at 15:23
Probably. It's hard to comment without seeing the whole code base. It seems to me like the code from $"(#deleteButton").click should probably simply go in the $(".deleteButton") and run it from there...
– Joel Lord
Sep 14 '18 at 15:27
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
There are a lot of solutions. First of all, where do the
groupingandnamingvariables come from in your first click handler ? If you can access them after the delete modal is clicked, you can just use them in the deletebutton click handler– Logar
Sep 14 '18 at 15:18