How to call php validation function using ajax

[pandglobal]

I have a html form and a validation php file for the form, every thing works when a user submits the form, but there are certain aspect of the function that i want the user to get in real time, such as if field A value is (yam) then unset field B
That's part of my function but it only works when the user submits the form, but i want to call it using ajax so that the php function is executed via an ajax call.

[AndreRet]

Please show us some code with a possible return of what you are asking, very unclear so not sure how to answer.

[pandglobal]

Html code

<form action="" method="post">
<input type="text" name="country" value="$_POST['country']"/>

<input type="text" name="phone"/>

<?php 
if ( $_POST['country'] == 'brazil') {
unset('  <input type="submit" name="submitpro"/>' );
echo 'we don't allow Brazil phone number';
}
?>

I embedded the php function inside the form so i would want to use jquery onkeyup or on mouseout to run that php in ajax so the submit button is hiden, i can hide it using jquery but i needed a more secure server end process but will be triggered in realtime even before the user submits the form.

[pandglobal]

I should have edited the main post and add this codes to it for clarity but i can't find where to edit the post so i posted my code above, please i really needs help in getting it to work in real time

I have tried the java location.reload() but it resets the page cleaning all users entered data without the function running

[deepaksh]

Regular expressions (REGEX) are the easiest way to verify the full name format in PHP. You can easily verify the first name and last name using regular expressions in PHP.

[AndreRet]

Lets start with your form submission, if you don't want yuor form to submit, change teh action behaviour by adding this -

<form id="myform" action="javascript:void(-1)"></form>

to load server side ajax, try the following -

$.post( "yourpagename.php, function( data ) {
    $("#mysubmitbuttonid").html(data);

    If (data == 'brazil') {
        //hide button...
    } else {
        //show button
        }
});

data is what is returned after you did all validations in your php page, use thsi data to hide or to show the submit button.

[pandglobal]

@andre i know how to hide and validate the function using jquery, but i don't want to use jquery to hide the form, or css because it will still show if the user disables his java or css in his browser.

But if a php unsets a data then its final, so my concept is to use java to trigger the function that unsets the submit button, without the user reloading the page.

Even if the user goes ahead to submit the form it returns an error and by this time the submit button have been unset by php.

All i needed is to help my client know that will happen if he submits to avoid submit and error server ends i want to save my client the stress of submitting and getting errors, so the java should secretly call the php function and return the effect immediately without the user knowing it.

[jkon]

Hello pandglobal it's not java it is JavaScript (and no , this not a technicality) .

You wrote:

i know how to hide and validate the function using jquery, but i don't want to use jquery to hide the form, or css because it will still show if the user disables his java or css in his browser.But if a php unsets a data then its final, so my concept is to use java to trigger the function that unsets the submit button, without the user reloading the page.

If you use AJAX that means that the user is having JavaScript enabled , so it doesn't make any sense. If you want to do it client side use JavaScript , if you want to do it only server side then you will need to submit the form , if you want to call PHP through AJAX then you still use client side JavaScript.

[pandglobal]

Thanks for your contributions @ jkon
But you didn't understand the scenario here,
Let me index it for proper understanding.

1. The validation is a server side validation written in php.

2. The purpose for using ajax to call the php validation file is to make the validation effect on real time. Example, if a user selects Brazil from the form and types his Brazilian phone number and submit the form will return with error and remove the form field for the phone number,

But what if such form field can be removed onkeyup jquery function, it will be more user friendly,
If the user has no JavaScript enabled in his phone then he is faced with the boring php validation.

Anyways can we leave what i intend to archive with it and show me how to call a php function using ajax and i will take it up from there, please.

[jkon]

A quick response , all in one file ( it is not a good idea to have php , html , JavaScript and Css in one file ) ... I have comments in many places , if you don't understand something (after reading those comments) feel free to ask

<?php
    /* the PHP part 
    (read first the html + JavaScript part and then this one in order to make sense
    */

   // very basic check that the call is AJAX
    if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
            && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == "xmlhttprequest")
    {
        if(isset($_POST["action"])) 
        {
            if($_POST["action"] == "validateCountry")
            {
                if(isset($_POST["country"])) // any logic you want here 
                {
                    $country = $_POST["country"];
                    $results = [];
                    $results["validation"] = "show";
                    if($country == "Brazil")
                    {
                        $results["validation"] = "hide";
                    }

                    // and having the results 
                    header("Content-Type: application/json; charset=utf-8");
                    echo json_encode($results);
                    exit;
                }
            }
        }
    }
?> 
<!DOCTYPE html>
<html>
    <head>
        <!-- loading jquery -->
        <script
             src="https://code.jquery.com/jquery-3.5.1.min.js"
             integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
             crossorigin="anonymous">
        </script>

        <style>
            /* 
                simple css to change the display of the phone input 
                after ajax validation
            */
            input[name='phone']
            {
                display: none;
            }
            input[name='phone'].on
            {
                display: inline-block;
            }
        </style>
    </head>
    <input type="text" name="country" value="" placeholder="country" length="20"/>
    <input type="text" name="phone" value ="" placeholder="phone"/>

    <script type="text/javascript">
        var xhr = null;
        /*
            (the ajax call xhr , we keep it as variable because we 
                may want to abort it , e.g. in case we perform a second one 
                before the first one returns results)
        */
        $("input[name='country']").on("keyup keydown"// I put here both keyup keydown 
                // because there is a chance of copy / paste 
                ,function()
                {
                    if(xhr != null)
                    {
                        xhr.abort(); // if we have another call in the way , abort it 
                    }

                    //creating the parameters object to pass through ajax call 
                    var params = {};
                    params.action = "validateCountry"; // anything you want 
                    params.country = $("input[name='country']").val(); 

                    xhr = $.ajax({
                        type: "POST",
                        //url:  //here you can put the url you like , leaving it empty 
                        // will post in the same page
                        data: params,
                        success: function(response){onSuccess(response);},
                        error: function(jqXhr,exception){onError(jqXhr,exception)},
                        cache: false,
                        dataType: "json"
                    });
                }
          );

          function onSuccess(response) // 
          {
                xhr = null; // making null our global xhr object because the call has been
                // completed 
                if(typeof response.validation != "undefined")
                {
                    if(response.validation == "show") // show the phone field 
                    {
                        $("input[name='phone']").addClass("on");
                    }
                    else // it means in this case that the country is Brazil 
                    {
                        $("input[name='phone']").removeClass("on");
                    }
                }
          }

          function onError(jqXhr,exception) // something went wrong 
          {
                xhr = null; // making null our global xhr object because the call has been
              // completed 
                if(exception !== "abort") // notice we abort the call when new data 
                    // so there in no meaning of checking abort 
                {
                     // do something with the error 
                }
          }
    </script>
</html>