Jquery将值传递给单选按钮答案

【问题标题】：Jquery pass value to radio buttonJquery将值传递给单选按钮
【发布时间】：2016-11-21 14:07:11
【问题描述】：

我使用 jquery ajax 代码来运行搜索功能。

到目前为止，这是我的 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) {

    } 
});  
});

以及在我的网络上返回的数据（检查元素）：

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' cannot be null'。

我如何将 car_id 传递到我的收音机中，所以一旦我点击单选按钮，它会通过 plate_no 保存 car_id

我使用 laravel 5.3

【问题讨论】：

你的 ajax 调用中有car_id 吗？
@SandrinaPereira 那是我的问题，如何将 car_id 传递给收音机？
但是你想把 car_id 保存在哪里？无线电价值？关于 ajax 调用（数据）我不明白你的问题......
贴出刀片的代码，看看你是如何使用你的收音机的
@SandrinaPereira 对不起我的英语不好，你就在我的收音机价值上

标签： php jquery laravel

【解决方案1】：

我不清楚您在哪里定义了 PlateEle、StartEle 和 EndEle。这些全局变量是否在您的 javascript 中的其他地方定义？

无论哪种方式，据我所知，ajax POST 正在返回 car_id，所以它在返回给您的成功函数的数据 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>

【讨论】：

它不是全局变量。我使用 jquery 创建收音机。我需要收音机中的 car_id 来保存它。顺便说一句，仍然无法正常工作。
如果这不起作用，您可以尝试以这种方式构建输入：
$('input[type="radio"][name="rad"][value="' + data.car_id + '"]')
是的，每次添加这些元素时，它都会创建一个新的无线电元素。
好的。所以在这种情况下，您应该能够轻松地将该示例迁移到您的真实代码中并期望它以相同的方式工作，对吗？这对你有用吗？

【解决方案2】：

要保存输入收音机上的值，这应该可以解决问题：

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

    } 
});

【讨论】：

有什么问题？有什么错误吗？会发生什么
在 larave 日志中抛出这个：完整性约束违规：1048 Column 'car_id' cannot be null' in
在追加$('#search-result').append(PlateEle, StartEle, EndEle);之前你能成功执行console.log(data.car_id)吗
我得到了身份证。我把它放在 function(i, data) { 之后
抱歉，我不明白代码有什么问题：/...

【解决方案3】：

嗯，添加或更改单选按钮的值很简单。对于您在数据库中的 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 中再次解析很容易。也许这也可以帮助你。祝你好运！

【讨论】：