如何在 Jquery 按钮单击时加载表单？答案

【问题标题】：How to load a form on Jquery button click?如何在 Jquery 按钮单击时加载表单？
【发布时间】：2012-12-17 22:50:59
【问题描述】：

我在一个 php 文件中有两种形式。 Form1 将从用户那里获取输入并将查询传递给 Mysql 数据库并从数据库中检索数据，并且必须填充 Form2。

最初 Form2 是隐藏的，当用户在 Form1 中选择输入并单击提交时，Form 值将通过表单 POST 传递给 php 部分并执行 mysql fetch 并显示 Form2 的值。

Form1的输入按钮：

  <input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />

POST 表单值的代码：

$date=$_POST['datepicker'];
$machine = $_POST['selectMachine'];
$user = $_POST['selectUser'];
$shift=$_POST['selectShift'];
$start_time_query = mysql_query("select time from rpt_shift_log where ((date='$date' and shift_def='$shift' and event_type='$even_type_up_id') and (machine='$machine' and employee='$user'))");


while($start_time_Row = mysql_fetch_assoc($start_time_query)) 
{
    $start_time = $start_time_Row['time'];      
}

我正在像这样在 Form2 的文本框中使用计算值。

  <input id="start_time_text" class="start_time_text" type="text" name="start_time_text" value="<?php echo $start_time?>">

但是现在我已经阻止了在单击按钮时加载 Form2 的脚本。在按钮单击时加载表单的 JQuery 代码：

<script type="text/javascript">
    $(document).ready(function(){

        $("#buttonProductionSummary").click(function(e) {

            $("#productionForm").show();

            e.preventDefault();
        });
    });
</script>

问题是，如果 JQuery 脚本执行，Form POST 不会发生。如果要发布 POST，我必须评论脚本。

如何先进行 POST 并从数据库中检索数据，然后显示检索到的数据的 Form2。

有人可以帮帮我吗？

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

你知道e.preventDefault(); 做什么吗？它会阻止默认操作触发！所以表格不会提交。如果您不想回发页面，则需要向服务器发送Ajax call 以获取第二个表单的数据。

    $("#buttonProductionSummary").click(function(e) {
        $.post("test.php", $("#testform").serialize(), function(data) {
            //do something with the data returned from the server.
            $("#productionForm").show();
        });
        e.preventDefault();
    });

【讨论】：

我将值发布在与表单相同的页面中。我稍微修改了一下我的问题。