Question

我在模态框中有一个表单，表单显示结果表单数据库，我们很好。这将我带到一个名为dutydata.php的页面，但我希望结果显示在同一个模式框中。那是当我点击提交按钮时，它会在同一个模态框中显示我的结果。

html表单代码：

<form name="" method="POST" action="dutydata.php" validate>
    <input type="text" name="military_id">
    <button type="submit" name="verify">VIEW</button>
</form>

显示模态的javascript代码：

    <script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
    modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
    modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
    }
    </script>

值班数据的PHP代码

    <?php
    require ('dbconnection.php');
    ?>

    <?php
    if(isset($_POST['verify'])) {
    $set = $_POST['military_id'];
    $show = " SELECT * FROM profile WHERE military_id = '{$set}' ";
    $result = mysqli_query($conn, $show) or die(mysqli_error($conn));
    while ($row = mysqli_fetch_array($result)) {
        $military_id=$row['military_id'];
        $first_name=$row['first_name'];
        $last_name=$row['last_name'];
        $paygrade=$row['paygrade'];
        $military_rank=$row['military_rank'];
        $mission_country=$row['mission_country'];
        $duty_status=$row['duty_status'];
        $photo=$row['photo'];

    }
    }
    else {
        echo "Not Found";
    }

    ?>
    <table width="398" border="0" align="center" cellpadding="0">
    <tr>
        <td height="26" colspan="2">Your Information</td>
        <td><div align="right"><a href="index.php">Close</a></div></td>
    </tr>
    <tr>
        <td width="129" rowspan="5"><img src="<?php echo $photo ?>" width="129" height="129" alt="no photo found" /></td>
        <td width="82" valign="top"><div align="left">Military ID.:</div></td>
        <td width="165" valign="top"><?php echo $military_id ?></td>
    </tr>
    <tr>
            <td valign="top"><div align="left">First Name:</div></td>
        <td valign="top"><?php echo $last_name ?></td>
    </tr>

    <tr>
            <td valign="top"><div align="left">Last Name:</div></td>
        <td valign="top"><?php echo $first_name ?></td>
    </tr>
    <tr>
            <td valign="top"><div align="left">Pay Grade:</div></td>
        <td valign="top"><?php echo $paygrade ?></td>
    </tr>

    <tr>
            <td valign="top"><div align="left">Rank:</div></td>
        <td valign="top"><?php echo $military_rank ?></td>
    </tr>

    <tr>
            <td valign="top"><div align="left">Mission Country:</div></td>
        <td valign="top"><?php echo $mission_country ?></td>
    </tr>
    <tr>
            <td valign="top"><div align="left">Duty Status:</div></td>
        <td valign="top"><?php echo $duty_status ?></td>
    </tr>
    </table>

这是图像（https://i.stack.imgur.com/6xlU3.jpg）

这是更新后的图片（https://i.stack.imgur.com/jRnV2.jpg）

Answer 1

然后，您必须先将按钮的类型更改为button以阻止该子请求并将click事件附加到此按钮并发送ajax请求。

HTML：

<form name="" method="POST" action="dutydata.php" validate>
    <input type="text" name="military_id">
    <button type="button " name="verify">VIEW</button>
</form>

JS：

//Attach click event to the button
$('[name="verify"]').on('click', function(){

    //Send a post request to the 'dutydata.php' and get the result
    $.post('dutydata.php',{military_id: $('[name="military_id"]').val(),verify: $('[name="verify"]').val()}, function(result){

        //Append the result where you want
        $('#myModal form').after( result )
    });
});

希望这有帮助。

模态中的表格需要以相同的模态显示结果

1 个答案: