Uncaught reference errror: onclick proceedtobilling() function?

Question

0.00/5 (No votes)

See more:

Hi team

I have been debugging this problem almost 1 hour. I need some help, i have an onclick event handler when click to redirect user to billing_address and have used correct js libraries to handle this. Somehow when i use correct name function the error still persist.

What I have tried:

// html code

HTML

<pre><!--Cart modal-->

        <div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="cartModalLabel">Cart Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"></span>
        </button>
        </div>
        <div class="modal-body">
        <table class="table table-bordered">
            <thead>
            <tr>
            <th>Product</th>
            <th>Image</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Action</th>
            </tr>
            </thead>
            <tbody id="cart-items">
            </tbody>
        </table>
         <p id="total-price">Total Price: R0</p> 
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="proceedToBilling()">Proceed</button>
        </div>
        </div>
        </div>

//js files

JavaScript

<pre>
   <!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include jQuery Validation plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<pre lang="Javascript"><!--- Cart--Modal-->
<script>
  // Update cart load.
  $(document).ready(function () {
    var userId = <?php echo isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0; ?>;
    updateCartBadge(userId);

    // Function to process billing address by user.
  function proceedToBilling() {
    var referenceNumber = "<?php echo $_SESSION['reference_number']; ?>";
    var shippingCost = "<?php echo $_SESSION['shipping_cost'];?>";
    window.location.href ="billing_address.php?ref=" + referenceNumber + "&shipping=" + shippingCost;
  }
  });

Posted 2-Aug-23 3:20am

Gcobani Mkontwana

Updated 2-Aug-23 4:41am

Add a Solution

Comments

Richard MacCutchan 2-Aug-23 10:20am

I'm not a Javascript expert, but as far as I can see the proceedToBilling function only exists within

$(document).ready(function () {

so it is not visible to the HTML.

Gcobani Mkontwana 2-Aug-23 10:28am

@Richard MacCuthan yes it has been defined inside, there are no conflict js files when debugging this. Tried to clear cache many times, but still when i click button it throws that error.

Dave Kreskowiak 2-Aug-23 10:32am

Again, it's because the proceedToBilling function is defined inside the ready() function and, hence, can only be used by code inside the ready() function.

The solution is quite easy. Move the proceedToBilling() function outside the ready() function and it'll be visible to all of your code.

Gcobani Mkontwana 2-Aug-23 10:35am

@Dave, i have tried that as well,it keeps throwing the same error, tried to clear cache, no difference.

Richard MacCutchan 2-Aug-23 12:52pm

It is nothing to do with clearing the cache. It is simply the fact the the function is invisible to the HTML as it only exists inside the $(document).ready(function (), as alsready stated.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-08-02T04:36:00

RMC is correct; any function referenced by an on... attribute within the HTML needs to be a global function, not a function nested within another function.

You need to move the function outside of the jQuery event handler:

JavaScript

$(function(){
    var userId = <?php echo isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0; ?>;
    updateCartBadge(userId);
});

function proceedToBilling() {
    var referenceNumber = "<?php echo $_SESSION['reference_number']; ?>";
    var shippingCost = "<?php echo $_SESSION['shipping_cost'];?>";
    window.location.href ="billing_address.php?ref=" + referenceNumber + "&shipping=" + shippingCost;
}

NB: Read the jQuery documentation:

.ready() | jQuery API Documentation[^]:
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

You are using a deprecated syntax ($(document).ready(function() { ... });); you should replace that with the recommended syntax ($(function() { ... });).

Dave Kreskowiak · Accepted Answer · 2023-08-02T04:41:00

No, you haven't "tried that". You think you did, but looking over all the questions you've posted, I don't think you have.

It's as easy as moving a line in your code:

HTML

<script>
  // Update cart load.
  $(document).ready(function () {
    var userId = <?php echo isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0; ?>;
    updateCartBadge(userId);
  });                      <---Moved from the bottom of your post to here

  // Function to process billing address by user.
  function proceedToBilling() {
    var referenceNumber = "<?php echo $_SESSION['reference_number']; ?>";
    var shippingCost = "<?php echo $_SESSION['shipping_cost'];?>";
    window.location.href ="billing_address.php?ref=" + referenceNumber + "&shipping=" + shippingCost;
  }

Uncaught reference errror: onclick proceedtobilling() function?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0