What am I doing wrong? please… After clicking the submit button, It just reloads the page and nothing happens

  api, forms, jquery, php, submit

I am trying to integrate an api service on my website.

I am trying to pass values from my html form into the api CURLOPT_POSTFIELDS, and run the PHP function by clicking the html form button. But it just reloads the page and nothing more. Kindly help me check what I am doing wrong.

I have tried and tried to check on the internet, I just don’t seem to get it yet.

MY FORM

<form method="POST">
    <p> Phone Number: <input name="phn" value='' type='tel' id='phn' placeholder='e.g 08012345678' /> </p>
        <p> Network: <select name="network" value=''> 
        <option></option>
        <option value='1'>mtn</option>
        <option value='4'>glo</option>
        <option value='2'>airtel</option>
        <option value='3'>etisalat</option>
    </select>
    </p>
        <p> Amount: <input type='number' name="amt" value='' placeholder='e.g 1000' /> </p>
    <div style="text-align:center">
    <input type='submit' class="button" name="buttonid" />
    </div>

</form>

I am using this JQUERY Code to have the button activate the PHP function onclick

MY JQUERY

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
 <script type="text/javascript">
     $(document).ready(function(){
         $('.button').click(function(){
             var clickBtnValue = $(this).val();
             var ajaxurl = 'airtime.php',
             data = {'action': clickBtnValue};
             $.post(ajaxurl, data, function(response){
                 alert("action successful");
             });
         });
     });
     
 </script>

My PHP-CURL CODE where I am trying to post the form values and run the function when the button is clicked

MY PHP CODE

<?php

if (isset($_POST['action'])) {
        switch ($_POST['action']){
            case 'buttonid':
                callback_function_airtime();
        }
    }

    function callback_function_airtime(){

            $curl = curl_init();
            $network = $POST['network'];
            $phn = $POST ['phn'];
            $amt = $POST ['amt'];

            curl_setopt_array($curl, array(
              CURLOPT_URL => "https://smeplug.ng/api/v1/airtime/purchase?",
              CURLOPT_RETURNTRANSFER => true,
              CURLOPT_ENCODING => "",
              CURLOPT_MAXREDIRS => 10,
              CURLOPT_TIMEOUT => 0,
              CURLOPT_FOLLOWLOCATION => true,
              CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
              CURLOPT_CUSTOMREQUEST => "POST",
              CURLOPT_POSTFIELDS =>"{rnt"network_id":" . $network . ",rnt"phone": "" . $phn . "",rnt"amount":" . $amt . "rn}",
              CURLOPT_HTTPHEADER => array(
                "Authorization: Bearer 4ab8fb30d7d4f2a27c32623b2224b05414fad349b4df1d5f227fc6e530fa0087",
                "Content-Type: application/json",
              ),
            ));


            $response = curl_exec($curl);
            $err = curl_error($curl);
            $results = json_decode($response);

            curl_close($curl);
            var_dump($results);
            
            if ($err){
                echo "cURL error #:" .$err;
            }   else {
                echo $response;
            }
            
            
}   
?>

Source: Ask PHP

LEAVE A COMMENT