Question

我是这个Web开发类的新手。这真是让我疯狂过去一周。我想在我的模态中填充我的表单，我一直在阅读论坛和教程无济于事。我读到你需要一些我没有经验的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>

我有一个编辑按钮，链接到我最后一个td标签上的模态。

现在这是我的模态

<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">&times;</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>

我可能以错误的方式做这件事，我可能错过了一些基本的东西。如果有人会帮忙请向我解释你做了什么我仍然不习惯网络开发。感谢。

Answer 1

好的，我没有给你的代码看一下，但正如你所说的那样，你必须在模态中用从任何地方等数据库取得的值来填充你的表单有三种方式...让我们来看看它们

（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'];
}

?>

希望它有所帮助...

Answer 2

＆＃34;适当＆＃34;方法是使用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;
});

重要的是要注意：

通过ajax填充的任何HTML都需要在填充后分配事件处理程序，或者事件需要基于文档（即提交按钮）。

如何在表编辑按钮单击时在Bootstrap 3模式中填充表单？

2 个答案: