How to make javascript work as a response to php events?

Question

I am developing a website for practice, and I would like to know how to use JS to notify the user that the username he picked is already in use, all works fine, if my function(check_username) returns false, the user succesfully registers himself into the site, otherwise the register won't happen.

When the user can't register I would like to know how can I notify the user with a js script.

<?php 
    //database includes
    include_once('../config/init.php');
    include_once('../database/users.php');

    if(!check_username($_POST['username'])) {
        insertUser($_POST['name'], $_POST['username'], $_POST['email'], $_POST['pass']);
    }
    else header('Location: ../index.php');
?>

you should post the request via xmlhttprequest and parse the response — user757095
– user757095, Commented May 12, 2015 at 16:08
There is no way to call JavaScript functions from PHP directly. If you want to notify the user after the form has been submitted, there's no reason to use Javascript; just change your HTML output to include the error message. In your case, you may want to do the username validation via AJAX before the form is submitted and stop the registration process from continuing if the username is already taken. — Charles R
– Charles R, Commented May 12, 2015 at 16:20
@CharlesR that seems to be the way to go. Do you where can I learn how to use an AJAX call to do so? — Carlos Pereira
– Carlos Pereira, Commented May 12, 2015 at 16:22
@CarlosPereira There are multiple online tutorials on how to do username availability checks. Here is one that uses jQuery instead of vanilla JavaScript: web.enavu.com/tutorials/… . Basically you just set up a PHP script that will get the result of check_username() for a specific username and give that result back to JavaScript. — Charles R
– Charles R, Commented May 12, 2015 at 16:28

Hanky Panky · Accepted Answer · 2015-05-12 16:07:34Z

2

One way would be to change your redirect on failure to a javascript message

else
{
  echo "<script>alert('Username already exists');</script>";
}

That's a very trivial example to get you started since you mentioned you're learning JS. You can build a lot of improvements on that.

answered May 12, 2015 at 16:07

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carlos Pereira Over a year ago

Ok so that makes sense considering what I've said, thanks. But considering that page is an action page, how could I do the alert in the form page?

Hanky Panky Over a year ago

That will require use of AJAX, there are a lot of posts of that on SO. Please have a look around. Adding that to the answer will become something redundant.

R3tep · Accepted Answer · 2015-05-12 16:08:49Z

1

You can set the returns into a javascript variable and use it to display message if the user is not registered.

var x = <?php echo check_username($_POST['username']); ?>;
if(x) {
    alert("You are not registered");
}

answered May 12, 2015 at 16:08

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

2 Comments

Carlos Pereira Over a year ago

That works, thanks @R3tep. Just another question, assuming I have a form for register, after that form is submitted, I use the code above in an action page, after I verify that the username is already in use, how could I display the alert in the form, like many websites do?

R3tep Over a year ago

@CarlosPereira I think you need AJAX to do that. Send your form via AJAX, and in the call back you can display your alert.

Tittu Vaghese · Accepted Answer · 2015-05-12 16:29:09Z

0

You can use php ajax for a live notification to users.

<script>
$(document).ready(function() {
	$("#InputFieldID").keyup(function (e) {
	
		//removes spaces from username
		$(this).val($(this).val().replace(/\s/g, ''));

		//Getting value of input field.
		var username = $(this).val();

		//Check only if the username characters are above 4
		if(username.length >= 4){
			$("#IndicatorDivID").html('<p style="color:#ffbf25;">Checking..!</p>');
			$.ajax({ 
    		type: 'POST', 
    		url: 'check_username.php',
			data: {"username": username},
			dataType: 'json',
			success: function (data) {
				if(data.response=='true')
				 alert("Already Exist");
			}
		});
	}
 });
});
//Username Checker
</script>

The result fo check_username.php must be in json format. eg: {"response":"false"}

answered May 12, 2015 at 16:29

Tittu Vaghese

2333 silver badges13 bronze badges

2 Comments

Carlos Pereira Over a year ago

sorry to keep bothering you but what happens if I have more than one php function in the file where check_username is, how can I make it work? Or do I need one separate file for that function?

Tittu Vaghese Over a year ago

Its easy, u can pass one more variable to the php file, data: {"username": username,"NewVariable":"SomeValue"}, And u can perform if else operation depends on the value you passed. ** You can use any number of functions in the php file.**

Collectives™ on Stack Overflow

How to make javascript work as a response to php events?

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related