Having trouble getting the jQuery and Javascript function to modify the content of a DIV?

Question

Having trouble getting the jQuery and Javascript function to modify the content of a DIV?

When I click a button, the following code is supposed to be executed:

 <input type="submit" name="cancel" value="cancel" onclick="clear_form (); return false;" class="pure-button">

This function clears the text from the textarea and removes two buttons from the form:

 function clear_form () {
        $("#statement").val('');
        document.submitform.submit.value = "save";
        document.submitform.delete.remove();
        document.submitform.cancel.remove();
 }

However, when I click the button in Chrome, I receive an error message saying that clear_form is not defined. As a result, the clear_form function does not work as expected.

Uncaught ReferenceError: clear_form is not defined

I'm wondering if anyone can help me figure out what I might have missed?

javascript jquery css

Answer 1

Answer №1

Is the function function clear_form() declared within another function? If so, then clear_form() is only locally available within the scope of that containing function. To attach click handlers in HTML attributes, the mentioned functions must be declared globally.

If you're unable to make clear_form() global, you can still use addEventListener() to add your local function from Javascript instead of using the attribute onclick in HTML. By the way, this is the recommended approach for handling this on websites in order to separate content and logic.

Answer 2

Is the function function clear_form() declared within another function? If so, then clear_form() is only locally available within the scope of that containing function. To attach click handlers in HTML attributes, the mentioned functions must be declared globally.

If you're unable to make clear_form() global, you can still use addEventListener() to add your local function from Javascript instead of using the attribute onclick in HTML. By the way, this is the recommended approach for handling this on websites in order to separate content and logic.

Answer 3

Answer №2

UPDATE

VIEW DEMO

Javascript Function

function clear_input(){

    $("#statement").val('');
    document.submitform.submit.value = "save";
    document.submitform.delete.remove();
    document.submitform.cancel.remove();

    }

document.getElementById('submit').addEventListener('click',function(){

    alert()

    clear_input();

},false);

HTML Element

<input type="submit" name="cancel" value="cancel" class="pure-button" id='submit'>

According to @cookiemonster, having extra space(s) after function names does not impact functionality.

For more details, visit this link

Answer 4

UPDATE

VIEW DEMO

Javascript Function

function clear_input(){

    $("#statement").val('');
    document.submitform.submit.value = "save";
    document.submitform.delete.remove();
    document.submitform.cancel.remove();

    }

document.getElementById('submit').addEventListener('click',function(){

    alert()

    clear_input();

},false);

HTML Element

<input type="submit" name="cancel" value="cancel" class="pure-button" id='submit'>

According to @cookiemonster, having extra space(s) after function names does not impact functionality.

For more details, visit this link

Answer 5

Answer №3

I'm not entirely sure how you plan on incorporating that code into your full application, but I have created a complete working sample page for you to try out.

Please insert the following code snippet within the head tag of your HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function clear_form() {
            //    $("#statement").val('');  or load the JQuery Library and us this line
            document.submitform.statement.value = "";  // Used this instead of JQuery
            document.submitform.submit.value = "save";
            document.submitform.delete.remove();
            document.submitform.cancel.remove();
        }
    </script>

</head>
<body>
    <form name="submitform" id="submitform">
        <textarea id="statement" cols="30" rows="3"></textarea> <br />
        <input type="button" name="delete" value="delete" /><br />
        <input type="button" name="submit" value="Submit" /><br />
        <input type="submit" name="cancel" value="cancel" onclick="clear_form (); return false;" class="pure-button">
    </form>
</body>
</html>

Answer 6

I'm not entirely sure how you plan on incorporating that code into your full application, but I have created a complete working sample page for you to try out.

Please insert the following code snippet within the head tag of your HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function clear_form() {
            //    $("#statement").val('');  or load the JQuery Library and us this line
            document.submitform.statement.value = "";  // Used this instead of JQuery
            document.submitform.submit.value = "save";
            document.submitform.delete.remove();
            document.submitform.cancel.remove();
        }
    </script>

</head>
<body>
    <form name="submitform" id="submitform">
        <textarea id="statement" cols="30" rows="3"></textarea> <br />
        <input type="button" name="delete" value="delete" /><br />
        <input type="button" name="submit" value="Submit" /><br />
        <input type="submit" name="cancel" value="cancel" onclick="clear_form (); return false;" class="pure-button">
    </form>
</body>
</html>

Having trouble getting the jQuery and Javascript function to modify the content of a DIV?

Answer №1

Answer №2

Answer №3

Similar questions

I am experiencing issues with Google Fonts not functioning properly when I insert the bootstrap CDN

Fixed width select2 input group

Issue retrieving image from API in React

When using create-react-app with JEST to run tests, TypeScript errors are not displayed

Replace pipeline function during component testing

Creating fresh CSS by extracting essential selectors from an existing CSS file using Javascript

avoidable constructor in a react component

Unable to use jQuery change function within Bootstrap 5 tabs

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

Utilizing jQuery and Flot to create dynamic real-time graphs with stacked lines

Performing insert operations with multiple repositories in NestJS using TypeORM

What steps can I take to resolve this issue when encountering an error during npm install?

Having trouble implementing a circular progress bar with a custom Tailwind CSS library, the desired effect is not being achieved

Exploring the loading of stateful data in ReactJS and implementing optimizations

Hosting images with an online service on jsfiddle: A guide

Updating Array Values in AngularJS based on Input Text Box Modifications

Read and manipulate website content using PHP

JavaScript generates an image and its corresponding answer at random

The code `$(body).css({'background-image':'url'}) is not functioning properly

Trigger an event in jQuery when the focus moves away from a set of controls