We Keep Coding

Put get parameters into post request

I am submitting a form via an ajax post request but there is a possibility that there is also one get parameter and if the get parameter is set it must be included in the post request.
I currently have this:
jQuery(document).ready(function($) {
$("#plugin_check").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
cache: false,
url: actionUrl,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
$("#result").html(data); // show response from the php script.
}
});
});
});
I need to figure out how to put $_GET['datesort'] into the post data.

you can try this, create variable to save datesort and add this to ajax data
jQuery(document).ready(function($) {
$("#plugin_check").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var datesort = urlParams.get('datesort')
$.ajax({
type: "POST",
cache: false,
url: actionUrl,
data: form.serialize() + `&datesort=${datesort}`, // serializes the form's elements.
success: function(data) {
$("#result").html(data); // show response from the php script.
}
});
});
});

Updating div content after form submit without page reload

alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.

Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>

You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);

Multiple form submit with only one jQuery Ajax

I have a page where is 3-4 form in divs, and I want to submit it with only one script and I want to refresh the actual div content (where is the form). But I don't know how to specify the actual div or form for the ajax post.
$(document).ready(function(){
$(".ajaxform").submit(function() {
var id = $(this).attr('id');
var dataString = $(this).serialize();
$.ajax({
url:'../tools/tools.php',
data: dataString + '&form=' + id,
type: 'POST',
success: function(html)
{
$('#actualdiv').load(document.URL + ' #actualdiv');
}
});
});
});
The forms or divs have unique id for the tools.php where I can run the actual form's mysql.

Since you are posting data and then receiving new forms back as a response, I would make the function more dynamic.
function loadNextForm(form, id){
var dataString = form.serialize();
$.ajax({
url:'../tools/tools.php',
data: dataString + '&form=' + id,
type: 'POST',
success: function(newForm) {
$('#actualdiv').html(newForm);
}
});
}
$(document).ready(function(){
$(".ajaxform").on("submit", function(){
loadNextForm($(this), $(this).attr('id'));
});
});
This should allow you to POST the data, get the new form, place it into the DIV, and allow it to be a functional form that can process the next form.

detect which button has been clicked and submit with ajx

I need help getting a value of a clicked button and send this information using AJAX. the two scripts work individually. but i need the "buttonvalue" to be passed to AJAX "data" value "action". what i am using is below.
$("document").ready(function(){
$(".js-ajax-php-json").on("click", "button[name=mysqljob]", function (){
var buttonvalue = $(this).attr("value");
alert(buttonvalue);
});
$(".js-ajax-php-json").submit(function(){
var data = {"action": buttonvalue};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "phpVars/ajaxUpload.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$(".the-return").html(
data["form"]
);
// alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});

I would prevent the form from submitting do what you want then post the data via an ajax call. Try the following:
$("document").ready(function(){
$(".js-ajax-php-json").on("click", "button[name=mysqljob]", function (e){
e.preventDefault();
var buttonvalue = $(this).attr("value");
var data = {"action": buttonvalue, "formData": $(this).serialize() + "&" + $.param(data) };
$.ajax({
type: "POST",
dataType: "json",
url: "phpVars/ajaxUpload.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$(".the-return").html(
data["form"]
);
// alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});
Not tested.

Ajax Form Cannot Prevent Page Reload with event.preventDefault();

I have the following code which is supposed submit a form via Ajax without having to reload the page:
$( document ).on('submit', '.login_form', function( event ){
event.preventDefault();
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
});
However for some reason, despite the event.preventDefault(); function which is supposed to prevent the form from actually firing, it actually does fire.
My question is, how do I prevent the above form from reloading the page?
Thanks

don't attach a listener on document instead use a on click handler on the submit button and change the type to button.
<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){
//do ajax here
});
Happy Coding !!!

for instance you can write like this
$(".login_form").on('submit', function( event ){
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
event.preventDefault();
});

You can use jquery and ajax to do that. Here is a nice piece code below that doesn't refresh the page but instead on submit the form gets hidden and gets replaced by a thank you message. The form data is sent to an email address using sendmail.php script.
Assuming your form has 3 input fields - name, email and message.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#button").click(function() {
var name=jQuery('#name').val();
var email=jQuery('#email').val();
var message=jQuery('#message').val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
jQuery.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function() {
jQuery('#contact_form').html("<div id='message'></div>");
jQuery('#contactForm').hide();
jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide()
.fadeIn(1500, function() {
});
}
});
return false;
});
});
</script>
On top of your form tag just add this to display the thank you message.
<div id='message'></div>
Enjoy coding!!!!!!!