2016-11-21 3 views
1

Ich verwendete Jquery Ajax-Code, um Suchfunktion auszuführen.Jquery übergeben Wert an Optionsfeld

hier ist meine Ajax bisher:

$('button[type="search"]').click(function(e) { 
$.ajax({ 
    url: "{{ route('fine.search') }}", 
    type: "POST", 
    data: { 
     '_token' : '{{csrf_token() }}', 
     'driver_id' : $('select[name="driver_id"]').val(), 
     'fine_date' : $('input[name="fine_date"]').val(), 
    }, 
    success: function(data) { 
     if(data.status == true) { 
     var result= $('#search-result'); 

     $.each(data.getCarbyDriver, function(i, data) { 
     PlateEle = $('<input/>').attr({ type: 'radio', name:'rad'}); 
        $("#search-result").html(data.plate_no); 
     StartEle = $('<div />').html(data.start_time); 
     EndEle = $('<div />').html(data.end_time); 
     }); 
     $('#search-result').append(PlateEle, StartEle, EndEle); 
     } 
    }, 
    error: function(data) { 

    } 
}); 
}); 

und die Daten wie diese in meinem Netzwerk (inpect Element) zurückgegeben werden:

car_id:5 
driver_id:1 
end_time:"2016-11-16 18:00:00" 
plate_no:"DFE82846J" 
start_time:"2016-11-16 08:00:00" 
working_date:"2016-11-16 00:00:00" 

hier ist die Form Klinge Code so weit:

<div class="row top"> 
<div class="col-xs-4 col-sm-4 col-md-4"> 
    <div class="form-group"> 
     <label class="control-label">Driver Name:</label> 
     {!! Form::select('driver_id', $driver, null, array('class' => 'form-control')) !!} 
    </div> 
</div> 

<div class="col-xs-4 col-sm-4 col-md-4"> 
    <div class="form-group"> 
     <label>Fine Date:</label> 
     {!! Form::text('fine_date', null, array('id' => 'datetimepicker', 'class' => 'form-control')) !!} 
    </div> 
</div> 

<div class="col-xs-4 col-sm-4 col-md-4"> 
    <div class="form-group filter-btn"> 
     <button class='btn btn-info' type='search'>Search</button> 
    </div> 
</div> 
</div> 

<div class="row mid "> 
<div class="col-xs-4 col-sm-4 col-md-4"> 
    <div id="search-result"></div> 
</div> 
</div> 

das Problem ist, ich kann nicht speichern. es wirft einen Fehler auf car_id 'kann nicht null sein'.

Wie kann ich car_id in mein Radio passieren, so dass, sobald ich auf Radio-Button geklickt haben es durch plate_no

im mit Laravel 5.3

+4

Wo hast du 'car_id' auf deinem Ajax-Anruf? –

+0

@SandrinaPereira das ist mein Q, wie Car_id Radio übergeben? –

+0

Aber wo willst du die car_id speichern? Auf Radiowert? Auf Ajax Anruf (Daten) Ich verstehe Ihre Frage nicht ... –

Antwort

0

Es ist mir unklar, car_id sparen, wo Sie haben PlateEle, StartEle und Endele definiert . Sind diese globalen Variablen anderswo in Ihrem Javascript definiert?

Wie auch immer, wie ich es verstehe, car_id wird von der AJAX-POST zurückgegeben, so ist es in der Datenvar zurückgegeben zu Ihrer Erfolgsfunktion?

Wenn Sie den Wert in dem Funkelement festlegen möchten Sie erstellen dynamisch finde ich es sein würde:

PlateEle = $('<input/>').attr({ type: 'radio', name:'rad'}).val(data.car_id); 

Hier ist ein Beispiel, das ich verspottet. Ich erstelle ein Datenobjekt wie das, was ich glaube, dass es zurückgibt. Wenn ich diese Seite lade, erhalte ich eine Radioeingabe. Geht das für dich?

<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var result= $('#search-result'); 

     //mocking up what I assume your data object looks like 
     var data = {}; 
     data.car_id=5; 
     data.driver_id=1; 
     data.end_time="2016-11-16 18:00:00"; 
     data.plate_no="DFE82846J"; 
     data.start_time="2016-11-16 08:00:00"; 
     data.working_date="2016-11-16 00:00:00"; 


     PlateEle = $('<input/>').attr({ type: 'radio', name:'rad'}).val(data.car_id); 
     console.log(PlateEle); 
     $("#search-result").html(data.plate_no); 
     StartEle = $('<div />').html(data.start_time); 
     EndEle = $('<div />').html(data.end_time); 
     $('#search-result').append(PlateEle, StartEle, EndEle); 
    }); 
</script> 
</head> 
<body> 
    <div id="search-result"></div> 
</body> 
</html> 
+0

seine nicht globale Variable. Ich erstelle Radio mit jquery. Ich brauche car_id in meinem Radio, um es zu speichern. BTW funktioniert immer noch nicht. –

+0

Wenn das nicht funktioniert, könnten Sie versuchen, die Eingabe auf diese Weise zu erstellen: –

+0

$ ('input [type = "radio"] [name = "rad"] [wert = "' + data.car_id + '"]') –

0

Um den Wert auf dem Eingangsfunk speichern sollte dies den Trick machen könnte:

$.ajax({ 
    url: "{{ route('fine.search') }}", 
    type: "POST", 
    data: { 
     '_token' : '{{csrf_token() }}', 
     'driver_id' : $('select[name="driver_id"]').val(), 
     'fine_date' : $('input[name="fine_date"]').val(), 
    }, 
    success: function(data) { 
     if(data.status == true) { 
     var result= $('#search-result'); 

     $.each(data.getCarbyDriver, function(i, data) { 
     PlateEle = $('<input type="radio" name="rad" val="'+data.car_id+'">'+data.car_id+'</input>'); 
        $("#search-result").html(data.plate_no); 
     StartEle = $('<div />').html(data.start_time); 
     EndEle = $('<div />').html(data.end_time); 
     }); 
     $('#search-result').append(PlateEle, StartEle, EndEle); 
     } 
    }, 
    error: function(data) { 

    } 
}); 
+0

Ich habe das versucht, funktioniert nicht. –

+0

Was ist das Problem? Gibt es einen Fehler? Was passiert –

+0

dies bei Larave-Log werfen: Integrity Constraint-Verletzung: 1048 Spalte 'Car_id' kann nicht null 'in –

0

Nun, das Hinzufügen oder Ändern Wert von Optionsfeldern ist einfach. Für Ihre ID in der Datenbank könnten Sie auch einige Daten * -Attribut auf Ihrem Optionsfeld verwenden. Denken Sie jedoch daran, dass Daten * auf Ihren Formularelementen nicht an den Server gesendet werden, wenn das Formular im Browser übermittelt wird. Weitere Einzelheiten finden Sie in meinem Arbeitscodebeispiel unten:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test Radio Button</title> 

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript"> 
     var $rdBtn = null; 
     var $txtReader = null; 
     var $txtRdBtnValueReader = null; 
     function doReady() { 
      $rdBtn = $("#myRdBtn"); 
      $txtReader = $("#txtDataReader"); 
      $txtRdBtnValueReader = $("#txtRdBtnValueReader"); 
      $("#btnSetValue") 
        .click(function() { 
         // note the jQuery .val("some text") issue at this point. You will need .attr("value") for setting 
         // .val() is just helpful for reading the current value! 
         $rdBtn.attr("value", "my new value"); 
         $txtRdBtnValueReader.attr("value", $rdBtn.val()); 
        }); 
      $("#btnSetDataValue") 
        .click(function() { 
         $rdBtn.data("mykey", "myval"); 
         $txtReader.attr("value", $rdBtn.data("mykey")); 
        }); 
     } 
     $(document).ready(doReady); 
    </script> 
</head> 
<body> 
    <button type="button" id="btnSetValue">set Value</button> 
    <button type="button" id="btnSetDataValue">set data-* value</button> 
    <div id="myRadioButtonWrapper"> 
     <label for="myRdBtn">your value choice</label> 
     <input type="radio" id="myRdBtn" name="myRdBtn" value="to be replaced" /> 
     <br /> 
     <label for="txtRdBtnValueReader">radio value</label> 
     <input type="text" id="txtRdBtnValueReader" name="txtRdBtnValueReader" readonly /> 
     <br /> 
     <label for="txtDataReader">data-mykey value</label> 
     <input type="text" id="txtDataReader" name="txtDataReader" readonly /> 
    </div> 
</body> 
</html> 

Es ist auch ein gemeinsamer Weg, wenn Sie in ein Eingabefeld mehr Daten zugewiesen müssen seinen Wert als Json serialisiert. So, dass Sie ein ganzes Objekt an den Server gesendet haben könnten. Es ist einfach in PHP erneut zu analysieren. Vielleicht könnte dir das auch helfen. Viel Glück!