如何在Jquery按钮上加载表单?

时间:2012-12-17 22:50:59

标签: php javascript jquery

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

最初隐藏Form2,当用户在Form1中选择输入并单击submit时,Form值将通过表单POST传递给php部分并执行mysql获取并显示带有值的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。 用于在Button上加载表单的JQuery代码点击:

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

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

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

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

问题是,如果JQuery脚本执行,则表单POST不会发生。如果要发生POST,我必须对脚本发表评论。

如何首先执行POST并从数据库中检索数据,然后使用检索到的数据显示Form2。

有人可以帮帮我吗?

1 个答案:

答案 0 :(得分: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();
    });