keyz.Mist keyz.Mist - 12 days ago 5
Twig Question

Set Textbox Value in opened Modal using javascript Dynamically

On button click open Model like this

<a href="#edit-venue" class="btn green editButton" data-toggle="modal" data-id="2" data-placement="bottom" title="Edit"><i class="icon-note"></i></a>


Modal

<div id="edit-venue" class="modal fade portlet" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<form class="form-horizontal" id="editVenue" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Venue Detail</h4>
</div>
<div class="modal-body">

<div class="form-group">
<label class="control-label col-sm-3"><b>Venue12</b></label>
<div class="control-label col-sm-9 text-left">
<input id="venue" name="venue" class="form-control venue_name" placeholder="Enter venue" type="text">
<span class="error"></span>

<span class="error"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3"><b>Room/Stage</b></label>
<div class="control-label col-sm-9 text-left">
<input id="roomStage" name="roomStage" class="form-control" placeholder="Enter room/stage" type="text">
<span class="error"></span>
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn red">Cancel</button>
<button type="button" data-dismiss="modal" class="btn green btn_save">Save</button>
</div>
</div>
</form>
</div>
</div>


When I click on button open modal, I'd like to on click button fill up the data in perticular textbox using javascript dynamically.

on button click i got response like this
{"id":67,"value":"venue 1","Xvalue":"venue 1"}


i tried to :
$('#venue_name').val(msg.value);


but instead of
#venue_name
I want to use the
closest()
.

How can I do this?

Answer

If I understand your question right, you want to set the value in the input box of model from the message.

You need to use the shown.bs.modal event of the modal.

var msg = {"id":67,"value":"venue 1","Xvalue":"venue 1"};

$('#edit-venue').on('show.bs.modal', function (e) {
   $("#venue").val(msg.value);
})

JSFIDDLE : https://jsfiddle.net/01zrxq7y/1/

Boostrap Doc : http://getbootstrap.com/javascript/#modals-events

Comments