Versuchen, Felder in HTML zu löschen Javascript

Ich versuche, eine Schaltfläche zu machen, die bestimmte Felder meiner Seite bereinigt. Das ist was ich habe, aber es funktioniert nicht. Ich bin mir nicht sicher, was ich sonst tun soll. Einige Leute versuchten, mir bei den Empfehlungen eines anderen Themas zu helfen, aber da ich es nicht zum Laufen bringen konnte, öffnete ich diese neue Frage.Versuchen, Felder in HTML zu löschen Javascript

Dank

<?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>

Quelle

2017-02-05 user1060551

Du nennst $('.clear'), bevor die Elemente vorhanden sind.

Daher fügen Sie den Ereignishandler einer leeren Gruppe hinzu.

Sie müssen Ihren <script> Block nach den Elementen ausführen.

Quelle

2017-02-05 23:17:15 SLaks

können Sie auch '$ (document) .ready (function() {/ * Code * /}) ; '? – Winestone

@slaks kannst du mir genau sagen wo? hat es nach den divs innerhalb des Körpers verschoben, funktioniert aber immer noch nicht. – user1060551

@winestone, tut mir leid, ich bin kein Javascript-Experte können Sie bitte den gesamten Code posten? – user1060551

Sie können Vielleicht versuchen, statt:

<script> 

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

</script>

Stattdessen haben:

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

Quelle

2017-02-05 23:35:31 Winestone

Danke für den Versuch, aber es hat nicht funktioniert. – user1060551

@ user1060551 versuchen, eine 'console.log ($ ('# inputFirstName'));' innerhalb der On-Click-Funktion und sehen, was es ausgibt. – Winestone

Versuchen, Felder in HTML zu löschen Javascript

Antwort

Verwandte Themen