javascript — форма в модале должна отображать результат в том же модале

Question

javascript — форма в модале должна отображать результат в том же модале

У меня есть форма в модальном окне, и форма отображает базу данных формы результата, которая нам хорошо. Это приведет меня к странице с именем 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)

0

ajax javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Затем вы должны сначала изменить тип кнопки на 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 )
});
});

Надеюсь это поможет.

0