AJAX JQuery Formular reicht nur einmal funktioniert (erfordert Seitenaktualisierung)

Question

Wenn die Seite lädt kann ich ein Ergebnis abrufen, aber wenn ich die Eingaben ändern und versuchen, die update_form neu zu füllen, erhalte ich nichts. Irgendwelche Ideen? Wenn ich die Parameter überprüfe, erhält der Browser die neuen Parameter, aber anscheinend wird die Abfrage nicht erneut ausgeführt.

$(function() { 
       $("#select_form").submit(function (e) { 
        e.preventDefault(); 
        $.ajax({ 
         url: 'select_price.php', 
         data: $('#select_form').serialize(), 
         type: 'POST', 
         success: function (data) { 
          console.log(data); 

          if(data){ 
           $("#update_form").html(data); 
           $("#norecord").css('display','none'); 

          } 
          else{ 
           $("#norecord").css('display','block'); 

          } 

         }, 


        }); 

       }); 
       }); 

Mein HTML

<form action="" method="post" id="select_form"><select style="max-width: 125px;border-radius:5px;" class="form-control" name="cus_no" autocomplete="off"> 
       <?php 

       $sql = "SELECT DISTINCT debcode FROM cicmpy WHERE cicmpy.region IS NOT NULL"; 
       $query = odbc_exec($conn, $sql); 
       while ($row = odbc_fetch_array($query)) { 
        echo '<option value="' . ($row['debcode']) . '">' .($row['debcode']) . ' </option>'; 
       } 


       ?> 

       </select ></div><label>Item Number</label><input style="max-width: 125px; border-radius:5px;" type="text" class="form-control" id="auto_item" name="item_no"/> 
         <button style="margin-top: 15px;" type="submit" name="update" class="btn btn-primary">Manage</button> 
         <button style="margin-top: 15px;" type="button" name="new_price" id="new_price" class="btn btn-success pull-right">New Price</button></div> 
     </div> </div> 
        </div> 
     </div> 
      </form> 

Answer 1

Zuerst in Ihrem HTML, geben Sie Ihre Schaltfläche ein id="btn_manage" und entfernen Sie die type="submit", sonst sind Sie einfach das Formular POSTen (weshalb Ihre Seite erfrischend) statt AJAX verwenden. In Ihrem Javascript, loswerden der $("#select_form").submit(function (e) { Zeug und einfach registrieren Sie einen Event-Handler für die Schaltfläche selbst, die den AJAX laufen wird.

Aktualisieren Sie den HTML und dann versuchen Sie dies:

<script> 
    $(function() { 
     $("#btn_manage").on("click", function() { 
      $.ajax({ 
       url: 'select_price.php', 
       data: $('#select_form').serialize(), 
       type: 'POST', 
       success: function (data) { 
        console.log(data); 

        if(data){ 
         $("#update_form").html(data); 
         $("#norecord").css('display','none'); 

        } else { 
         $("#norecord").css('display','block'); 

        } 

       }, 
       error: function(data) { 
        console.log("Error: " + data) 
       } 
      }); 
     }); 
    }); 

    </script> 

Answer 2

Sie benötigen einen Click-Ereignishandler für die Senden-Schaltfläche zu binden, die auf diese Weise in der Zukunft AJAX-Anfragen hinzugefügt werden.

$(function() { 
    $("#select_form").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: 'select_price.php', 
     data: $('#select_form').serialize(), 
     type: 'POST', 
     success: function(data) { 
     console.log(data); 

     if (data) { 
      $("#update_form").html(data); 
      $("#norecord").css('display', 'none'); 

     } else { 
      $("#norecord").css('display', 'block'); 

     } 

     }, 


    }); 

    }); 

    //Bind click event listener to the submit button 
    $(document).on('click', 'button[type="submit"]', function() { 
     $(this).parents('form').submit(); 
    }); 
});