I've tried various solutions and checked similar questions, but I have had no luck so far.
I have a simple div where users can enter their name and surname. My goal is to post the input to another page using jQuery, hide the first div (div1), and show the second div (div2) to ask a question (which is initially hidden).
However, when I submit the form, the data is successfully posted and stored in the database. But, after an alert, div1 reappears and div2 disappears. Can someone please assist me with this issue?
Thank you so much!
Below is the jQuery code:
<script>
function saveDetailsToDB()
{
var name = document.getElementById('name').value;
var surname = document.getElementById('surname').value;
if (name === "" && surname === "")
{
alert("Please enter your details!");
$("#UQ").css( "display", "none");
}
else if(name !== "" && surname === "")
{
alert("Please enter your Surname");
$("#UQ").css( "display", "none");
}
else if(name === "" && surname !== "")
{
alert("Please enter your Name");
$("#UQ").css( "display", "none");
}
else
{
$.post("saveDetails.php",{ name: name,surname: surname });
$("#detailsDiv").hide();
$("#UQ").show();
alert('You have been successfully registered!');
}
}
</script>
Here is the HTML code:
<div id = "detailsDiv">
<form>
<b><label>Name:</label></b><br>
<input type = "text" id = "name"><br><br>
<b><label>Surname:</label></b><br>
<input type = "text" id = "surname"><br><br>
<button onclick="saveDetailsToDB();">Send</button>
</form>
</div>
<div id = "UQ">
<b><label>Please enter your question.</label></b><br><br>
<form>
<textarea id = "question" rows="4" cols="40"></textarea><br><br>
<button onclick="saveQuestionToDB()">Save</button>
</form>
</div>