由于使用 onClick 的 textarea 的数据中有空格，因此无法显示 Bootstrap Modal 上的数据

Posted 2023-03-14

【中文标题】由于使用 onClick 的 textarea 的数据中有空格，因此无法显示 Bootstrap Modal 上的数据

【英文标题】：Data on Bootstrap Modal not show up because of a space in data for a textarea using onClick

【发布时间】：2019-10-25 13:14:03

【问题描述】：

我正在使用 laravel，并且我有一个更新引导模式。当我点击更新按钮时，更新模式出现了，但所有字段都是空的，如下图所示

发生这种情况是因为数据库中的地址数据中有一个 Enter 空格。下面是我从检查元素复制的更新按钮的代码。

<a type="button" class="btn btn-warning btn-circle" data-toggle="modal" data-target="#delivery_update_modal" onclick="delivery_update_modal(
'A9C55478-0BDE-428D-96CA-784A2349F0C7'
, 'packlaring'
, 'pe-ps-18-017'
, 'Document'
, 'Kota Balikpapan'
, 'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33, 
  Kel. Sungai Nangka, Kec. Balikpapan Selatan, 
  Kota Balikpapan'
, '2019-05-31 15:00:00.000'
)"><i class="fa fa-edit"></i>
</a>

如果我将空格删除为一行，它工作得很好。 我试图在用户输入数据时删除空格，但它变成了一行，使地址难以阅读。 你知道如何解决这个问题吗？

【问题讨论】：

见下面我的代码。在显示模态表单之前使用 javascript 在按钮单击上分配数据

【参考方案1】：

好的。问题出在这个数据上

'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33, 
  Kel. Sungai Nangka, Kec. Balikpapan Selatan, 
  Kota Balikpapan'.

如果这是一个地址。你需要做的是使用!! $record->address !!输出它

【讨论】：

是的，这是导致问题的地址。我试过了，但还是不行。 'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33, Kel. Sungai Nangka, Kec. Balikpapan Selatan, Kota Balikpapan'.所有数据仍然没有显示在模态..

我建议输出这样的结果 !! $record->address !! 在您的 javascript 函数 onclick 事件中

是的，我做到了。并且像上面这样在检查元素中的输出，在地址的开头和结尾都有 ，仍然有一个空格并且仍然没有在模态中加载

检查你的javascript函数和参数。还有模态表单上的 id。这就是问题所在。

【参考方案2】：

你可以试试这段代码：将它应用到你的案例中，它会起作用。

//modal form to show all the required inputs and make one field hidden
<div id="updateFormID" class="modal fade" >
   <div class="modal-dialog box box-default" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Edit Bank</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form class="form-horizontal" action=" url('/update') " method="post"  role="form">
             csrf_field() 
            <div class="modal-body">
               <div class="form-group" style="margin: 0 10px;">
                  <input type="hidden" class="form-control" id="recordid" name="recordid" value="">   
                  <label> Name </label><input type="text" class="form-control" id="name" name="fname" value="">
                  <label>UserName: </label><select required class="form-control" id="username"  name="userName">    
                  <label>Email: </label><select required class="form-control" id="email"  name="email">  
                  <label>Address: </label><input type="text" class="form-control" id="address" name="address" value="">
                  <label>Phone: </label><input type="text" class="form-control" id="phone" name="phone" value="">
               </div>
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-success btn-xs">Update</button>
               <button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

//链接到您的视图以触发弹出模式。此链接显示从 db 获取记录。 $record 是一个变量数组，从你的控制器分配给你的视图（刀片）

<a onclick="updateForm('$record->userid','$record->name','$record->username','$record->email','$record->address','$record->phone')" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>

//用于加载模态并将记录分配给输入的javascript函数

function updateForm(r,x,y,z,w,s)

    document.getElementById('recordid').value = r;
    document.getElementById('name').value = x;
    document.getElementById('username').value = y;
    document.getElementById('email').value = z;
    document.getElementById('address').value = w;
    document.getElementById('phone').value = s;

    $("#updateFormID").modal('show')

【讨论】：

嗯，这和我做的完全一样，除了javascript函数有点不同。我的是$('#idX').val(X); 它是一样的。我也尝试使用document.getElementById('X').value = X;，但仍然无法正常工作。谢谢

您能否将您的脚本转换为：编辑

【参考方案3】：

可能是我的意见，但我真的不喜欢你的代码。很乱。

但是，您可以将数据作为 json 传递，laravel 会对其进行转义。

<a onclick="updateForm(@json($record))" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>

在你的 javascript 中

updateForm(object)
   //you can use it as object.name or object.whatever

查看 laarvel 文档，了解如何传递 json 数据并显示它。 https://laravel.com/docs/5.8/blade#displaying-data 你甚至可以使用 prerry print :-)

-----更新------ 如果您使用jquery，请使用jquery！

function updateForm(record)

    $('#recordid').val(record.userid);
    $('#name').val(record.name);
    $('#username').val(record.username);
    //and so on. 

    $("#updateFormID").modal('show')