Kann nicht console.log ("xyz") nach dem Klicken auf eine Schaltfläche.

Question

Es scheint, dass die JavaScript-Funktion nie ausgeführt wird. Kann mir jemand sagen warum?

<form> 
    <select type="text" name="month" id="month"> 
     <option value="01">January</option> 
     <option value="02">February</option> 
     <option value="03">March</option> 
     <option value="04">April</option> 
     <option value="05">May</option> 
     <option value="06">June</option> 
     <option value="07">July</option> 
     <option value="08">August</option> 
     <option value="09">September</option> 
     <option value="10">October</option> 
     <option value="11">November</option> 
     <option value="12">December</option> 
    </select> 
    <button type="submit" id="jobmonth">View all job requests in this month</button> 
    </form> 

    <script type="text/javascript"> 
     $('#jobmonth').click(function() { 
       console.log("work"); 
       var month = $('#month').val(); 
       console.log(month); 
    } 
    </script> 

Keine der console.log funktioniert. PS- Sorry für solch eine dumme Frage. Ich bin nur ein Anfänger in JS.

Answer 1

Schaltflächen des Typs submit sind dazu gedacht, das Formular an die jeweils gültigen Aktionen zu übergeben. In diesem Fall würde es nur die Seite aktualisieren.

Stattdessen ändern Sie einfach die type zu button.

<button type="button" id="jobmonth">View all job requests in this month</button> 

Dies wird die Seite nicht übergeben und Sie werden Ihre protokollierten Ergebnisse sehen.

Answer 2

Versuchen Sie, Ihrem Tag eine ID zu geben, und verwenden Sie stattdessen das submit-Ereignis. Das bedeutet, die console.log ausgelöst wird, wenn das Formular nicht eingereicht wird als die Schaltfläche geklickt wird, aber das Ergebnis sollte das gleiche sein:

<form id="myform"> 
    <select type="text" name="month" id="month"> 
     <option value="01">January</option> 
     <option value="02">February</option> 
     <option value="03">March</option> 
     <option value="04">April</option> 
     <option value="05">May</option> 
     <option value="06">June</option> 
     <option value="07">July</option> 
     <option value="08">August</option> 
     <option value="09">September</option> 
     <option value="10">October</option> 
     <option value="11">November</option> 
     <option value="12">December</option> 
    </select> 
    <button type="submit" id="jobmonth">View all job requests in this month</button> 
    </form> 

    <script type="text/javascript"> 
     $('#myform').on('submit', function() { 
       console.log("work"); 
       var month = $('#month').val(); 
       console.log(month); 
    } 
    </script> 

Sie auch die „Eintragen“ Kurzschrift verwenden: https://api.jquery.com/submit/