Почему данные при отправке исчезают из формы модального окна Bootstrap?

Question

Viktor Grachev @azuron

Laravel разработчик

Почему данные при отправке исчезают из формы модального окна Bootstrap?

Добрый вечер уважаемые коллеги! Бьюсь уже вторые сутки, не могу победить проблему отправки данных из модального окна Bootstrap. У меня есть таблица с пользователями и в каждой строке кнопка редактирования юзера. При нажатии по которой всплывает модальное окно в поля которого с помощью Jquery подставляются значения. Проблема в том что при нажатии кнопки отправить все поля отчищаются и форма предает пустой массив POST. Помогите пожалуйста, не могу понять в чем проблема? Вот мой код:

<!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;">test1@test.ru</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;">test2@test.ru</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;">test3@test.ru</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">&times;</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="Например test@test.ru"  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>