Ethris Ethris - 3 months ago 7
jQuery Question

Getting data from div to modal via jQuery

I have PHP generated div's that have some data from database. every one of them have unique ID. I need to get data from selected div (I have this coded) and through it's ID it's supposed to put data from this div to modal.

MODAL:

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" id="edit-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="add-firstname" class="col-sm-2 control-label">Imie</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
</div>
</div>
<div class="form-group">
<label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
</div>
</div>
<div class="form-group">
<label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
</div>
</div>
<div class="form-group">
<label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
</div>
</div>
<div class="form-group">
<label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
</div>
</div>
<div class="form-group">
<label for="b" class="col-sm-2 control-label">Płeć</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
</div>
</div>
<div class="form-group">
<label for="d" class="col-sm-2 control-label">Typ Konta</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
<button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
</div>
</form>
</div>
</div>
</div>


function that calls modal out:

function edit(){
$('#edit-modal').modal('show');
}


one of divs:

<div class="panel panel-kol" mid="4"><div class="panel-body profile white">
<div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
<div class="profile-data">
<div class="profile-data-name" style="font-weight: bold;">Krzysztof Marczewski</div>
<div class="profile-data-title">Recepcjonista</div>
</div>
</div>
<div class="panel-body">
<div class="contact-info text-center" style="margin-top: -20px;">
<p><small>Telefon komórkowy</small><br>997998999</p>
<p><small>Od - Do</small></p>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" value="00:00:12">
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" value="00:00:19">
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>


"mid" is unique ID assigned to every div generated by PHP. I just need to take data from already generated div into modal

ss:


ss v2.

enter image description here

Answer

watch this, if i understood correct...

$(document).ready(function(){
function edit(){
            $('#edit-modal').modal('show');
        }
function insertData(mid){
  var panel = $('.panel[data-mid="'+mid+'"]'),
      fullName = panel.find('.full-name').text(),
      arrName = fullName.split(" "),
      modal = $('#edit-modal');
				
  modal.find('#add-firstname').val(arrName[0]);
  modal.find('#add-nazwisko').val(arrName[1]);
  modal.find('#add-pesel').val(panel.find('.phone').text());
  modal.find('#g').val(panel.find('.start-time').val());
  modal.find('#t').val(panel.find('.end-time').val());
}
				
				edit();
				insertData(4);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" id="edit-form">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
              </div>
              <div class="modal-body">
                    <div class="form-group">
                        <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="b" class="col-sm-2 control-label">Płeć</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="d" class="col-sm-2 control-label">Typ Konta</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
              </div>
            </form>
        </div>
      </div>
    </div>
		
		<div class="panel panel-kol" data-mid="4"><div class="panel-body profile white">
                                <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
                                <div class="profile-data">
                                    <div class="profile-data-name full-name" style="font-weight: bold;">Krzysztof Marczewski</div>

                                    <div class="profile-data-title">Recepcjonista</div>
                               </div>
                            </div>                                
                            <div class="panel-body">                                    
                                <div class="contact-info text-center" style="margin-top: -20px;">
																<p><small>Telefon komórkowy</small><br><span class="phone">997998999</span></p>
                                    <p><small>Od - Do</small></p>
                                    <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control start-time" value="00:00:12">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control end-time" value="00:00:19">
                                        </div>
                                    </div>
                                     <div class="col-md-2"></div>
                                </div>            
                        </div>
                    </div>
                </div>