Detect users input values from any wordpress form - wordpress

I'm trying to develop a wordpress plugin, I need to get users input data from any form in a specific page (not knowing its action) I come up so far with this solution which is to get values using javascript and then passing it to php:
jQuery(function ($) {
$(document).ready(function(){
$( "form" ).submit(function( event ) {
if($( "form" ).valid()){
var inputs = $( "form input" );
var inputValues = [];
inputs.each(function(index){
if($(this).attr('type') !== 'submit')
inputValues.push($(this).val());
});
}
event.preventDefault();
});
});
});
I tried to pass the Javascript variable inputValues to my plugin using Ajax
$.ajax({
type: 'POST',
url: '../wp-content/plugins/myplugin/myplugin.php',
data: {'variable': inputValues},
});
But I get problems with the url for some pages and I couldn't use $_POST['variable'] in myplugin.php file.
Is there a way to accomplish what I'm trying to do, or do you know an alternative solution?
Thanks in advance.

in terms of how to implement AJAX calls using WordPress, please check out the WordPress Codex. You're not doing it correctly.
JavaScript seems like a round about way of doing this. I would suggest to hook into one of hooks that are being called almost every single time like template_redirect (https://codex.wordpress.org/Plugin_API/Action_Reference/template_redirect).
Then you can check what's in the $_POST variable and do what you need to do with it. This would even Capture AJAX forms as long as the URL links to a proper AJAX WordPress endpoint.
Hope this helps

Related

How to prevent Contact Form 7 from clearing form on successfull submission

I need to prevent Contact Form 7 WordPress plugin from clearing form on successful submission. I want user to be able to keep editing the form (and possibly to resubmit it again).
Thanks.
I actually found a solution. You can just attach an event handler to reset event and then do e.preventDefault().
setTimeout( function(){
$( '.my-form form' ).on( 'reset', function(e) {
e.preventDefault();
});
},500)
It didn't work without the timeout, but this should be safe enough. Not many users can fill a form in under 0.5 second :-)
Maybe not a perfect solution but it works for my case.
EDIT: Here is a new version without the setTimeout (thanks to #Jan Myszkier)
$(document).on('reset', '.my-form form', function(e) {
e.preventDefault();
});
In JS wp-content/plugins/contact-form-7/includes/js/scripts.js around line 300 there's ajaxSuccess function described with the following piece:
if ( 'mail_sent' == data.status ) {
$form.each( function() {
this.reset();
} );
wpcf7.toggleSubmit( $form );
}
which might be just what you're looking for because this.reset(); resets the field one by one within the form after successful status.
EDIT: Following your information you want to modify the behaviour but not change the plugin, you can use the events that come with CF7.
https://contactform7.com/dom-events/
add wpcf7submit watcher to store the data in the localstorage and add another watcher (wpcf7mailsent this time ) to write the data back to the form.

Load data in database without refreshing web page

What is the best way or the best programming language or tool to use if i want to load data from web page in a database without refreshing the page ?
$(document).on("click", ".load", function(event) {
var id = $( this ).attr( "data-id" );
$.ajax({
method: "POST",url: "/url/to/ajax",
data: {id: id}
}).done(function( data ) {
$( "body").html(data);
});
});
Use AJAX from the web page to send data to the backend, then the backend should take care of the data received to save it in the database.

Autofill an external form in an iframe from... another form

I'd like to point your kind attentions to my question, topic should be similar to this post.
In a WP website i have two columns:
Column n.1 There is a CF7 form that is autofilled by an url from a CRM and injects data to a GSheet.
Column n.2 There is an iframe for booking an appointment with an external calendar tool that should pick data from the form (i have no way to edit form, but just the iframe link, for example:
Is there the possibility for this link to "pick" the data from the form or also from the crm url? Do you think that is possible or am I a fool?
Many thanks for your help :)
You should look into using JavaScripts postMessage() functionality to pass data to/from iFrames.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Use something like this on the WordPress page
// This will get the value of the input and send it to the iFrame on the fly
$('#form-id input:not([type=submit])').each(function() {
var val = $(this).val();
$(window).postMessage(val);
});
Then on the iFrame page:
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the WP page
eventer(messageEvent, function(e) {
if (e.data.length < 1) return;
// jQuery
$('#input-id').val(e.data);
// Pure JS
document.getElementById('input-id').setAttribute('value', e.data);
}, false);
If the forms on different domains I think this is the only method for doing this.

Many-to-Many Ajax Forms (Symfony2 Forms)

I have a many-to-many relationship in mongodb between Players and Tournaments.
I want to be able to add many Players to a Tournament at once. This is trivial to do without ajax, but we have a DB of thousands of Players, and so the form select becomes huge.
We want to use ajax for this. Is it possible to create a single widget (with js) to handle this properly? If so, any hints on what jquery plugin (or other) to use?
If not, whats the standard strategy to do this? I suppose I could heavily change the view for this form and use an ajax autocomplete to add one player at a time, and then some more code to delete each player one at a time. However, I'd really like to have a single widget I can re-use because its so much cleaner and seems much more efficient.
I have been playing with Select2 all day (similar to jQuery Chosen) and I have it working for adding many Players via ajax, but it does not allow me to set the already attached players when I initially load the page, so I won't be able to see who's already in the tournament and would have to retype everyone in.
Thanks for ANY input on this matter! I can't find anything via Google.
I was able to accomplish this by $.ajax after the constructor within the onload function where //website/jsonItem is a json-encoded list of all items, and //website/jsonItemUser is a json-encoded list of all items attached to user. I used // to keep the https/http consistent between calls.
$(document).ready(function(){
$('.selectitem').select2({
minimumInputLength:0
,multiple: true
,ajax: {
url: "//website/jsonItem"
,dataType: 'jsonp'
,data: function (term, page) {
return {
q: term, // search term
limit: 20,
page: page
};
}
,results: function (data, page) {
var more = (page * 20) < data.total;
return {
results: data.objects, more: more
};
}
}
,initSelection: function(element, callback){
var items=new Array();
$.ajax({
url: "//website/jsonItemUser"
});
callback(items);
}
});
$.ajax({
url: "//website/jsonItemUser"
,dataType: 'jsonp'
,success: function(items, status, ob) {
$('.selectitem').select2('data',items);
}
});
});

Google Custom Search, how to run by querystring value?

Hey I have signed up for the google custom search and its working reasonably well.
So basically it generated a Javascript code for me to use.
I was wondering how can I get it to work by also accepting a value from querystring ?
Cheers
I've used the following vb.net code to achieve this:
google.load('search', '1', { language: 'en' });
google.setOnLoadCallback(function () {
var customSearchControl = new google.search.CustomSearchControl('[your se code here]');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
customSearchControl.execute('<%=server.htmlencode(request.querystring("searchterm"))%>');
}, true);

Resources