Help with validating web Form from ajax

  • (2 Pages)
  • +
  • 1
  • 2

28 Replies - 1486 Views - Last Post: 01 May 2020 - 12:44 PM Rate Topic: -----

#16 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 11:00 AM

Right, it looks like in the error response all you do is alert "Error" and nothing else. If you want to close the box there, then close the box.
Was This Post Helpful? 0
  • +
  • -

#17 Ornstein   User is offline

  • D.I.C Head

Reputation: 103
  • View blog
  • Posts: 209
  • Joined: 13-May 15

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 11:39 AM

Are you sure your PHP is working as intended, etc?

$data[‘success’] = true;
echo $name;
echo $email;

   exit;


This part doesn't look quite right.
Was This Post Helpful? 0
  • +
  • -

#18 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 04:27 PM

Thanks for your replies.
It now successfully sends the Form info, shows ‘Success!!’ and then successfully closes the box(Form). However, there are a few things that need to be improved:

First, when nothing is entered into the Form fields (and submit/continue is selected) no Error appears even though the php has this:
    if (empty($_POST['name']))
      $error['name'] = 'Name is required';

    if (empty($_POST['email']))
     $error['email'] = 'Email is required';

(and the Form/jBox correctly does not close).

The only time a message is displayed is when anything is entered into the fields (and submit/continue is selected), it shows "Success!!". The "Success!!" message apparently comes from (the js code) here(not the php):

        success: function (response) {
		console.log(response);
    	if (response.success)
    	{
    	myConfirm.close()
		alert('Success!!')
        } else {
	alert('You have an Error');


So, the second issue is that the Form completes/succeeds no matter what is entered into the Form fields. After solving the first issue, I'm hoping to get some assistance with a remedy to not allow the Form to proceed without a proper email address. Here's the current php code (submit.php):


header('Content-type: application/json');
$errors         = array();  
$data           = array();  

    if (empty($_POST['name']))
        $errors['name'] = 'Name is required';

    if (empty($_POST['email']))
        $errors['email'] = 'Email is required'
    if ( ! empty($errors)) {

        $data['success'] = false;
        $data['errors']  = $errors;
    }

	if(empty($errors)) {

	$to = '[email protected]';
	$subject = 'Thank You';
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$message1 = $_POST['message'];
	$headers = $name;
	$headers = 'from: [email protected]';

	$message1 .= "\r\n\r\nName: ".$_POST['name']." \r\n Email: ".$_POST['email']." ";

	$message = "Hello {$_POST['name']}, ~ Thank you\r\n\r\n";

   		mail( $to, $subject, $message1, $headers );
   		mail( $email, $subject, $message, $headers );
		$data[‘success’] = true;
	
  	$response['success'] = true;
	echo json_encode($response);
}



and the js code:

var myConfirm;

$(document).ready(function() {

  myConfirm = new jBox('Confirm', {
    content: $('.my-jbox-form'),
    width: 830,
    height: 205,
    cancelButton: 'Return Home',
    confirmButton: 'Continue',
    closeOnConfirm: false,
    closeOnEsc: false,
    confirm: function() {
      $.ajax({
      	url: 'https://....com/submit.php',
        method: 'post',
        data: {
        	name: $('#name').val(),
        	email: $('#email').val()
        },
        success: function (response) {
		console.log(response);
    	if (response.success)
    	{
    	myConfirm.close()
		alert('Success!!')
        } else {
	alert('You have an Error');
	}
	}
      });
      return false;
    }.bind(this),
    cancel: function() {
      //disable(),
      window.location.href = "/index.html";
    }
  }).open();
});



Any additional guidance is appreciated.

This post has been edited by chrisjchrisj: 27 April 2020 - 04:35 PM

Was This Post Helpful? 0
  • +
  • -

#19 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 05:34 PM

I don't know how all of your plugins work, but all of your response messages are in the ajax success handler. Maybe they're depending on a value from PHP for whether or not to determine success, if so then setting success to false will not call the success handler in Javascript. You'll need to check the documentation for the things you're using though.

You can use filter_var to validate an email address.
Was This Post Helpful? 0
  • +
  • -

#20 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 06:09 PM

Thanks for your reply.
Yes, I believe they're "depending on a value from PHP for whether or not to determine success".
I changed this $response['success'] = false; as I believe you suggested, and now the result is when that when anything is entered into the Form fields (and submit is selected) the message is "Error" (from the js code).

Any additional ideas/suggestions are appreciated.
Was This Post Helpful? 0
  • +
  • -

#21 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 08:42 PM

OK, so what do you see in the console? Do you see the whole object that you expect to see printed out, whether or not you change the success value?
Was This Post Helpful? 0
  • +
  • -

#22 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with validating web Form from ajax

Posted 27 April 2020 - 09:49 PM

Thanks for your reply.
When the php is:

$data = ['success' => true];
$response['success'] = true;


Console shows: {success: true}


When the php is:

$data = ['success' => true];
$response['success'] = false;


Console shows: {success: false}

I look forward to any additional guidance.
Was This Post Helpful? 0
  • +
  • -

#23 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 28 April 2020 - 12:08 AM

OK, so it's printing $response, right? So you can remove $data from your code. You're not printing it out or doing anything else with it, so might as well remove it, right? Might as well make an effort to look at and understand your code and remove anything that doesn't need to be there. So after you do that, what's the new code and what does it do?
Was This Post Helpful? 0
  • +
  • -

#24 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with validating web Form from ajax

Posted 30 April 2020 - 01:17 PM

Thank you for your replies/help.

It now works successfully with this code:

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.css" rel="stylesheet">

<script>
var myConfirm;

$(document).ready(function() {

  myConfirm = new jBox('Confirm', {
    content: $('.jboxform'),
    width: 830,
    height: 205,
    cancelButton: 'Return Home',
    confirmButton: 'Continue',
    closeOnConfirm: false,
    closeOnEsc: false,
    confirm: function() {
      $.ajax({
      	url: 'https://...web-domain../submit.php',
        method: 'post',
        data: {
        	name: $('#name').val(),
        	email: $('#email').val()
        },
        dataType: "json",
        success: function (response) {
		console.log(response);
    	if (response.success)
    	{
        myConfirm.close(),
        alert('Success')
        } else {
	alert('Error');
	}
	}
      });
      return false;
    }.bind(this),
    cancel: function() {
      //disable(),
      window.location.href = "/index.html";
    }
  }).open();
});
</script>


However, when I moved the files to a different domain, it doesn't display 'error' or 'success' upon submit(continue), and nothing shows in web Console.

I have tried may things to solve this mystery, without success. Any ideas/suggestions to resolve are welcomed.
Was This Post Helpful? 0
  • +
  • -

#25 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 30 April 2020 - 02:01 PM

If you have Javascript on a page on one domain and you're trying to send a request to a different domain, it's going to be blocked by default. Look up CORS for that. Otherwise, host your project on a single scheme/domain/port.
Was This Post Helpful? 0
  • +
  • -

#26 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with validating web Form from ajax

Posted 30 April 2020 - 02:38 PM

Much thanks for your reply.

Regarding "If you have Javascript on a page on one domain and you're trying to send a request to a different domain, it's going to be blocked by default".

I appreciate your reply, however, I'm not using two domains for the one project. The files html & php worked on the test domain, but the same files html & php did not work on the new one (both domains are on the same server).

I have since compared phpinfo.php of both domains. It appears that the domain where it all works successful has php 5.6 and json 1.2.

The new domain, where the html & php files don't display 'error' or 'success' upon submit(continue), and nothing shows in web Console, has php 7.0 and json 1.4.

So, now I seem to be back to trying to determine why no 'error' or success' messages display upon submit(continue) of the Form. I posted the lastest javascript from the html file here earlier today, and here is the php file code:

header('Content-type: application/json');

$errors         = array(); 

if (empty($_POST['name']) || empty($_POST['email'])) {
  $response['success'] = false;
} else {
  if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $response['success'] = true;
  } else {
    $response['success'] = false;
  }
}
echo json_encode($response);

    if ( ! empty($errors)) {

        $data['success'] = false;
        $data['errors']  = $errors;
    }

    if(empty($errors)) {
	$to = '[email protected]';
	$subject = 'Thank You';
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$message1 = $_POST['message'];
	$headers = $name;
	$headers = 'from: [email protected]';

	$message1 .= "\r\n\r\nName: ".$_POST['name']." \r\n Email: ".$_POST['email']." ";

	$message = "Hello {$_POST['name']}, ~ Thank you\r\n\r\n";

   		mail( $to, $subject, $message1, $headers );
   		mail( $email, $subject, $message, $headers );

	$response['success'] = true;
}


Any ideas on why the html & php files work successfully with the older versions, but not with the newer versions, will be greatly appreciated (unless it is something else other than the 'version' issue).

This post has been edited by chrisjchrisj: 30 April 2020 - 02:39 PM

Was This Post Helpful? 0
  • +
  • -

#27 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 30 April 2020 - 03:07 PM

I don't see an issue. Make sure that PHP is set to log error messages and check the error log.
Was This Post Helpful? 0
  • +
  • -

#28 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with validating web Form from ajax

Posted 01 May 2020 - 09:25 AM

Thanks as always for you replies.
After setting the error log - miraculously it all works now.
If you have any suggestion for some kind of honeypot protection for the Form, I'd be interested in any suggestions.
Or if I should start a new thread, on that topic, let me know.
Was This Post Helpful? 0
  • +
  • -

#29 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: Help with validating web Form from ajax

Posted 01 May 2020 - 12:44 PM

If you're talking about a captcha, there are several open-source ones you can use. You could also do something like naming your real fields random names but having hidden fields with common names and rejecting things with the hidden fields filled out, but that will stop people from using autofill on their browser.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2