So, I'm working on a website, and I am trying to implement a dialogue page that asks for a passcode and then submits it to a php script to validate it. I have successfully implemented that part of the code, but another problem has risen. Whenever I close my dialogue box, whatever is in the input somehow gets inserted into the url of the page as if posting an ajax request! This is a serious problem because it reveals the entered passcode.
Here's mycode:
<div data-role="page" data-dialog="true" id="LoginForm">
<div data-role="header">
<h1>Enter Passcode!</h1>
</div>
<div data-role="main" class="ui-content">
<p style="text-align: center; padding: 5px; background-color: #110000;" id="LoginFormTitle">Please enter passcode for current war!</p>
<form data-ajax="false" method="POST">
<div class=\"ui-field-contain\">
<input type="password" name="LoginPasscode" id="LoginPasscode" placeholder="Enter Passcode for War here"/>
<input type="button" value="Submit" onclick="login()" />
</div>
</form>
<div data-role="popup" id="LOginResultMsg" data-overlay-theme="b" style="padding: 15px;"></div>
</div>
<div data-role="footer">
<h1>Please gain war code from Slayer. Thanks!</h1>
</div>
</div>
Please help! Thanks.
EDIT: Here's the login function:
function login()
{
var serverurl = getSiteURL() + "validateWarPass.php";
var passcode = {WarPass: $("#LoginPasscode").val()};
$.ajax({
type: "POST",
url: serverurl,
data: passcode,
success: function (response) {//response is value returned from php (for your example it's "bye bye"
if(response == 1)
{
sessionStorage.canViewAddWar = true;
ShowAttacksScheduled();
showWarStatus();
$.mobile.changePage( localStorage.SelPage, { transition: "slideup", changeHash: false });
}
else
{
sessionStorage.canViewAddWar = false;
$("#LoginFormTitle").html("<span style=\"color: red\">Invalid Passcode!</span>");
}
}
});
$("#LoginPasscode").val("");
}