Nicht definierte Ausgabe von jQuery-Funktion

Question

Ich bekomme undefinierte Ausgabe von meiner jQuery-Funktion unten. Ich ursprünglich zugewiesene leere Zeichenfolge an meine product_type, Ich möchte, dass es leer sein, wenn ich niemanden von ihnen wählen, aber immer noch undefined Ausgabe. Hoffentlich kann ich hier ein paar Hinweise haben.

$(function() { 
 
    var internal_note = {}; 
 
    var customer_note = {}; 
 
    var product_type = ""; 
 
    var web_camera = ""; 
 
    var touch_screen = ""; 
 
    $("#test").on("click" , 'button:not(:disabled)',function(event){ 
 
     if ($('input[name="product_type"]:checked')){ 
 
      product_type = $('input[name="product_type"]:checked').attr("value"); 
 
     }; 
 
     if($('input[name="web_camera"]:checked')){ 
 
      web_camera = $('input[name="web_camera"]:checked').attr("value"); 
 
     }; 
 
     if($('input[name="touch_screen"]:checked')){ 
 
      touch_screen = $('input[name="touch_screen"]:checked').attr("value"); 
 
     }; 
 
     $('#left_note_list input').each(function(){ 
 
      internal_note[this.value] = JSON.stringify($(this).val()); 
 
     }); 
 
     alert(product_type); 
 
     $.ajax({ 
 
     type: "post", 
 
     url: '/insert/', 
 
     data: { 
 
     'internal_note': JSON.stringify(internal_note), 
 
     'product_type': JSON.stringify(product_type), 
 
     'web_camera': JSON.stringify(web_camera), 
 
     'touch_screen': JSON.stringify(touch_screen) 
 
     }, 
 
     success: function (data) { 
 
      swal(data,'You Click the Button','success'); 
 
      $("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled'); 
 
      }, 
 
     error: function(data){ 
 
      swal(data.responseText,'You Click the Button', 'error'); 
 
     } 
 

 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
    <h4 class="sub-header" id="product_type">Product Type</h4> 
 
         <form> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div> 
 
         </form> 
 
        </div><!-- /.col-lg-4 Product Type--> 
 
        
 
       <div class="text-center" id="test"> 
 
       <button target="_blank" 
 
        class="btn btn-primary "> 
 
        Test 
 
       </button> 
 
       </div>

Answer 1

Ihr Problem kommt von der Art, die Sie überprüfen, ist das Kontrollkästchen aktiviert ist. Dies ist zu überprüfen, wenn if ($('input[name="product_type"]:checked')). Das funktioniert, aber Sie bekommen keine wahre oder falsche Antwort zurück, also überprüfen Sie stattdessen truthy. Sie können entweder überprüfen Sie die Länge von $('input[name="product_type"]:checked') oder Sie können diese stattdessen

$('input[name="product_type"]').is(":checked")

hier tun, ist ein guter Beitrag, wie Sie überprüfen, ob eine Checkbox

jQuery if checkbox is checked

$(function() { 
 
    var internal_note = {}; 
 
    var customer_note = {}; 
 
    var product_type = ""; 
 
    var web_camera = ""; 
 
    var touch_screen = ""; 
 
    $("#test").on("click" , 'button:not(:disabled)',function(event){ 
 

 
     if ($('input[name="product_type"]').is(":checked")){ 
 
      product_type = $('input[name="product_type"]:checked').attr("value"); 
 
     } 
 
     if($('input[name="web_camera"]:checked')){ 
 
      web_camera = $('input[name="web_camera"]:checked').attr("value"); 
 
     } 
 
     if($('input[name="touch_screen"]:checked')){ 
 
      touch_screen = $('input[name="touch_screen"]:checked').attr("value"); 
 
     } 
 
     $('#left_note_list input').each(function(){ 
 
      internal_note[this.value] = JSON.stringify($(this).val()); 
 
     }); 
 
     alert(product_type); 
 
     $.ajax({ 
 
     type: "post", 
 
     url: '/insert/', 
 
     data: { 
 
     'internal_note': JSON.stringify(internal_note), 
 
     'product_type': JSON.stringify(product_type), 
 
     'web_camera': JSON.stringify(web_camera), 
 
     'touch_screen': JSON.stringify(touch_screen) 
 
     }, 
 
     success: function (data) { 
 
      swal(data,'You Click the Button','success'); 
 
      $("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled'); 
 
      }, 
 
     error: function(data){ 
 
      swal(data.responseText,'You Click the Button', 'error'); 
 
     } 
 

 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
        <h4 class="sub-header" id="product_type">Product Type</h4> 
 
         <form> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div> 
 
         </form> 
 
        </div><!-- /.col-lg-4 Product Type--> 
 
        
 
       <div class="text-center" id="test"> 
 
       <button target="_blank" 
 
        class="btn btn-primary "> 
 
        Test 
 
       </button> 
 
       </div>

geprüft

Answer 2

Es ist, weil Ihr bedingter Scheck nie falsch zurückkehrt, so dass es immer ist, den Wert von product_type zuweisen, auch wenn nichts ausgewählt ist. Verwenden Sie anstelle der Überprüfung, die Sie haben:

if ($('input[name="product_type"]:checked').length>0){ ... } 

Das wird korrekt überprüfen, um sicherzustellen, dass Sie einen überprüften Produkttyp haben.