I have this working:
jQuery( "input" ).on("blur", function(){
jQuery.ajax({
type: "POST",
url: jQuery(this).closest("form").attr("action"),
data: jQuery(this).closest("form").serialize()
});
});
Unfortunately, the above serializes the entire form, which I don't want. I only want to pass the field that was changed. By the way, I don't have access to the form, just the html. Any help? Could the form.php REQUIRE that all parameters are sent? It is a framework I'm sending this to that processes all the database injections. Any idea why the following won't work?
jQuery( "input" ).on("blur", function(){
jQuery.ajax({
type: "POST",
url: jQuery(this).closest("form").attr("action"),
data: jQuery(this).serialize()
});
});
Use:
jQuery( "input" ).on("blur", function(){
var obj = {};
obj[this.name] = this.value;
jQuery.ajax({
type: "POST",
url: jQuery(this).closest("form").attr("action"),
data: obj
});
});
serialize() function is used for form submit, not just input. Then if you want to pass just current edited input, pass name and value as object to data parameter. jQuery will serialize data in object for you.
Related
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.
}
});
});
});
I was trying to upload a form using jQuery's submit() and success in redirect the page to uploadAll.php, but when I was trying to get the input array using $_POST['inputname'] I can not obtain the value.
I was trying to use serialize() but I get confused in where I should put my PHP page reference.
<form id="regForm" action="uploadAll.php" method="post" enctype="multipart/form-data">
//some inputs and a hidden input here
</form>
document.getElementById("regForm").submit(function() {
var inputValues = $(this).serialize();
$.ajax({
url: "uploadAll.php",
type: "POST",
data: inputValues
}).done(function(data) {
alert(data);
});
});
return false;
Can I just submit without using serialize()? It seems my serialize does not work. Any help is appreciated
trust me, your code is wrong..
try use this code instead:
$("#regForm").on('submit', function(e) {
e.preventDefault();
var inputValues = $(this).serialize();
$.ajax({
url: "uploadAll.php",
type: "POST",
data: inputValues
}).done(function(data) {
alert(data);
});
});
I'm having an issue with AJAX as for some reason it either isn't being called or isn't working
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$("server-results").html(data);
}
});
$('#loadingDiv').hide().ajaxStart(function() {
$(this).show();
});
//.ajaxStop(function() {
// $(this).hide();
//});
});
});
I've debugged as much as I could and there is no issue with the form function being activated in JavaScript or the 3 variables being transported into the JS code block. However ajaxStart doesn't activate which makes me believe that the problem is with just ajax.
I also checked the link to ajax and it seems to be working however I'm not sure if its the right link or if it's not valid for whatever reason.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
FYI the ajax link is at the top of the page above both HTML and JS.
You have passed wrong parameters:
type: post_url,
url: request_method,
You need to pass post_url in url and request_method in type. Just change it to:
type: request_method,
url: post_url,
$("server-results").html(data); here you have not specified if server-results is a class or id and therefore the output of the server will never be printed on the page
jQuery .ajaxStart()
As reported in jQuery's official documentation, the ajaxStart event can not be activated by the #loadingDiv element, but you must use the document.
$( document ).ajaxStart(function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
});
Summing up the code should be something like this.
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$(".server-results").html(data);
}
});
$(document).ajaxStart(function() {
$('#loadingDiv').show();
});
.ajaxStop(function() {
$('#loadingDiv').hide();
});
});
});
I was wondering if its possible to send a query to the database on the beforeunload event.
$(window).on('beforeunload',function() {
console.log('beforeunload called. run query');
});
If so, how would I do it? I need to run a query to insert dynamic values into the database.
You could try this, but beware that the onbeforeunload event is limited for certain browsers..
window.onbeforeunload = mySession;
function mySession(){
$.ajax({
url: "/../../myPHP.php",
async: false,
type: "GET"
});
return "WhatEverMessageYouFeelLike";
}
and your PHP executing query from AJAX handling..
$delete = "DELETE FROM MyTable WHERE id=" .$_SESSION['mySessionVariable'];
// your query..
Use a jQuery AJAX call. Assuming you're POSTing your data, try this:
$.post(
'your/url',
{
your : "Post Vars"
},
function(data) {
// not sure if you'll need to do anything here actually.
},
'json' // or 'html', or whatever you want your return format to be
);
I thinks the best way to use post by jQuery is $.post() method.but u can also use $.ajax
Sample way to use is
jQuery
$.post( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
jQuery Ajax
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
I have the following ajax call.
My addList variable holds a string: list=Sports&list=Cars&list=Outdoor&new_list=123123
I want to grab the addList in my PHP file as
$_POST['list'] is an array with values Sports, Cars, Outdoor
$_POST['new_list'] is a string 123123
But I couldnt convert the POST string into right forms.
I can create arrays/loops in both sides but it didnt feel right.
Whats the convenient way of doing it?
jQuery.ajax({
type: "post",
url: ajax_var.url,
data: "action=post-list&nonce="+ajax_var.nonce+"&post_list=&post_id="+post_id+"&" + addList,
success: function(count){
alert("done");
}
});
Any help will be appreciated. thanks!
try using followig code.
you just neeed to locate your form if and url to pass values to :
var form = new FormData($('#form_id')[0]);
form.append('view_type','addtemplate');
$.ajax({
type: "POST",
url: "savedata.php",
data: form,
cache: false,
contentType: false,
processData: false,
success: function(data){
//alert("---"+data);
alert("Settings has been updated successfully.");
window.location.reload(true);
}
});
this will pass all form element automatically.
Working and tested code.
When you pass variable with the ajax method from jQuery, you can pass array like this :
jQuery
var myArray = newArray();
myArray.push("data1");
myString = "data2";
jQuery.ajax({
type: "post",
url: ajax_var.url,
data: {array:myArray, param2:myString},
^name ^value
success: function(count){
alert("done");
}
});
PHP
echo $_POST['array'][0]; // data1
echo $_POST['param2']; // data2
Change your addList variable to this:
list[]=Sports&list[]=Cars&list[]=Outdoor&new_list=123123
PHP will parse the items named list[] into an array, and you'll find the values as $_POST['list'][0],$_POST['list'][1],$_POST['list'][2]