Данные на Bootstrap Modal не отображаются из-за пробела в данных для текстовой области, использующей onClick

Question

Я использую laravel, и у меня есть модал обновления начальной загрузки. Когда я нажал кнопку обновления, появился модал обновления, но все поля пусты, как на рисунке ниже

Это произошло потому, что в данных адреса из базы данных есть пробел Enter. Ниже приведен код кнопки обновления, которую я скопировал из элемента inspect.

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

Если я уберу пробел в одну строку, он будет работать хорошо. Я пытался удалить пробел, когда пользователь вводил данные, но они стали одной строкой, сделать адрес трудно читаемым. Вы знаете, как решить эту проблему?

Answer 1

хорошо. проблема в этих данных

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

если это адрес. что вам нужно сделать, это вывести его с помощью {!! $record->address !!}

Answer 2

Может быть, мое мнение, но мне действительно не нравится ваш код. Это грязно.

Но вы можете передать свои данные, так как 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 Вы даже можете использовать предварительную печать: -)

----- UPDATE ------ Если вы используете jquery, пожалуйста, используйте jquery!

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

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

Answer 3

вы можете попробовать этот кусок кода: примените его к вашему делу, и он будет работать.

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

// ссылка на вашем представлении, чтобы вызвать всплывающее окно модальное.эта ссылка отображает выборку записи из базы данных.$record - это массив переменных из вашего контроллера, назначенный вашему виду (blade)

<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 для загрузки модального режима и назначения записи для inputes

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')
}