I have a custom login page the makes use of the SiteLoginController. When the user inputs their username and password, I need a popup window to appear that they would need to acknowledge before it logs them in. So far, I've tried using some javascript in the command button, but I haven't had any luck.
VF Page:
<script>
function showSimpleDialog(){
var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);
sd.setTitle("Test Pop up");
sd.createDialog();
window.parent.sd = sd;
sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");
sd.show();
}
showSimpleDialog(); //open the popup
</script>
<apex:form styleClass="form-login" id="loginForm" forceSSL="true">
<apex:actionFunction name="javascriptLogin" action="{!login}" />
<apex:pageMessages id="error" />
<apex:outputLabel styleClass="label"
value="{!$Label.site.username}" for="username" />
<apex:inputText styleClass="form-control" id="username"
value="{!username}" html-placeholder="username"/>
<apex:outputLabel styleClass="label"
value="{!$Label.site.password}" for="password" />
<apex:inputSecret styleClass="form-control" id="password" html-placeholder="password"
value="{!password}" onkeypress="return noenter(event);" />
<p>
<apex:commandButton value="Login" styleClass="btn btn-sm btn-primary btn-block forgot-password btn-width btn-shade"
action="{!login}" id="submitbutton" onclick="showSimpleDialog()"/>
</p>
</apex:form>
Any ideas on how to solve for this?
Thanks!
Best Answer
The
commandButton
by default will execute both theonClick
event as well as the apex action. You will need to replace thecommandButton
with a normal HTMLinput
button, then from within your JavaScript popup you need to call anapexFunction
that will call the actual apex method. So your code should look something like this: