CODEWITHSUNDEEP
javascriptjqueryhtml
user1060551
user1060551

Reputation: 431

Trying to clear fields in html javascript

I am trying to make a button that cleans specific fields of my page. This is what I have, but it does not work. Not sure what else to do. Some folks tried to help me on the commends of another topic but since I could not make it work I opened this new question.

Thanks

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Landing Page</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script>

            $('.clear').on('click', function () {
                $('#inputFirstName').val('');
                $('#inputLastName').val('');
                $('#inputEmail').val('');
            });

        </script>

        <style>
            #formTable {
                /*border: 1px solid black;*/
                margin: 0 auto;
            }

            #outer {
                width: 100%;
                height: 700px;
                display: flex;
                align-items: center;
                /*background-color: gray;*/
            }            

            #inner {
                width: 300px;
                height: 350px;
                margin: 0 auto;
                /*background-color: yellow;*/
            }
        </style>

    </h:head>

    <h:body>

        <div id="outer">  
            <div id="inner">

                <h:form class="signupform">

                    <p>Sign-up for more:</p>

                    <table id="formTable">
                        <tr>
                            <td>First Name:</td>
                            <td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td> 
                        </tr>
                        <tr>
                            <td>Last Name:</td>
                            <td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td> 
                        </tr>
                        <tr>
                            <td>Email:</td>
                            <td><h:inputText id="inputEmail" value="#{visitor.email}"/></td> 
                        </tr>
                    </table>


                    <p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/>
                        <h:outputText id="outputText" value="#{visitor.result}"/></p>

                </h:form>

                <button class="clear">Clear</button>

            </div>
        </div>

    </h:body>
</html>

Upvotes: 0

Views: 43

Answers (2)

Winestone
Winestone

Reputation: 1500

Maybe you can try, instead of:

<script>

    $('.clear').on('click', function () {
        $('#inputFirstName').val('');
        $('#inputLastName').val('');
        $('#inputEmail').val('');
    });

</script>

Instead have:

<script>
    $(document).ready(function () {
        $('.clear').on('click', function () {
            $('#inputFirstName').val('');
            $('#inputLastName').val('');
            $('#inputEmail').val('');
        });
    });
</script>

Upvotes: 0

SLaks
SLaks

Reputation: 887413

You're calling $('.clear') before the elements exist.

Therefore, you're adding the event handler to an empty set.

You need to run your <script> block after the elements.

Upvotes: 1

Related Questions