CODEWITHSUNDEEP
jqueryhtml
user2415335
user2415335

Reputation: 53

jQuery onClick Function not working

I have a function that I placed inside the document.ready and the function is called from onclick of a specific button. Nothing happens when the button is clicked. 

$(document).ready(function() 
{
    function myFunctionDelete()
    {
        alert("Delete Clicked.");
    }
}

and here is the corresponding HTML linked to that button.

<form action="edit.php" method="POST">
    <table>
    <tr id="formTitle" name="formTitle"><strong>Edit Event Now</strong></tr>
    <input type="hidden" id="deletedHidden" name="deletedHidden" value="" />
    <input type="hidden" id="dateForm2" name="dateForm2" value="" />
    <input type="hidden" id="titleEditOld" name="titleEditOld" value="" />
    <tr id="formTitle"><td><label id="titleLabel" for="Title"><strong>Title:</strong></label><input id="titleEdit" name="titleEdit" type="text" value="Event Title">
    <tr id="formTitle"><td><label for="startTimeHours"><strong>Time:</strong></label><select id="startHours" name="startHours"><option>--</option>                                                                                        <option>12</option>                                                                                         <option>1</option><option>2</option>                                                                                        <option>3</option><option>4</option>
                                                                                          <option>5</option><option>6</option>
                                                                                          <option>7</option><option>8</option>
                                                                                          <option>9</option><option>10</option>
                                                                                          <option>11</option></select>
    <select id="startMinutes" name="startMinutes"><option>--</option>                                                                                         <option>00</option>
                                                                                          <option>05</option><option>10</option>
                                                                                          <option>15</option><option>20</option>
                                                                                          <option>25</option><option>30</option>
                                                                                          <option>35</option><option>40</option>
                                                                                          <option>45</option><option>50</option>
                                                                                          <option>55</option></select>

    <input type="radio" name="AMPM" value="am">am
    <input type="radio" name="AMPM" value="pm">pm<br>
    <p><strong>All Day Event?</strong>
    <input type="checkbox" name="AllDay" value="true"></p>                                                                
    <tr id=formTitle"><td><input id="submit" type="submit" value="Submit">
    <button type="button" onclick="myFunctionDelete()">Delete Event</button>
    </table>

Upvotes: 3

Views: 13422

Answers (2)

qJake
qJake

Reputation: 17119

What you've done here is defined a function from inside the function you've specified will be the event handler for document.ready. This means your myFunctionDelete function will have its scope limited to that of the document.ready function, and any other Javascript routines will not be able to access it.

You only need to put one-time initilalization logic within the document.ready event handler, not all your code needs to go there, especially if you're just using the HTML onclick="..." attribute.

Also, you're missing a ); at the end of the document.ready event handler.

Try this:

$(document).ready(function() 
{

});

function myFunctionDelete()
{
    alert("Delete Clicked.");
}

Or ditch the onclick and use this:

<button id="deleteButton">Delete Event</button>

With this:

$(document).ready(function() 
{
    $('#deleteButton').click(function()
    {
        alert("Delete Clicked.");
    });
});

Upvotes: 4

Mike Christensen
Mike Christensen

Reputation: 91590

The issue is that your myFunctionDelete function is not accessible globally, as it's defined within the ready event for the document. You'll need to move the function out of the event handler. In other words, change:

$(document).ready(function() 
{
    function myFunctionDelete()
    {
        alert("Delete Clicked.");
    }
}

To:

$(document).ready(function()
{
   // Any code that should be run when the DOM is ready
});

// This is now a global function
function myFunctionDelete()
{
   alert("Delete Clicked.");
}

Upvotes: 7

Related Questions