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();
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 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
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 have a form with a textbox and then another form with three textboxes.
The text I enter in the first textbox (id="logoName") should be visible in the other three (ids v1 - v3) when i click the button. I tried the following, but when I click the button, the text in the first box disappers instead of showing in the others as well... what did I do wrong? Thanks a lot for your help!!!
JS
var logoName = document.getElementById("logoName");
var v1 = document.getElementById("v1");
var v2 = document.getElementById("v2");
var v3 = document.getElementById("v3");
var button = document.getElementById("button");
function sync() {
v1.value = logoName.value;
v2.value = logoName.value;
v3.value = logoName.value;
}
button.onclick = sync();
CSS
p {
font-size: 2em;
float: left;
margin-right: 2em;
}
.clear {
clear: both;
}
.overview {
margin-top: 2em;
}
input[type="text"] {
font-size: 2em;
width: 200px;
}
HTML
<form>
<label>Logo-Name</label>
<input id="logoName" type="text"/>
<button id="button">synchronise</button>
</form>
<form class="overview">
<input id="v1" type="text" /> <input id="v2" type="text" /> <input id="v3" type="text" />
</form>
You are experiencing 2 basic errors there:
1- you are not preventing the default action of the submit button and
2- you are not assigning properly the sync function to the button
Like this:
button.onclick = function() {sync();return false;}
you have some options:
you can set type="button" to your button so it doesn't submit your form, because this reload the full page and you are starting from 0, that is way the text disappears.
you can put your button out of the form tag.
and you are passing the result of sync() to the button.onclick, not the function. So, you can try
button.onclick = sync
happy codding
First, your JS code is calling the function as it is loaded:
button.onclick = sync();
should be
button.onclick = sync;
(you assign the function code to the event, not the function execution)
Second, when using the button tag inside the form, it seems to be automatically interpreted as a "submit" button. When clicking it, your form is "posted" to nowhere, so the value disappears. Try replacing the button tag with an input tag with type button.
Fiddle for you
http://jsfiddle.net/tn91aou1/3/