У меня есть форма в модальном поле, и форма отображает базу данных форм, которая нам хорошо. Это приведет меня к странице под названием 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>
это изображение ( http://img.ruphp.com/javascript/6xlU3.jpg )
и это обновленное изображение ( http://img.ruphp.com/javascript/jRnV2.jpg )
Затем вы должны сначала изменить тип кнопки на 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 ) }); });
Надеюсь это поможет.