Um ein Popup für bestimmte Zeit anzuzeigen und dann auf eine andere Seite mit PHP umleiten

Question

Wenn ich das Formular absende, möchte ich ein Jquery-Dialogfeld (keine Warnung) zeigen Erfolg Nachricht für eine bestimmte Zeit anzeigen und dann sollte es auf eine neue umleiten Seite nach dieser Zeit ist vorbei. Bitte markieren Sie diese Frage nicht als Duplikat, ich weiß, dass diese Frage schon beantwortet wurde, aber keiner von ihnen gibt mir das gewünschte Ergebnis. Hier ist mein html Code-

<form action="submit.php" method="POST"> 
Name:<input type="name" id="name" /> 
Age:<input type="age" id="age" /> 
<input type="submit" name="save" /> 
</form> 

Hier mein submit.php code-

ist

<?php 
include('db.php'); 
$sql ="INSERT INTO details(`name`) VALUES ('".$_POST["name"]."','".$_POST["age"]."')"; 
if ($conn->query($sql) === TRUE) { 
/*here i want to display the dialog and then redirect to new page i.e.-header('Location:enter.php')*/ 
    header('Location:enter.php'); 
} else { 
echo "Error: " . $sql . "<br>" . $conn->error; 
} 
$conn->close(); 
?> 

ich onsubmit=popup(); versucht, aber das gibt mir nicht die Bestätigung, dass das Formular abgeschickt wurde.

function popup(){ 
    $("#mess").dialog({}); 
    setTimeout(wait, 3000); 
    } 

Vielen Dank im Voraus.

Answer 1

Dies könnte Ihnen den Einstieg:

:

delayTime = 2000; //milliseconds 
 
$('form').submit(function() { 
 
    $('#myMessage').fadeIn(); 
 
    setTimeout(function() { 
 
    $('#myMessage').fadeOut(); 
 
    }, delayTime); 
 
    //Submission continues after timeout 
 
});

#myMessage { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: black; 
 
    opacity: 0.8; 
 
    z-index: 999; 
 
    display: none; 
 
} 
 
#myMsgDlg { 
 
    position: relative; 
 
    top: 50px; 
 
    width: 60vw; 
 
    height: 60vh; 
 
    margin: 0 auto; 
 
    color: yellow; 
 
    border: 1px solid orange; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myMessage"> 
 
    <div id="myMsgDlg"> 
 
    <h3>Any HTML at all can be in here</h3> 
 
    <img src="http://placekitten.com/300/100" /> 
 
    </div> 
 
    <!-- #myMsgDlg --> 
 
</div> 
 
<!-- #myMessage --> 
 

 
<form action="submit.php" method="POST"> 
 
    Name: 
 
    <input type="name" id="name" />Age: 
 
    <input type="age" id="age" /> 
 
    <input type="submit" name="save" /> 
 
</form>

---

Wenn Sie eine Bestätigungsmeldung angezeigt werden soll, nachdem das Formular vorgelegt wurde, der Code sollte wie folgt aussehen

$('#submitme').click(function() { 
 
    var nam = $('#name').val(); 
 
    var age = $('#age').val(); 
 
    if (nam == '' || age == '') { 
 
    alert('Please complete all fields'); 
 
    } 
 
    $.ajax({ 
 
    type: 'post', 
 
    url: 'submit.php', 
 
    data: 'nm=' + nam + '&ag=' + age 
 
    }).done(function(d) { 
 
    if (d == 'success') { 
 
     $('#myMessage').fadeIn(); 
 
     setTimeout(function() { 
 
     $('#myMessage').fadeOut(); 
 
     }, 1500, function() { 
 
     window.location.href = 'enter.php'; 
 
     }); 
 
    } else { 
 
     alert(d); 
 
    } 
 
    }); //END done function 
 
}); //END submitme.click

#myMessage { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: black; 
 
    opacity: 0.8; 
 
    z-index: 999; 
 
    display: none; 
 
} 
 
#myMsgDlg { 
 
    position: relative; 
 
    top: 50px; 
 
    width: 60vw; 
 
    height: 60vh; 
 
    margin: 0 auto; 
 
    color: yellow; 
 
    border: 1px solid orange; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myMessage"> 
 
    <div id="myMsgDlg"> 
 
    <img src="http://placekitten.com/300/150" /> 
 
    <h3>Any HTML at all can be in here</h3> 
 
    </div> 
 
    <!-- #myMsgDlg --> 
 
</div> 
 
<!-- #myMessage --> 
 

 
<div id="myDiv"> 
 
    Name: 
 
    <input type="name" id="name" />Age: 
 
    <input type="age" id="age" /> 
 
    <input id="submitme" type="button" /> 
 
</div>

Und Ihre PHP wäre jetzt:

<?php 
    include('db.php'); 
    $sql ="INSERT INTO details(`name`) VALUES ('".$_POST["name"]."','".$_POST["age"]."')"; 
    if ($conn->query($sql) === TRUE) { 
     echo 'success'; 
    } else { 
     echo "Error: " . $sql . "<br>" . $conn->error; 
    } 
    $conn->close(); 
?>