Strange wheel spinning on a new page - How can i fix it

monsterit · June 10

Hi,

How can I stop this odd wheel spinning and allow the form to work please.

Screenshot2024-06-10153434.png.f188601425050b331f2808aaa09a4a92.png

Here are my files i've used for it.

newstarter.tpl -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Starter Request Form</title>
    <style>
        .form-header, .form-section {
            margin-bottom: 20px;
        }
        .two-columns {
            display: flex;
            justify-content: space-between;
        }
        .two-columns p {
            width: 48%;
        }
    </style>
</head>
<body>
    <form id="newStarterForm">
        <div class="form-header">
            <h2>New starter request form</h2>
            <p>Submit to request a new starter</p>
        </div>
        
        <div class="two-columns">
            <p><input type="text" name="requester-name" placeholder="Requester Name" required></p>
            <p><input type="email" name="requester-email" placeholder="Requester Email" required></p>
        </div>
        
        <div class="two-columns">
            <p><input type="tel" name="contact-number" placeholder="Contact Number"></p>
            <p><input type="text" name="requesting-company" placeholder="Requesting Company" required></p>
        </div>
        
        <div class="form-section">
            <h3>New Starter Details</h3>
            <div class="two-columns">
                <p><input type="text" name="new-starter-full-name" placeholder="New Starter Full Name" required></p>
                <p><input type="text" name="job-title" placeholder="Job Title"></p>
            </div>
            <div class="two-columns">
                <p><input type="tel" name="work-contact-number" placeholder="Work Contact Number"></p>
                <p><input type="email" name="required-company-email" placeholder="Required Company Email" required></p>
            </div>
            <div class="two-columns">
                <p><input type="tel" name="personal-contact-number" placeholder="Personal Contact Number"></p>
                <p><input type="email" name="personal-email" placeholder="Personal Email"></p>
            </div>
        </div>
        
        <div class="form-section">
            <h4>Package required</h4>
            <p>
                <input type="checkbox" name="package-required[]" value="Email"> Email<br>
                <input type="checkbox" name="package-required[]" value="Email with signatures setup"> Email with signatures setup<br>
                <input type="checkbox" name="package-required[]" value="Email & Office Suite"> Email & Office Suite<br>
                <input type="checkbox" name="package-required[]" value="Email, Office Suite & Teams"> Email, Office Suite & Teams<br>
                <input type="checkbox" name="package-required[]" value="Email, Office Suite, Teams & File Access"> Email, Office Suite, Teams & File Access
            </p>
            
            <h4>Is IT Support package required?</h4>
            <p>
                <input type="radio" name="it-support-package" value="Using an old device already on support plan"> Using an old device already on support plan<br>
                <input type="radio" name="it-support-package" value="New device requiring setup"> New device requiring setup<br>
                <input type="radio" name="it-support-package" value="Not needed"> Not needed
            </p>
            
            <h4>Printer Setup required</h4>
            <p><input type="text" name="printer-setup" placeholder="Please input which printer, i.e., make & location"></p>
            
            <h4>Additional Email access</h4>
            <p><input type="text" name="additional-email-access"></p>
        </div>
        
        <div class="form-section">
            <h3>Other Details</h3>
            <p><textarea name="file-access-required" placeholder="File Access Required"></textarea></p>
        </div>
        
        <div class="form-section">
            <h3>Company Mobile Device</h3>
            <p>
                <input type="checkbox" name="company-mobile-device[]" value="Yes"> Yes<br>
                <input type="checkbox" name="company-mobile-device[]" value="No"> No<br>
                <input type="checkbox" name="company-mobile-device[]" value="Yes & will need monitoring"> Yes & will need monitoring<br>
                <input type="checkbox" name="company-mobile-device[]" value="No will be using their own device but needs monitoring"> No will be using their own device but needs monitoring
            </p>
            
            <h3>Start Date</h3>
            <p><input type="date" name="start-date" placeholder="Start Date" required></p>
        </div>
        
        <p><input type="submit" value="Submit"></p>
    </form>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#newStarterForm').on('submit', function(e){
                e.preventDefault();
                
                $.ajax({
                    url: 'submit_form.php',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response){
                        alert(response);
                    },
                    error: function(){
                        alert('There was an error submitting the form.');
                    }
                });
            });
        });
    </script>
</body>
</html>

newstarter.php -

<?php

use WHMCS\Authentication\CurrentUser;
use WHMCS\ClientArea;

define('CLIENTAREA', true);

require __DIR__ . '/init.php';

$ca = new ClientArea();

$ca->setPageTitle('New Starter Request Form');

$ca->addToBreadCrumb('index.php', Lang::trans('globalsystemname'));
$ca->addToBreadCrumb('newstarter.php', 'New Starter Request Form');

$ca->initPage();

// Uncomment this line to require a login to access this page
// $ca->requireLogin();

$currentUser = new CurrentUser();
$authUser = $currentUser->user();

// Check login status
if ($authUser) {
    $ca->assign('userFullname', $authUser->fullName);
    $selectedClient = $currentUser->client();
    if ($selectedClient) {
        $ca->assign('clientInvoiceCount', $selectedClient->invoices()->count());
    }
} else {
    $ca->assign('userFullname', 'Guest');
}

// Define the template filename to be used without the .tpl extension
$ca->setTemplate('newstarter');

$ca->output();

submit_form.php -

<?php
// Enable error reporting for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $api_url = "apirulhere"; // Change to your WHMCS URL
    $api_identifier = "apiidenthere"; // Change to your API Identifier
    $api_secret = "apisechere"; // Change to your API Secret
    $api_access_key = "accesskeyhere"; // Change to your API Access Key 
    
       $postfields = array(
        'identifier' => $api_identifier,
        'secret' => $api_secret,
        'accesskey' => $api_access_key,
        'action' => 'OpenTicket',
        'deptid' => 9, // Change to your desired department ID
        'subject' => 'New Starter Request Form Submission',
        'message' => '',
        'name' => htmlspecialchars($_POST['requester-name']),
        'email' => htmlspecialchars($_POST['requester-email']),
        'priority' => 'Medium',
    );
    
    $message = "
        Requester Details
        Name: " . htmlspecialchars($_POST['requester-name']) . "
        Email: " . htmlspecialchars($_POST['requester-email']) . "
        Contact Number: " . htmlspecialchars($_POST['contact-number']) . "
        Requesting Company: " . htmlspecialchars($_POST['requesting-company']) . "

        New Starter Details
        Full Name: " . htmlspecialchars($_POST['new-starter-full-name']) . "
        Job Title: " . htmlspecialchars($_POST['job-title']) . "
        Work Contact Number: " . htmlspecialchars($_POST['work-contact-number']) . "
        Required Company Email: " . htmlspecialchars($_POST['required-company-email']) . "
        Personal Contact Number: " . htmlspecialchars($_POST['personal-contact-number']) . "
        Personal Email: " . htmlspecialchars($_POST['personal-email']) . "
        
        Package Details
        Package Required: " . (!empty($_POST['package-required']) ? implode(', ', $_POST['package-required']) : '') . "
        IT Support Package: " . htmlspecialchars($_POST['it-support-package']) . "
        Printer Setup: " . htmlspecialchars($_POST['printer-setup']) . "
        Additional Email Access: " . htmlspecialchars($_POST['additional-email-access']) . "
        
        Other Details
        File Access Required: " . htmlspecialchars($_POST['file-access-required']) . "
        Company Mobile Device: " . (!empty($_POST['company-mobile-device']) ? implode(', ', $_POST['company-mobile-device']) : '') . "
        
        Start Date: " . htmlspecialchars($_POST['start-date']) . "
    ";
    
    $postfields['message'] = $message;
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api_url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postfields));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    $result = curl_exec($ch);
    curl_close($ch);
    
    $result = json_decode($result, true);
    
    if ($result['result'] == 'success') {
        echo 'Form submitted successfully!';
    } else {
        echo 'There was an error submitting the form: ' . $result['message'];
    }
}
?>

Any help on how to fix would be amazing please.

Sign In

Strange wheel spinning on a new page - How can i fix it

Recommended Posts

monsterit

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Latest Activity

Blog

Technical Support

Important Information