Bootstrap modal: dynamically load value in input field

I have a Bootstrap modal in a Laravel app that I’m trying to dynamically load. The idea is to fill the input fields in the modal with data coming from my database so I can update the values. I’m almost there….

I have the following in my view file:

   <a href="#myModal" rel="nofollow noreferrer noopener" data-toggle="modal" data-target="#edit-auction-modal" data-id="1" data-title="title 1" type="button" class="btn btn-sm btn-primary btn-warning">Open modal</a>

The ‘data-id’ and ‘data-title’ are passed to a JS function that looks as follows:
$(function() {
    $('#edit-auction-modal').on("", function (e) {
         $("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));

This JS function captures the id and title successfully. In the below modal view, I can print out the id in the panel-title because I’m telling in JS to put the data in the id=”auctionLabel”.
<div class="row">
   <div id="edit-auction-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="panel panel-info">
                  <div class="panel-heading">
                    <div class="panel-title" id="auctionLabel"></div>
                <div class="modal-body edit-content" style="padding-top:10px">
                     <form  method="POST" action="{!! route('admin_auctions_update') !!}">
                      {{ csrf_field() }}
                      <div class="form-group">
                        <label for="auction_name" class="control-label">Auction name</label>
                        <input name="auction_name" id="name" class="form-control" placeholder="Auction name" value="{{$auction->auction_name}}">

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Update auction</button>

My question is how I need to change the Javascript function in order to pre-fill the input fields with the value of the title. In other words, I want the value of the input box to contain the ‘title’ that I captured in the JS file.


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try this :

$('#edit-auction-modal').on("", function (e) {
     $("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
    $('#edit-auction-modal ').find('input#input-id').val($(e.relatedTarget).data('title'))

Method 2

You can use .val( value ) to set/change the input value in jQuery.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x