Answer the question
In order to leave comments, you need to log in
V
V
Viktor Grachev2014-10-03 22:19:44
Viktor Grachev, 2014-10-03 22:19:44
Why does data on submit disappear from Bootstrap modal window form?
Good evening dear colleagues! I've been fighting for the second day, I can not overcome the problem of sending data from the Bootstrap modal window. I have a table with users and in each row there is a user edit button. When clicked, a modal window pops up in the fields of which values are substituted using Jquery. The problem is that when the submit button is clicked, all fields are cleared and the form returns an empty POST array. Please help, I don't understand what is the problem? Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered table-striped" id="usertable">
<thead>
<tr><th>№</th>
<th>Ф.И.О.</th>
<th>Email/Login</th>
<th>Телефон</th>
<th>Skype</th>
<th>Роль</th>
<th>id</th>
<th>Действие</th>
</tr></thead>
<tbody>
<tr>
<td style="text-align:center;">1</td>
<td class="2_username">Николай</td>
<td class="2_email" style="text-align:center;">[email protected]</td>
<td class="2_phone" style="text-align:center;">873722</td>
<td class="2_skype" style="text-align:center;">vig432</td>
<td class="2_role" style="text-align:center;">admin</td>
<td class="2_userid" style="text-align:center;">1</td>
<td style="text-align:center;">
<button b_id="2" data-target="#myModal" data-toggle="modal" class="btn btn-success"> Изменить</button>
</td>
</tr>
<tr>
<td style="text-align:center;">2</td>
<td class="3_username">Виктор</td>
<td class="3_email" style="text-align:center;">[email protected]</td>
<td class="3_phone" style="text-align:center;">2323782</td>
<td class="3_skype" style="text-align:center;">test22</td>
<td class="3_role" style="text-align:center;">admin</td>
<td class="3_userid" style="text-align:center;">2</td>
<td style="text-align:center;">
<button b_id="3" data-target="#myModal" data-toggle="modal" class="btn btn-success"> Изменить</button>
</td>
</tr>
<tr>
<td style="text-align:center;">3</td>
<td class="4_username">Виктор Алексеевич</td>
<td class="4_email" style="text-align:center;">[email protected]</td>
<td class="4_phone" style="text-align:center;">3232189</td>
<td class="4_skype" style="text-align:center;">vitos8822</td>
<td class="4_role" style="text-align:center;">executor</td>
<td class="4_userid" style="text-align:center;">3</td>
<td style="text-align:center;">
<button b_id="4" data-target="#myModal" data-toggle="modal" class="btn btn-success"> Изменить</button>
</td>
</tr>
</tbody>
</table>
<!-- Модальное окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="myModalLabel">Редактирование пользователя</h3>
</div>
<div class="modal-body">
<!-- Форма редактирования в модальном окне -->
<form id="form" role="form" action="modal.php" method="POST">
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">
Name
</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Name" value="">
</div>
<div class="form-group">
<label class="control-label">
Email
</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Например [email protected]" value="">
</div>
<div class="form-group">
<label class="control-label">
Phone
</label>
<input type="text" name="phone" id="phone" class="form-control" placeholder="Например 706333" value="">
</div>
<div class="form-group">
<label class="control-label">
Skype
</label>
<input type="text" name="skype" id="skype" class="form-control" placeholder="Например 3434324" value="">
</div>
<div class="form-group">
<label class="control-label">
Role
</label>
<input type="text" name="role" id="role" class="form-control" placeholder="Например Администратор" value="">
</div>
</div>
</div>
<div class="centered">
<button type="submit" class="btn btn-success btn-lg" >submit</button>
</div>
</form>
<!-- Форма редактирования в модальном окне -->
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$(".btn").click(function(){
var $td= $(this).closest('tr').children('td');
var name= $td.eq(1).text();
var email= $td.eq(2).text();
var phone=$td.eq(3).text();
var skype=$td.eq(4).text();
var role=$td.eq(5).text();
$("#username").val(name);
$("#email").val(email);
$("#phone").val(phone);
$("#skype").val(skype);
$("#role").val(role);
});
});
</script>
</body>
</html> 2 answer(s)
@azuron
A
Alexander Zachinalov, 2014-10-03 @azuron
$(".btn").click(function(){
Doesn't it bother you that both buttons have a .btn class? Use id
Similar questions
R
V
R
A
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question