locked
Issue to event RRS feed

  • Question

  • User364663285 posted

    Hi,
    Please help as I cannot clear details of username and password below, by the event.

        <script>
            function clickCancel() {
                document.getElementByName("username").innerHTML = "";
                document.getElementByName("password").innerHTML = "";
                //refresh_img();
            }
        </script>
        ...
                    <div class="col" style="border: 0px solid blue;"></div>
    				                <div class="col-md-2" style="border: 0px solid orange;"></div>
    				                <div class="col-md-4" style="border: 0px solid yellow;">
    				                    <button>Login</button>
    				                    <button onclick="clickCancel()">Cancel</button>
    				                </div>
    				                <div class="col"></div>

    Monday, February 24, 2020 10:18 AM

Answers

  • User288213138 posted

    Hi wmec,

    wmec

    document.getElementById("username").value = "";
                document.getElementById("password").value = "";

    wmec

    <input type="text" name="username" style="background-color: white;" />
    <input type="password" name="password" style="background-color: white;" />

    In your code, you use name instead of id.

    The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.

    And the name property specifie the name of an <input> element. 

    You can try below code:

    <input type="password" id="username" name="password" style="background-color: white;" />
    <input type="password" id="password" name="password" style="background-color: white;" />

    More information about the use of  HTML DOM getElementById() Method you can refer to this link: 

    https://www.w3schools.com/jsref/met_document_getelementbyid.asp

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 27, 2020 5:24 AM

All replies

  • User753101303 posted

    Hi,

    Show markup for what you are trying to clear. Assuming they are input fields, it could be rather and/or you could use getElementById

    document.getElementsByName("username")[0].value = "";
    document.getElementById("username").value=""; // simpler

    Here it seems you could consider using a reset button: https://www.w3schools.com/tags/att_input_type_reset.asp

    Edit!: missed the wrong method name. Also using <button type="button"> is better (for at least some browser it is a submit button by default). IMO use a reset button and make sure it does bring some value ("Cancel" for not doing really anything looks always a bit weird on a form, "Reset" would be more accurate).

    Monday, February 24, 2020 10:28 AM
  • User288213138 posted

    Hi wmec,

    wmec

    document.getElementByName("username").innerHTML = "";
    document.getElementByName("password").innerHTML = "";

    Can you tell me what tags or controls are username and password?

    And as PatriceSc said, I suggest you use an input type button and use the value to change the text. here a demo for you as a reference.

    <script>
            function clickCancel() {
                document.getElementById("username").value = "";
            }
    </script>
    
    <input type="text" id="username" value="Sam"/>
    <input type="button" onclick="clickCancel()" value="Cancle"/>

    Best regards,

    Sam

    Tuesday, February 25, 2020 6:23 AM
  • User364663285 posted

    It is not working as expected by this:

    document.getElementById("username").value = "";

    Tuesday, February 25, 2020 9:07 AM
  • User288213138 posted

    Hi wmec,

    It is not working as expected by this:

    It works fine in my side.

    please post your html code.

    Best regards,

    Sam

    Tuesday, February 25, 2020 9:26 AM
  • User364663285 posted

    See below

            function clickCancel() {
                document.getElementById("username").value = "";
                document.getElementById("password").value = "";
                //refresh_img();
            }
        </script>
    ...
    
                    <div class="col" style="border: 0px solid blue;"></div>
    				                <div class="col-md-2" style="border: 0px solid orange;"></div>
    				                <div class="col-md-4" style="border: 0px solid yellow;">
    				                    <button>Login</button>
    				                    <button onclick="clickCancel()">Cancel</button>
    				                </div>
    				                <div class="col"></div>
                    <div class="w-100"></div>
    

    Wednesday, February 26, 2020 7:03 AM
  • User-474980206 posted

    In the dom all identifiers are case sensitive. You should include the html of the username and password fields so we can see the actual Id. You should show the rendered ( from view source)

    Wednesday, February 26, 2020 7:25 PM
  • User753101303 posted

    As I told earlier seeing the markup for what you call "username" could help.

    You should not post tons of unrelated markuo but you should still post all the needed parts for a complete sample. For example a minimal amount of code that works is :

    <script>
    function clickCancel() {
       document.getElementById("username").value = "";
    }
    </script>
    <input type="text" id="username" name="username" value="Someone">
    <button type="button" onclick="clickCancel()">Cancel</button>
    

    Wednesday, February 26, 2020 8:24 PM
  • User364663285 posted

    Hi,

    I cannot clear details of field by these

        <script>
            function event0() {
                var hdr1 = "Logon Page";
                document.getElementById("hdr0").innerHTML = hdr1;
            }
            function clickCancel() {
                document.getElementById("username").value = "";
                document.getElementById("password").value = "";
                //refresh_img();
            }
        </script>
    </head>
    <body onload="event0()">
        <div class="container" style="background:url('./pict/ID-10028343.jpg');border: 0px solid green;background-color: C9D3DD;background-size: cover;background-repeat: no-repeat;width:1200px;height:800px;font-family:Verdana;font-size:14px;">
            <form action="??" method="POST">
                <div class="col text-center" style="border: 0px solid blue;">
                    <header>
                        <h2><label id="hdr0">hdr1</label></h2>
                    </header>
                </div>
                <div class="row" style="border: 0px solid red;">
    
                    <div class="col" style="border: 0px solid blue;"></div>
                    <div class="col text-right" style="border: 0px solid orange;"><b>Username:</b></div>
                    <div class="col" style="border: 0px solid yellow;"><input type="text" name="username" style="background-color: white;" /></div>
                    <div class="col"></div>
                    <div class="w-100"></div>
    
                    <div class="col" style="border: 0px solid blue;"></div>
                    <div class="col text-right" style="border: 0px solid orange;"><b>Password:</b></div>
                    <div class="col" style="border: 0px solid yellow;"><input type="password" name="password" style="background-color: white;" /></div>
                    <div class="col"></div>
                    <div class="w-100"></div>
    
                    <div class="col" style="border: 0px solid blue;"></div>
    				                <div class="col-md-2" style="border: 0px solid orange;"></div>
    				                <div class="col-md-4" style="border: 0px solid yellow;">
    				                    <button type="button" >Login</button>
    				                    <button type="button" onclick="clickCancel()">Cancel</button>
    				                </div>
    				                <div class="col"></div>
                    <div class="w-100"></div>
              </div>
          </form>
            </div>
        </body>
    </html>
    

    Thursday, February 27, 2020 3:03 AM
  • User288213138 posted

    Hi wmec,

    wmec

    document.getElementById("username").value = "";
                document.getElementById("password").value = "";

    wmec

    <input type="text" name="username" style="background-color: white;" />
    <input type="password" name="password" style="background-color: white;" />

    In your code, you use name instead of id.

    The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.

    And the name property specifie the name of an <input> element. 

    You can try below code:

    <input type="password" id="username" name="password" style="background-color: white;" />
    <input type="password" id="password" name="password" style="background-color: white;" />

    More information about the use of  HTML DOM getElementById() Method you can refer to this link: 

    https://www.w3schools.com/jsref/met_document_getelementbyid.asp

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 27, 2020 5:24 AM
  • User753101303 posted

    In addition "id" is how the element is known on the client side and what you should use with getElementById, CSS etc... It is expected to be unique.

    "name" is the name that will be used when posting a form field to a web server (and a field without a name attribute won't be posted). Usually id and name have the same value but it not required. You can have mutiple form fields with the same name.

    Seee https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname

    Thursday, February 27, 2020 5:42 PM