Как я могу заполнить мою форму в модальности Bootstrap 3 после нажатия кнопки редактирования таблицы?
Я новичок в этой веб-разработке. Это действительно сводит меня с ума за последнюю неделю. Я хочу, чтобы заполнить форму внутри моего модального, я читал форумы и учебники безрезультатно. Я читал, что вам нужно что-то вроде AJAX, с которым у меня нет опыта, поэтому, если ответ находится в этой области, я был бы очень признателен, если бы вы могли объяснить это новичку, как я.
** В любом случае вот мой стол **
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center;"> ITEM CODE </th>
<th style="text-align:center;"> NAME </th>
<th style="text-align:center;"> SIZE </th>
<th style="text-align:center;"> COLOR </th>
<th style="text-align:center;"> ACTION </th>
</tr>
</thead>
<tbody>
<?php
include('connect.php');
$result = mysql_query("SELECT * FROM products");
while($row = mysql_fetch_array($result))
{
echo '<tr>';
echo '<td style="text-align:center;">'.$row['itemcode'].'</td>';
echo '<td style="text-align:center;">'.$row['name'].'</div></td>';
echo '<td style="text-align:center;">'.$row['size'].'</div></td>';
echo '<td style="text-align:center;">'.$row['color'].'</div></td>';
echo '<td style="text-align:center;"><a data-toggle="modal" data-target="#myModal" href="#">EDIT</a></td>';
echo '</tr>';
}
?>
</tbody>
</table>
У меня есть кнопка редактирования, ссылающаяся на мой модал на этом последнем тэге.
Теперь вот мой модал
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<?php
include('connect.php');
$itemcode=$_GET['itemcode'];
$result = mysql_query("SELECT * FROM products where itemcode='$itemcode'");
while($row = mysql_fetch_array($result))
{
$name=$row['name'];
$size=$_GET['size'];
$color=$_GET['color'];
}
?>
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title" id="myModalLabel">Edit Products</h1>
</div>
<div class="modal-body">
<input type="text" class="form-control input-sm" placeholder="Product name" value="<? echo $name;?>"></input>
<input type="text" class="form-control input-sm" placeholder="Product size" value="<? echo $size;?>"></input>
<input type="text" class="form-control input-sm" placeholder="Product color" value="<? echo $color;?>"></input>
</div>
<div class="modal-footer">
<a href="searchresult.php" class="btn btn-primary btn-lg">DO IT!</a>
</div>
</div>
</div>
</div>
Я, вероятно, делаю это неправильно, и мне, вероятно, не хватает чего-то фундаментального. Если кто-нибудь поможет, пожалуйста, объясните мне, что вы сделали, я все еще не пользуюсь веб-разработкой. Благодарю.
Решение
Хорошо, я не посмотрел на ваш код, но, как вы сказали, вы должны заполнить форму в модальном значении, взятом из любой базы данных и т. Д. Есть три способа … Давайте посмотрим на них
(1) AJAX и Jquery
вам придется использовать его, если вы хотите динамически загружать свои данные внутри формы в модальном режиме.
Как ты можешь это сделать?
добавить событие onclick к кнопке, вызывающей модальный режим, и вызвать функцию, подобную этой
<button data-target = "... etc .." onclick = "load_my_form()"></button>
function load_my_form()
{
$.get("get_form_data.php" , function(result){
$(".my_foarm_loading_modal").html(result); // add this class to the body of the modal
});
}
Теперь на вашей странице php эхо все данные в полях формы, и это будет работать
(2) Ссылка на новую страницу
Сделайте вашу модальную кнопку вызова ссылкой, которая приведет вас на следующую страницу, где вы бы написали php-код внутри вашего модального тела, а затем сделали пользовательский вызов для вашего модального режима в javascript, чтобы он отображался, когда страница заканчивает загрузку …
("#mymodal").show();
Перенаправление
Вы можете сделать ваш модальный вызов div ссылкой, которая вызывает страницу php, затем отобразить все данные в полях формы, добавить их в строку и отправить, отправив эту строку обратно на вашу страницу вызова и в теле модальной записи, написав следующий код
<?php
error_reporting(0);
if(isset($_GET['your_return_var_name']))
{
echo $_GET['your_return_var_name'];
}
?>
Надеюсь, поможет …
Другие решения
«Правильный» способ — использовать ajax для заполнения формы.
Вы можете явно создавать модальные каждый раз на основе ответа AJAX:
$('#activate').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '/ajax/form/populator',
data: {id: },
success: function(formdata) {
createModal(formdata)
}
});
});
Или, что еще лучше, вы создаете в своем файле main.js функцию, которая сделает это за вас:
$('#activate').click(function(e){
e.preventDefault();
showDialog('/ajax/form/populator', 'My super awesome form');
return false;
});
Важно отметить:
Любой HTML, заполненный через ajax, будет нуждаться в обработчиках событий, назначенных после его заполнения, или событие должно основываться на документе (т. Е. На кнопке отправки).
detector