With this code, when a user click inside my pop-up form this pop-up stay. But when the user click in the ? to recover the password the pop-up for that is showed, but doesnt close the login form.
Any ideas how to close the login pop-up??
HTML Code:
<div id="joinusLogin">
<div id="backgroundOpacity"></div>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"/><br />
<input id="loginFormFields" type="text" name="password" placeholder=" Password"/>
<div id="requestPassword">
?
</div>
<br />
<input id="submitLogin" type="submit" value="LOG IN"/>
</form>
<div id="signupNow">
Don't have an account yet?
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
Sign up here.
</a>
</div>
</div>
<div id="passwordRecover">
<div id="backgroundOpacity"></div>
<form id="passwordRecoverForm">
<input id="passwordRecoverFields" type="email" name="email" placeholder=" E-mail"/><br />
<input id="submitPasswordRecover" type="submit" value="SEND PASSWORD"/>
</form>
<div id="signupNow">
Don't have an account yet?
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
Sign up here.
</a>
</div>
</div>
Javscript Code
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
$('body').click(function(){
$('#inviteNowSignup, #joinusLogin, #passwordRecover').hide();
});
$('body').on('click',"#signupForm, #loginForm, #passwordRecoverForm",function (e){
e.stopPropagation();
});
As seen in your code. You have handled the opening and closing of those elements which have been clicked and passed to your function. But you have not handled those which are already open.
Try to add this line before the function
$('#inviteNowSignup, #joinusLogin').hide();
It will hide the other divs.
BTW nice work with single function to hide and unhide.
Related
this is my form:
<div class="notification">
<p style="font-family: 'Roboto', sans-serif;">Enter your email to notify you when the app you selected become available.</p>
<form class="form-inline">
<div class="form-group">
<label for="inputemail"></label>
<input type="email" class="form-control" id="inputemail" placeholder="Email Address" size="25">
<button type="submit" class="btn btn-primary" onclick="displayMessage()">NOTIFY ME</button>
<small id="emailHelp" class="form-text text-muted">*we will never sell<br>your email</small>
</div>
</form>
</div>
when i click on NOTIFY ME button, i want my my form to disappear and i want to put a message inside that notification div, like this: message after click
what is the best way to do this?
You need to understand that when you click the button the browser will refresh the page so you need to add a listening and prevent the default. From there I simple got the div element by Id and change the innnerHTML attribute.
<script>
let string = 'We will email you when your app becomes available'
function handleClick(event){
event.preventDefault();
let notifDiv = document.getElementById("notifications");
notifDiv.innerHTML = string
}
document.getElementById("notifications").addEventListener("click", handleClick)
</script>
Use jquery to change the content of the div has class "notification".
$(document).ready(function(){
$("button").click(function(){
$(".notification").html('<p><center><b>We will email you when your app becomes available.</b></center></p>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="notification">
<p style="font-family: 'Roboto', sans-serif;">Enter your email to notify you when the app you selected become available.</p>
<form class="form-inline">
<div class="form-group">
<label for="inputemail"></label>
<input type="email" class="form-control" id="inputemail" placeholder="Email Address" size="25">
<button type="submit" class="btn btn-primary">NOTIFY ME</button>
<small id="emailHelp" class="form-text text-muted">*we will never sell<br>your email</small>
</div>
</form>
</div>
I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.
You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');
while i am pressing enter key its calls function which automatically refreshing the page. the function i wrote for cancel button
<form name="myForm">
<div >
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div >
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<div >
<button type="Cancel" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
after filling any of textfield press enters its calls the clearDetails function
$scope.addDetails = function() {
var postObj = new Object();
// add details stuff here
}
$scope.clearDetails = function() {
//refresh the page stuff here
//here i am redirecting to the same page
}
Change the type of the cancel button to reset:
<form name="myForm">
<div>
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div>
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<button type="reset" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</form>
On many browser enter consider as submit form or associate with first button click .. just a suggestion move submit button up and cancel button down in html it might solve the problem.
make sure there must be space between two attributes of submit button. You wrote the code as
<button **type="submit"ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
it must be
<button **type="submit" ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
I have a popup login form. I want the form to submit, then close that popup window. How can I accomplish this? The window is currently set to close before the return for the function happens. Where does window.close() go in this case? Thank you for any help.
Form:
<form name="catseczoneform30738" onSubmit="return checkWholeForm30738(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12695&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item">
<label for="SZUsername">Username</label>
<br />
<input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
</div>
<div class="item">
<label for="SZPassword">Password</label>
<br />
<input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
</div>
<div class="item">
<input type="checkbox" name="RememberMe" id="RememberMe" />
<label for="RememberMe">Remember Me</label>
</div>
<div class="item">
<input class="cat_button" type="submit" value="Log in" />
Lost password?</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm30738(theForm){var why = "";
if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");
if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");
if (why != ""){alert(why);
return false;
}
theForm.submit();
window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
window.close();
return false;
}
//]]>
</script>
</form>
If possible the window.close() should be included as part of the server response to your submit event. If you include the window.close() as part of the submit on the form, it will cause your form to close before the submit has actually happened.
I am writing simple form with two text boxes for logIn process and wanted to get this form
submitted on the click of "Go" button of the i-Phone keyboard which get open as the textbox
gets focus.
When i keep a submit button with these two text boxes the go button starts working otherwise
it won't.
i am using
jQuery mobile v1.2.0
PhoneGap v2.5
code without submit button:
<form id="loginForm">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
</div>
</div>
</form>
code with submit button:
<form id="loginForm" data-ajax="false">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
<button type="submit" data-theme="none" name="submit" value=""></button>
</div>
</div>
</form>
I don't need submit but since i have to submit form using iPhone soft keyboard any help is very much appreciated.
Thanks.
you need a keypress event my friend. The "Go" button on your phone is equivalent to the Enter key of your physical keyboard. You have to check for that keyCode. Here's a code :
$("#my-controlgroup").on("keypress", "input[type=text]", function(e) {
//check for enter key
if(e.which === 13) {
//check for empty input
if($("input:empty").length === 0) {
alert("submitted!");
}
}
});
Here's the Fiddle, if it helps !
<form id="loginForm" data-ajax="false">
<div class="ui-body">
<div data-role="controlgroup" id="my-controlgroup">
<input data-theme="b" type="text" name="text-username" id="text-username" placeholder="Username" value="" />
<input data-theme="b" type="password" name="text-pwd" id="text-pwd" placeholder="Password" value="" />
<button type="submit" data-theme="none" name="submit" value="">GO</button>
</div>
</div>
</form>