jquery传递值到单选按钮

我用jquery ajax代码来运行搜索功能。jquery传递值到单选按钮

，这里是我的ajax至今：

$('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) { 

    } 
}); 
});

和返回的数据像这样我的网络（inpect元）上：

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"

这里是到目前为止的形式刀片代码：

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

问题是我无法保存。它会抛出错误car_id'不能为空'。

我如何通过car_id到我的电台，所以一旦我的单选按钮，点击它节省plate_no

IM使用laravel car_id 5.3

来源

2016-11-21 Andrew Vanusi

你的ajax调用在哪里有'car_id'？ –

@SandrinaPereira多数民众赞成我的问，如何将car_id传递给电台？ –

但你想保存car_id在哪里？在无线电价值？在阿贾克斯呼叫（数据）我不理解你的问题... –

这我不清楚，你已经PlateEle，StartEle和EndEle定义。这些全局变量是在JavaScript的其他地方定义的吗？

无论哪种方式，据我所知，car_id是由ajax POST返回，所以它的数据var返回到您的成功函数？

如果你想设置你动态地创建无线电元素的值，我认为这将是这样的：

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

这是我嘲笑了一个例子。我正在创建一个数据对象，就像我认为你正在返回的数据对象一样。当我加载这个页面时，我收到了一个无线电输入。这对你有用吗？

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

来源

2016-11-21 14:19:45

，它不是全局变量。即时通讯使用jQuery创建广播。我需要我的收音机中的car_id来保存它。 btw仍然无法正常工作。 –

如果这不起作用，您可以尝试并用这种方式构建输入： –

$（'input [type =“radio”] [name =“rad”] [value =''+ data.car_id +'“]'） –

，以节省您输入电台的价值，这可能应该使绝招：

$.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) { 

    } 
});

来源

2016-11-21 14:39:12

我试过了，没有工作。 –

什么问题？有没有错误？ –

在larave日志中抛出：完整性约束违规：1048在'追加'$（'＃search-result'）之前，您可以通过成功的方式进行console.log（data.car_id）操作，在' –

好，添加或更改单选按钮的值是简单的。对于数据库中的ID，您还可以在单选按钮上使用一些data- *属性。但请记住，如果表单是在浏览器中提交的，则表单元素上的data *不会发送到服务器。欲了解更多详情，请参阅我下面的工作代码示例：

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

这也是一个常见的方式，如果你需要分配给输入字段连载其作为JSON价值更多的数据。所以，你可以有一个完整的对象发送到服务器。在PHP中很容易解析。也许这也可以帮助你。祝你好运！

来源

2016-11-21 15:46:37 alpham8

jquery传递值到单选按钮

回答

相关问题