We Keep Coding

How to make a popup form AJAX in leaflet and execute function on submit

What i'm basically trying to do,after clicking on each polygon a popup form appears where the user will input some values,press submit and after the php script and function runs ,it will supposedly show some markers on the map.I'm trying to make this form work as AJAX and execute the function within.
I already ajax successfully a html form before but it seems it needs some work to function properly within leaflet.
The form im trying to AJAX
var htmlformGuest = `
<h2>Search for parking slots</h2>
<form id="parkform" action="/findPark.php" method="post" >
Enter the polygon id:<br>
<input type="number" name="id_P" value="">
<br>
Max radius:<br>
<input type="number" name="Radius" min="50" max="500" value="" placeholder="50">
<br><b>
<input type="Submit" value="Submit">
<input id="form-polygon-id" type="hidden" name="PolygonID">
<input type="reset">
</form>
`;
The function i want to include when submitting the form ( which im not sure it works since i need to first ajax the form!)
function putMultipleMarkers(jArrayId, jArrayLat, jArrayLng) {
for (var i = 0; i < jArrayLat.length; i++) {
var multipleMarker = new L.marker(jArrayLat[i], jArrayLng[i])
.bindPopup(jArrayId[i])
.addTo(geojson);
}
}
What worked for me in a non-leaflet form previously was this code withing the function
$("#parkform").submit(function (e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: "findPark.php",
data: form.serialize(),
success: alert('Marker Map'),
})
});
Any help appreciated!

It's not really clean, but you can do $('body').html(data) on success:
$("#parkform").submit(function(e) {
e.preventDefault();
var dataForm = $(this).serialize();
var url = form.attr('action');
$.post(
url,
dataForm,
function(data) { // on success
$('body').html(data);
}
);
});
Because the data is the code response of your request, then it's the same page with POST array values.

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

Ajax form with separate action values

I have a contact form with multiple submit buttons which have different action values.
<form action="confirm.php" data-query="send.php" method="POST" class="form">
I am using data-query attribute to fetch action link for one of the submit buttons.
<input type="submit" name="submit1" id="submit1">
<input type="submit" name="submit2" id="submit2" value="Submit B">
Ajax code is below:
<script>
$(function() {
$('#submit2').click(function(e) {
var thisForm = $('.form');
e.preventDefault();
$('.form').fadeOut(function() {
$("#loading").fadeIn(function() {
$.ajax({
type: 'POST',
url: thisForm.attr("data-query"),
data: thisForm.serialize(),
success: function(data) {
$("#loading").fadeOut(function() {
$("#success").fadeIn();
});
}
});
});
});
})
});
</script>
I am getting the success message but the php code isn't getting executed.
The PHP code is working fine without the AJAX method.

.serialize() doesn't give you button values, you'll have to add it manually, something like
data: thisForm.serialize()+'?button2=Submit%20B',

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

Remove Form After Submit Jquery (JSP&Servlet)

I want To submit multiple form using Jquery (ALready done) but the problem is .. every time after submit i want the form is remove from list form Here's My JSP code
<form action="searchTweet" method="post">
<textarea name="searchTxt"></textarea>
<input type="submit" name="post" value="Search"/>
</form>
<%
if(session.getAttribute("twitModel")!=null)
{
List<TwitterModel> twit=(List<TwitterModel>)session.getAttribute("twitModel");
int count=0;
for(TwitterModel tweet:twit)
{
count=count+1;
%>
<p>
#<%=tweet.getScreenName()%> : <%=tweet.getTweet() %>
<form id="form2" method="post">
<input type="hidden" name="screenName" value="<%= tweet.getScreenName() %>">
<input type="hidden" name="tweet" value="<%= tweet.getTweet() %>">
<input type="submit" class="update_form" value="Save"> <!-- changed -->
</form>
</p> <% } } %>
My Jquery for multiple submit form
<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
$.ajax({
type: "GET",
url: "saveSearch",
data: $(this).parent().serialize(), // changed
success: function(data)
{
$(this).parents('p').remove();
}
});
return false; // avoid to execute the actual submit of the form.
});
Any idea what i'm doing wrong??
Thank's
Regards
Danz

I guess your this has changed to global window variable inside the success function, try this for once:
$(".update_form").click(function() { // changed
var me = this;
$.ajax({
type: "GET",
url: "saveSearch",
data: $(this).parent().serialize(), // changed
success: function(data)
{
$(me).parents('p').remove();
}
});
return false; // avoid to execute the actual submit of the form.
});
read up on closures

this inside the success handler refers to the ajax object, not the clicked button. In this case you can use a closure variable to fix the issue.
Also not the use of .closest() instead of .parents()
$(".update_form").click(function () { // changed
var $this = $(this);
$.ajax({
type: "GET",
url: "saveSearch",
data: $(this).parent().serialize(), // changed
success: function (data) {
$this.closest('p').remove();
}
});
return false; // avoid to execute the actual submit of the form.
});