Sending data between two php functions using ajax - javascript

I am currently working on user verification on the website. What I am trying to do is to ask the user to input the credentials and push the "send confirmation" button, then send the code to the user using something (SMS or messenger) and make the user insert this code into the field and click "confirm" to check if it is correct. The Issue that I am facing right now is how do I pass the correct code from one PHP function (which I currently call using ajax) to the other. For obvious reasons of security I can't just send the code through JavaScript, but you are welcome to prove me wrong :) . Here is the HTML that I have:
<button type="button" onclick="send_sms()">Send verification</button><br>
Code from the SMS: <input type="text" id="fi" value=""><br>
<p id="res"></p>
<button type="button" onclick="check_sms()">Check</button>
<script>
function check_sms() {
jQuery.post(
ajax_object.ajax_url,
{action: "confirm_sms",
code: document.getElementById("fi").value
},
function( response ) {
// showing the result of confirmation
document.getElementById("res").textContent = response;
}
);
}
function send_sms() {
jQuery.post(
ajax_object.ajax_url,
{action: "send_sms",
phone: document.getElementById("phone").value
},
function( response ) {
// temporarely showing the code in console (shold not be there 🤫)
console.log("not an sms, but the code for now is " + response);
}
);
}
</script>
Now, in functions.php I have:
add_action( 'wp_ajax_confirm_sms', 'confirm_sms' );
function confirm_sms() {
$code = $_POST['code'];
// yes, I know that it will not output anything after, but it is beside the point anyway.
// and yes, I will not send the real code as the output of the function (just for testing)
wp_send_json($_SESSION['real_sms_code']);
if ($code != $_SESSION['real_sms_code']) {
wp_send_json('The code is not correct, please, try again');
return;
}
wp_send_json("Nice code, awesome balls!");
}
add_action( 'wp_ajax_send_sms', 'send_sms' );
function send_sms() {
// my attempt at storing the code, not the same session as I suspected, but was worth a try
$_SESSION['real_sms_code'] = strval(rand(100000, 999999));
wp_send_json($_SESSION['real_sms_code']);
}
The issue here is that the confirm_sms function always outputs 'None' (It should be the code set by the other function) and I can't figure out how to fix that. I was thinking about just creating a file containing this code, but
a) It is unreliable
b) I can't (reliably) identify which user the code belongs to since this is before they are registered
c) This may be slow with many users
There is got to be a better way of handling this.

So I have figured out the issue: I have copied the $_SESSION part from somewhere, but the guy there never mentioned that you have to use session_start(); before the functions in PHP. Now it works flawlessly. Kinda frustrating that I have lost a day because of someone not posting the whole code, please don't be like that :)

Related

Conceal URL in javascript code ( URL generated by PHP )

I am looking for a solution to the following:
I have a piece of JS code, that performs a redirection to a URL that is constructed with PHP, and that redirection is only done when the user presses a button on a confirmation dialog.
The code is, as follows:
function one() {
window.location.replace("<?php
if($new_redir == "1") {
echo "$new_second_redirect_URL/?token=$hash";
}
else {
echo "$second_redirect_URL/?token=$hash";
}
?>");
}
It works perfectly fine. What I wanna do is conceal the URL that is displayed in the source code when a user opens the page.
What would be the best way to do that?
You're thinking too much into this to be honest.
If they want to avoid the confirmation screen and get the URL from the source, there's not really much you could do.
The best really is possibly performing an AJAX request on confirmation and getting a CSRF token based URL from the response and using that, but that could end up being overkill as well.
You could also make it into an actual <form></form> form with a few hidden fields (again, such as a CSRF token), and perform the post validation onclick. If it a success - redirect them.
UPDATE:
Use robots.txt to stop bots
Build the QS with JS to stop most bots, something like:
var csrftoken='XJIWHEOU324uipHFOFUHR';
var url="http://url.com/page.php?token=";
url=url+csrftoken;
What you could also do, is something like us actually, although for your use case it could be too much.
Log every single page load into the DB, and check if if they're a first time visitor to the page after confirmation.
AJAX call (jQuery example):
$.post( "url_to_backend_page_to_get_url", {hasSubmittedForm:"true"}, function( data ) {
window.location.href = data;
});

Contact Form 7 not redirecting upon email sent

I have a form that I am trying to have redirect to http://www.example.com upon successfully sending an email. I have tried different approaches including on_sent_ok in the additional settings as well as
if(jQuery('.wpcf7-mail-sent-ok').length > 0)
window.location.replace("http://stackoverflow.com");
in my JavaScript, but that does not seem to work as well.
Edit: I forgot to mention that upon the user clicking submit, I do a prevent default in order to do some calculations and generate a PDF. Once it is all done I do
$("form.wpcf7-form").unbind('submit').submit();
to allow the submission to happen. Could this be causing any issues with the redirection?
Contact Form 7 made a ajax call. After success the element is inserted. Then you can check if element exist:
jQuery(document).ajaxComplete(function() {
if (jQuery('.wpcf7-mail-sent-ok').length) {
alert(1);
//window.location.replace("http://stackoverflow.com");
}
});
Well, maybe I'm writing late, but this code will definitelly will do the job. (If you're working in wordpress). I'm using it so far and it's working normally.
Remember to place this code at your functions's file and as final note remember that you must use one or the other, not both...!
add_action('wp_head', 'RedirectsCF7');
// Start of function.
function RedirectsCF7() {
if(is_page("contact-page-or-whatever-page-name-is")) {
echo "<script>document.addEventListener('wpcf7mailsent', function(event) {location = 'https://www.google.com/';}, false);</script>";
}
}
// Or simply add this code to all pages, like this.
if(!is_admin()) {
echo "<script>document.addEventListener('wpcf7mailsent', function(event) {location = 'https://www.google.com/';}, false);</script>";
}
}
Reference here

jQuery .post() not seeming to work, no error

I've seen several questions here with the similar subject but I can't find anything which is relevant to my situation. I am trying to build jQuery code that is able to build a list of items to save it in an inventory database and I am using .post() those to a additems.php that will add them to that database (after sensitization), as well as the current path name so the .php can send the user back to the same page.
The behavior I am getting is nothing whatsoever with no console error (except the 'this works' alert when I leave that in.) The behavior I am looking for is, the page should redirect to additems.php as an html form action would, execute the code there and redirect back to this page.
Here is my piece of code:
$(document).ready(function(){
$("#button").click(function(){
alert("this works");
var itemsarray = ['itemname'];
var itemattributesarray = ['itemattribute'];
var quantitiesarray = ['1'];
$.post('additems.php', {
items:{items: itemsarray},
itemattributes:{itemattributes: itemattributesarray},
quantities:{quantities: quantitiesarray},
returnpath: window.pathname
});
});
});
Thank you for your time and any suggestions. I've never used this site so please let me know how I can improve my question as well, if you have the time.
An alternative way is,
$.ajax({
'url':'additems.php',
'method' : 'POST',
'data':{
'items':itemsarray,
'itemattributes':itemattributesarray,
'quantities' : quantitiesarray
},
success: function(data){
//here you will get ajax response
console.log(data);
}
});

JS/JQuery/PHP - How to echo errors on form validate failure, and jump to div on success?

I have a fixed-position form that can be scrolled out onto the document and filled out anywhere on the page. If they fail to fill out the form properly, the errors are currently echod out onto the form, which is the intended design for that aspect. What I don't currently know how to do is, if the form is completed and $errors[] is empty, to use jQuery scrollTop() to jump down to the bottom.
Could anyone help me out with this? Current javascript involved is:
$("#A_FORM_submit_button").click(function() {
$("#FORM_A").submit( function () {
$.post(
'ajax/FORM_A_processing.php',
$(this).serialize(),
function(data){
$("#A_errors_").html(data);
}
);
return false;
});
});
The PHP involved is simply
if (!empty($errors)){
// echo errors
} else { // echo success message} <-- would like to jump to div as well
edit-- for clarity: not looking to make the page jump happen in the php file, so much as return a value for the jq $.post function to check and then perform an if/else
I might be jumping the gun here but I believe your design is wrong which is why you are running into this problem.
The ideal way of handling form validation is to validate forms via Javascript and when users enter in their information you immediately show some indicator to ask them to correct it. As long as the validation is incorrect, you should not be accepting a form request or making any AJAX calls.
In the off-chance that they do successfully send the data, you should be doing a validation check via PHP as well which, if failed, would redirect to the original page with the form. From there you could do whatever error handling you want but ideally you would retain the information they entered and indicate why it was wrong (Javascript should catch this but I guess if it gets here the user might have JS off or your validation logic might be wrong)
If I understand correctly, it seems like you are doing your error handling with Javascript (that's fine) but showing the error via PHP. As Hydra IO said don't confuse client-side and server side. Make them handle what they need to handle.
Hope this helps.
#aug described the scenario very clearly.
In code it translates in something like this
$('form').submit(function(){
form_data = $(this).serialize();
if(!validate(form_data))
{
// deal with validation, show error messages
return false;
}
else
{
// Submit form, either via Ajax $.post() or by just returning TRUE
}
});
The validate() function is up to you to work out.

Form data not passing to PHP file

The Program I'm writing and the functionality I'm trying to achieve
Okay. So what I'm writing at the moment is a very simple forum, in Javascript using AJAX. Part of my task is to add a new post, using an API that my lecturer wrote for us in PHP. Just to note, the API and the SQL database are completely local.
The function I am using to add this post is:
function addPosts()
{
// Add the new thread to the SQLlite database.
var treq = new Request({
url:'guestbook/control.php?action=insertPost',
'method':'post',
onSuccess: function() {
alert('win');
},
onFailure: function() {
alert('fail');
}
}).send(Object.toQueryString({
// Had to convert it to a query string because it wouldn't work as a normal object.
// These are the required values to send, to store a "post" in the database.
'name':'This is a name',
'comment':'This is a comment!'
}));
}
I am aware this will add the same data every single time. I'm just trying to get the damn thing working!
The problem
What is happening is, when this function is called, I am getting an SQL syntax error. I was confused, because that would imply that my lecturer's code is wrong. After speaking with my lecturer, he explained that this happens when the post data isn't sent correctly to the PHP code. So I went about using Google Chrome's developer tools to see what was going on, and this is what I discovered:
Now to me, this means that the data is successfully being loaded into the request, and is being passed to the PHP files fine. Obviously I'm wrong. I've been racking my brains trying to make this work.
I know that the API works fine, because everyone else in my class isn't having any problem with it, and the code I am using is practically a rip off of the code in the notes, so I'm about 90% sure that's correct to.
One thing to note is that the code in the onSuccess key runs, so I know it's not a problem on the AJAX side.
Another thing is that this code worked in University on those computers, and it's since I've got it home that it's decided not to work.
Stack Trace
Fatal error: Uncaught exception 'PDOException' with message
'SQLSTATE[HY000]: General error: 1 near ")": syntax error' in G:\Ajax
Coursework\guestbook\php\database.php:134Stack trace:#0 G:\Ajax
Coursework\guestbook\php\database.php(134): PDO->prepare('INSERT INTO
pos...')#1 G:\Ajax Coursework\guestbook\php\class.GuestBook.php(44):
DatabaseHandler->insert(Array)#2 G:\Ajax
Coursework\guestbook\control.php(8): GuestBook->insert(Array)#3
G:\Ajax Coursework\guestbook\control.php(56): insertPost()#4 {main}
thrown in G:\Ajax Coursework\guestbook\php\database.php on line 134
Object.toQueryString is used in convert an object to a query string. So if the server is requiring both $_POST['name'] and $_POST['comment'] to be set, it wont be.
Frankly because you are posting it, I dont think $_GET['name'] or $_GET['comment'] would be set either.
Request.send expects an opject. You are sending it a string. So it should be
Request.send({prop: 'value'}), not Request.send(value).
Do yourself a favor and make a PHP with the following php code, and see what it returns. It may clear this up for you right away. I have a feeling nothing is being sent except for $_GET['action']
<?php
echo '<pre>';
print_r($_GET);
print_r($_POST);
echo '</pre>';
?>
Just in-case anyone stumbles upon this thread looking for an answer:
function addPosts()
{
// Add the new thread to the SQLlite database.
var treq = new Request({
url:'guestbook/control.php?action=insertPost',
onSuccess: function() {
alert('win');
},
onFailure: function() {
alert('fail');
}
}).post('name=This is a name&comment=This is a comment!');
}
Here I'm using the .post method to POST data.

Categories