尝试清除HTML JavaScript中的字段

Question

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>

Answer 1

You're calling $('.clear') before the elements exist. 您在元素存在之前调用$('.clear') 。

Therefore, you're adding the event handler to an empty set. 因此，您要将事件处理程序添加到一个空集中。

You need to run your <script> block after the elements. 您需要在元素之后运行<script>块。

Answer 2

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>

尝试清除HTML JavaScript中的字段

问题描述

2 个解决方案

解决方案1
1 2017-02-05 23:17:15

解决方案2
0 2017-02-05 23:35:31

尝试清除HTML JavaScript中的字段

问题描述

2 个解决方案

解决方案1 1 2017-02-05 23:17:15

解决方案2 0 2017-02-05 23:35:31

解决方案1
1 2017-02-05 23:17:15

解决方案2
0 2017-02-05 23:35:31