I have to build a dialog in my entry site. The problem is, it appears every time and I can't close it (click on the button just refreshes the site, with the dialog appearing again). I also thing that I know the reason, but I'm able to fix it.
This is my dialog
<p:dialog id="ac-wrapper" widgetVar="test" style='display: none; background:white;' modal="true"
resizable="false" closeOnEscape="true" closable="true" visible="true">
<div id="popup">
<h2>Some Content</h2>
<input type="submit" name="submit" value="Submit"
onclick="DialogBox('hide')" />
</div>
</p:dialog>
Here is the javascript that should handle this:
<script type="text/javascript">
$ = jQuery;
function DialogBox(hideOrshow) {
if (hideOrshow == 'hide') {
localStorage.setItem("isShown",1);
document.getElementById('ac-wrapper').style.display = "none";
document.getElementById('ac-wrapper').visible="false";
$("#ac-wrapper").close();
}
else if(localStorage.getItem("isShown") == null) {
document.getElementById('ac-wrapper').removeAttribute('style');
localStorage.setItem("isShown",1);
}
}
window.onload = function () {
setTimeout(function () {
if(localStorage.getItem("isShown") != 1 ){
DialogBox('show');
}
else if(localStorage.getItem("isShown")){
$("#ac-wrapper").remove();
}}, 1000);
}
</script>
By rendering the site, the dialog always appeares because the visible attribute is set on "true". I guess the order is incorrect. It should frist check the local storage and then render the elements, I'm not getting it to work correctly. I also looked for answeres here with similar problems, but nothing helped.
The issue is this
<input type="submit" name="submit" value="Submit"
onclick="DialogBox('hide')" />
because its an input type submit, its defaulting to the form behavior... which is to redirect to the same url using GET. Change the type and value to "button" and "close" and your problem will be resolved
Related
I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>
I'm trying to add my CSS animation class to an element when triggered by the js code. JS:
if (document.getElementById("user").value == "test"
&& document.getElementById("pass").value == "test")
{
alert( "Welcome back!" );
}
else {
document.getElementById("fail").className += "animation";
}
The animation won't play when the onclick event listener is triggered. The 'if' part of the statement works correctly but the 'else' part will not run.
CSS:
.animation {
animation: shake 1s;
}
#keyframes shake {
25% { transform: translate(10px)}
50% { transform: translate(-10px)}
75% { transform: translate(10px)}
100% { transform: translate(-10px)}
}
Relevant HTML:
<!--LOGIN-->
<div id="fail">
<p>My Account</p>
<p id="note">Username must be between 6 and 10 characters. <br/>Password must be at least 5 characters contain at least one letter and number.</p>
<form id="login">
<input type="text" placeholder="Username" id="user"/>
<br/>
<input type="password" placeholder="Password" id="pass"/>
<br/>
<input onclick="login()" type="submit" value="Submit">
</form>
</div>
change the submit input attribute type = button.
submit will initiate a request and refresh the page, the animation will not be seen.
U might be putting your script in your login function which submit the form as soon as clicked and reload the page. Try this script...
document.getElementById("login").addEventListener("submit", function (e) {
e.preventDefault();
if (
document.getElementById("user").value == "test" &&
document.getElementById("pass").value == "test"
) {
alert("Welcome back!");
} else {
document.getElementById("fail").className += "animation";
}
});
You need to define load and click events before to add the CSS class.
Try it with the next code and provide feedback please.
<script>
addEventListener("load", eventClick);
function eventClick() {
document.getElementById("user").addEventListener("click", addClass);
};
function addClass() {
var e = document.getElementById("user");
e.classList.add("animation");
};
</script>
ppcoding's solution does work, but in a lot of cases with forms, you do want them to submit—even if you aren't using the built in GET or POST methods for submissions.
Especially for collaboration with other developers, using a <button> with type="submit" is better, so that it's clear that it submits the information.
When doing some kind of custom submission function, you should use preventDefault() on the event:
function login(e) {
e.preventDefault()
// ... continued code
}
Also, it's not recommended to use event listeners in the HTML. It's better to put it in your JavaScript:
<!-- HTML Before -->
<form>
// other inputs
<input onclick="login()" type="submit" value="Submit">
</form>
<!-- HTML After -->
<form id="login">
// other inputs
<button type="submit">Submit</button>
</form>
// JavaScript
const loginForm = document.querySelectorAll('#login')
loginForm.addEventListener('submit', e => {
e.preventDefault()
// ... login
})
I know there was already a solution, but for those that are looking to make their code more professional, this is how you do it.
I have a login.php page. The page contains php and html. When the login button gets clicked it will either log me in and Forward me to the welcome page or output "your Password or username is invalid". I want to change the height of an element. Sadly this doesen't work because php is reloading the page(witch makes sense). I heard i can make it work with Ajax.
Does somebody know how to do that?
Button:
<input id="button" type="submit" value="Log In" onclick="ausgabe();">
Javascript:
function hardgainer(){
var gainheight = document.getElementById('gain')
gainheight.style.height ="220px";
document.getElementById('gain').innerHTML = gainheight;
}
function ausgabe(){
document.getElementById('button') =
hardgainer();
}
You are submitting the form and therefore the page reloads. You should change the type to type="button" and then you can make something like this:
function hardgainer(){
var gainheight = document.getElementById('gain')
gainheight.style.height = "220px";
}
document.getElementById("gbutton").addEventListener("click", function() {
hardgainer()
})
#gain {
background: red;
width: 200px;
}
<input id="gbutton" type="button" value="Log In">
<div id="gain"></div>
i need to display image when form is processing
And this following code works problem is when i press submit image is displayed but if there are some error in form filed the form will not process but images is displayed
How do i make images display when user press submit button the image should appear only when form is processing
CODE
<input onclick="showImg()" class="btn btn-success" type="submit" name="submit" value="Search"/>
<img alt="" src="ajax-loader.gif" id="progress_img" style="visibility:hidden;">
<script language="javascript" type="text/javascript">
function showImg()
{
if (document.getElementById) {
(document.getElementById("progress_img")).style.visibility = "visible";
}
}
</script>
Well I have created a small demo. Check it out.
var progressImg = document.getElementById('progress_img');
var myForm = document.getElementById('myForm');
myForm.onsubmit = onFormSubmit;
function onFormSubmit() {
var error = false;
// Check for errors
if (error) {
// Show error messages
} else {
// Display the image
progressImg.style.display = 'block';
// Do your AJAX call
// and hide the image when AJAX is completed
}
// This is to prevent the form from submitting
return false;
}
#progress_img {
width: 20px;
height: 20px;
display: none;
background: #aaa;
}
<form id="myForm" action="#">
<input class="btn btn-success" type="submit" name="submit" value="Search" />
<img id="progress_img" src="ajax-loader.gif" alt="">
</form>
If anything is not clear for you, feel free to ask me.
I don't think I fully undestood what you are trying to do, but you could validate all the things you need using javascript.
The best way to achieve what you are willing is to change the button type to "button", not "submit" and then on the "onClick" "showImg()" function, replace it for the validations, then show the image, and then use the javascript submit function. I know it's easy with
document.getElementById("myForm").submit();
I'm trying to create a very basic bookmarklet.
My form exists on page, for example mysite.com/posts/, within a bootstrap modal box.
<div class="post-window">
<div class="window-left">
<textarea name="title_image" class="form-control" rows="3" placeholder="Post title"></textarea>
<input name="postimage" class="form-control" placeholder="Post image URL" />
</div>
</div>
<div class="modal-bottom">
<div class="upload">
<input type="hidden" name="letsbingo" value="1" />
<button class="btn-block">Post Selfie</button>
</div>
</div>
1- Following is bookmarklet code and it works fine.
javascript: var selfiesite = 'SelfieNow',
selfiesiteurl = 'http://my.com/post/';
(function () {
if (window.selfiesiteit !== undefined) {
selfiesiteit();
} else {
document.body.appendChild(document.createElement('script')).src = 'http://my.com/assets/js/postit.js';
}
})();
2- The result of above javascript is exactly what I want as shown below
http://my.com/post/?postimage=%3A%2F%2Fexample.com%2Fwp-content%2Fuploads%2F2013%2F12%2FGripster-Wrap-Mini-For-The-Ipad-Mini-3-690x460.jpg&title_image=Example%20-%20Men%27s%20Gear%2C%20Lifestyle%20and%20Trends
3- Now my my.com/post/ contians a piece of javascripts which triggers modal box on window load.
jQuery(window).load(function ($) {
jQuery('#postModal').modal('show');
});
The bookmarklet is working, modal box is opening on window load. But data in not passing to form. The form opens in modal box, url changed but the form appears empty. I don't know what is wrong. Either the modal box is opening (on window load) the wrong way or the bookmarklet created url isn't fit for this kind of form. Please guide me a little bit.
Try to bind your JS function when the modal is show. Like this:
$('#postModal').on('show', function () {
var selfiesite = 'SelfieNow',
selfiesiteurl = 'http://my.com/post/';
if (window.selfiesiteit !== undefined) {
selfiesiteit();
} else {
document.body.appendChild(document.createElement('script')).src = 'http://my.com/assets/js/postit.js';
}
});