Data on Bootstrap Modal not show up because of a space in data for a textarea using onClick

user_2330708 0
Viewed 1009

I am using laravel and I have an update bootstrap modal. When I clicked the update button, update modal showed up but all the fields are empty like in this picture below

enter image description here

It happened because there is an Enter space in address data from the database. This below is the code of the update button which I copied from inspect element. 

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

If I remove the space into one line, it working well. I tried to remove the space when the user input the data, but it become one row, make the address is difficult to read. Do you know how to resolve this?

bootstrap-modal laravel whitespace jquery javascript
3 Answers

you can try this piece of code: apply it to your case and it will work.

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

//link on your view to trigger popup the modal. this link displays record fetch from db. the $record is a array of variable from your controller assign to your view(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 function to load modal and assign the record to 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')
}
user_33149410

okay. the problem is on this data 

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

if this is an address. what you need to do is output it using {!! $record->address !!}

user_33149410

Might be my opinion but i really do not like your code. It's messy.

But, you can pass your data as json and laravel will escape it. 

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

In your javascript

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

Take a look at the laarvel docs on how to pass json data and display it. https://laravel.com/docs/5.8/blade#displaying-data You can even use prerry print :-)

-----UPDATE------ If you use jquery, please use jquery! 

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

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