Show loading gif after clicking form submit using jQuery - javascript

I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to visibility: hidden.
<script src="js/jquery-1.11.1.min.js"></script>
<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
<img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
<div class="fade" id="form">
<form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
<label for="username"> Username:</label>
<input type="username" name="username" id="username" size="30" required><br><br>
<label for="password"> Password:</label>
<input type="password" name="password" id="password" size="30" required><br><br>
<input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
</form>
</div>
</div>
<div class="fifty"></div>
<script type="text/javascript">
$('.load_button').submit(function() {
$('#gif').show();
return true;
});
</script>

The show() method only affects the display CSS setting. If you want to set the visibility you need to do it directly. Also, the .load_button element is a button and does not raise a submit event. You would need to change your selector to the form for that to work:
$('#login_form').submit(function() {
$('#gif').css('visibility', 'visible');
});
Also note that return true; is redundant in your logic, so it can be removed.

Button inputs don't have a submit event. Try attaching the event handler to the form instead:
<script type="text/javascript">
$('#login_form').submit(function() {
$('#gif').show();
return true;
});
</script>

Better and clean example using JS only
Reference: TheDeveloperBlog.com
Step 1 - Create your java script and place it in your HTML page.
<script type="text/javascript">
function ShowLoading(e) {
var div = document.createElement('div');
var img = document.createElement('img');
img.src = 'loading_bar.GIF';
div.innerHTML = "Loading...<br />";
div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
div.appendChild(img);
document.body.appendChild(div);
return true;
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
}
</script>
in your form call the java script function on submit event.
<form runat="server" onsubmit="ShowLoading()">
</form>
Soon after you submit the form, it will show you the loading image.

What about an onclick function:
<form id="form">
<input type="text" name="firstInput">
<button type="button" name="namebutton"
onClick="$('#gif').css('visibility', 'visible');
$('#form').submit();">
</form>
Of course you can put this in a function and then trigger it with an onClick

Related

How to display entered text in an textbox?

I would like to enter a text in an input field and have it displayed in a text box.
I think it's easy. I need one Input for enter a text, a button and a textbox to show my text. But my code doesn't work.
This is my code:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function ausgabe(){
var text=document.getElementById("text");
var Wiedergabe=document.getElementById("Wiedergabe");
var Text=text.value;
Wiedergabe.value=Text
}
</script>
<div class="Webview">
<div class="message_container" id="myForm" ></div>
<form class="send_container">
<input type="text">
<button type="submit"
value="Nachricht absenden"
onclick="ausgabe">
</form>
</div>
#charset "UTF-8";
.Webview{
height: 400px;
width: 300px;
}
.message_container{
height: 80%;
width: 100%;
border:5px solid green;
}
.send_container{
height: 20;
width: 100%;
}
.send_container input{
width: 70%;
height:20%
border:2px solid #1CE615;
}
.send_container button{
width: 30%;
height:20%;
}
I think you somehow did some misconceptions about id and naming, you are trying to access elements with wrong names - a solution can be the following:
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="click me!"
onclick="document.getElementById('div').innerHTML =
document.getElementById('textField').value" />
</p>
<h3><div id="div"></div></h3>
I found few issues in your code, let me summarize that here:
For input element for user provided text you had the <input type="text"> which should have an id attribute as well in order to catch by getElementById.
In order to find an aim element, you need to also provide a proper id or class. I guess with the message_container you can achieve that by using document.getElementsByClassName('message_container')[0]. Then you can set the value of that element with innerHTML property.
So based on my explanation I think this solution can work for you:
const ausgabe = () => {
const textInput = document.getElementById("text");
const messageContainer = document.getElementsByClassName('message_container')[0];
messageContainer.innerHTML = textInput.value;
}
<div class="Webview">
<div class="message_container" id="myForm"></div>
<form class="send_container">
<input id="text" type="text" />
<button type="button" onclick="ausgabe()">Nachricht absenden</button>
</form>
</div>
I hope this helps!

.php file won't display form data

I'm trying to change my "Submit" button style when a user clicks on it upon submitting the form.
The action attribute calls PHP file, but the actual data doesn't display until I remove onSubmit attribute from my form. Then I can't use sendBtn() function to change the style of the button.
Pseudo-class option is not good, because it would change the style even if the form is empty.
Any ideas?
PS. I'm on local server with MAMP and using Dreamweaver for editing.
<form class="customform" method="post" action="emailOnServer.php" method="post" onSubmit="return sendBtn();" autocomplete="on" >
<div class="s-12" onClick="formFocus()"><input id="imie" name="imie1" placeholder="Twoje imię" type="text" required </input></div>
<div class="s-12" onClick="formFocus()"><input id="email" name="email1" placeholder="Twój e-mail" type="email" required </input></div>
<div class="s-12" onClick="formFocus()"><textarea placeholder="Wiadomość" id="pole" rows="5" style="resize:none;" required></textarea </input></div>
<div class="custom2" style="width: 34%; float: right;" ><input id="se" type="submit" value="Wyślij" style="background-color:#92c500; color: white; border-color:#6C0;" ></input> </div>
<div class="custom1" style="width: 65%;" ><button id="resetButton" onclick="cleanBtn()" type="reset" style="background-color: #808080; color: white; border-color:#066; border-radius:2px;">Wyczyść </button></div>
<img id="tick123" src="img2/green-tick-icon-0.png" style="display: none; float:right; position:absolute; right:1%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/>
<img id="tick1234" src="img2/green-tick-icon-0.png" style="display: none; position:absolute; left:58%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/>
</form>
<!-- more code to change form style on focus -->
function sendBtn() {
if ( document.getElementById('email').value.indexOf("#")> 0 &&
document.getElementById('email').value.indexOf(".")> 2 &&
document.getElementById('imie').value != 0 &&
document.getElementById('email').value != 0 &&
document.getElementById('pole').value != 0){
document.getElementById('se').style.backgroundColor = "#00283A";
document.getElementById("tick123").style.display="block";
document.getElementById('se').value="Wysłano";
document.getElementById('email').disabled=true;
document.getElementById('imie').disabled=true;
document.getElementById('pole').disabled=true;
return true;}}
It's from a free template and I know I should've used css stylesheets to make it more readable
This is emailOnServer.php file:
<body>
Hello User
<?php $name = $_POST['imie1'];
echo $name; ?>
</body>
First, your HTML have some errors, e.g.:
<input id="imie" .... type="text" required </input>
// look here ^
// the tag is not closed correctly
should be
<input id="imie" name="imie1" placeholder="Twoje imię" type="text" required />
Anyway, if you need to remove the onsubmit attribute, you can do something like this
<form name="myform" ...>
...
</form>
then, the js
var form = document.forms.myform;
form.onsubmit = function(){
// do stuff
document.getElementById('se').style.backgroundColor = "#00283A";
// ...
}
This jsfiddle has an example code for your requirements. The form elements was simplified.

Trying to show an element on form submit

I'm trying to show a loader.gif image when my form is submited.
My loader.gif has display:none in CSS, and I want to display it, when the form is submited.
I'm trying to do this using my simple code below.
It seems correct for me but it's not working.
Do you see something wrong here?
jQuery:
$(function(){
$('form').submit(function(){
$('.loginbox h1 img').fadeIn('fast');
});
});
CSS:
.loginform h1 img {
float:right;
margin:7px 0;
display:none;
}
HTML:
<h1>Login Form: <img src="img/loader.gif"/></h1>
<form name="login" action="" method="post">
<label>
<span>User:</span>
<input type="text" name="user" />
</label>
<div class="label">
<span>Pass:</span>
<input type="password" name="pass" />
<input type="submit" value="Login"/>
</div>
</form>
I suppose that is because, once it is submitted, it is posting back or reloading or redirecting.
You can do this:
$(function(){
$('form').submit(function(e){
e.preventDefault(); // prevents submission
$('h1 img').fadeIn('fast'); // since you aren't using that class
$.ajax({ ... }); // use ajax to submit the form
});
});

JQuery Validation use different divs for different input elements for errors, and multiple error classes

I'm using JQuery Validation on my form, and I'm trying to get the input elements to show a red border if the input is invalid, and also show the error message underneath the appropriate input element.
My HTML code is basically this:
<div id="formContainer">
<form id="mainForm" action="action.php" method="post">
<input class="formTextBox" type="url" name="website" placeholder="website" required />
<input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
<button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Snapshot my site</span> </button>
</form>
</div>
I've tried adding specific DIVs after the form (still in #formContainer), that will get populated with the error using the errorPlacement option. Inside the function I check the element's name attribute, and append the error to its corresponding div... but when I continue typing, or clicking between inputs, the error message keeps repeating and repeating and no error ever gets cleared (I see the same error message many times, one underneath the other).
I've tried putting each input element inside its own div (with a fixed width), and set the errorElement to DIV, so when JQuery Validation creates that new div and appends it next to the input element, it will get pushed underneath... but that caused some design issues, and I'd prefer the 2 error containers to be in the #formContainer div (and it seems a little bit wonky to do it that way).
Also, what do I do if need to style both the error on the input element, and the error message DIVs?
Here's a little illustration of what I had in mind:
Thanks!
Try
<div id="formContainer">
<form id="mainForm" action="action.php" method="post" novalidate>
<div class="input-control">
<input class="formTextBox" type="url" name="website" placeholder="website" required />
</div>
<div class="input-control">
<input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
</div>
<button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Submit</span>
</button>
</form>
</div>
then
#formContainer {
vertical-align: top;
}
.input-control {
display: inline-block;
vertical-align: top;
}
div.error {
display: block;
background-color: red;
color: white;
}
input.error {
border: 1px solid red;
}
.formTextBox {
width: 210px;
background-color: white;
color: black;
}
and
jQuery(function ($) {
var validator = $('#mainForm').validate({
rules: {},
messages: {},
errorElement: "div"
});
});
Demo: Fiddle

javascript multi-content opening

Hello I'm having a big problem with this code
<script type="text/javascript">
function opencontent(imgClass){
imgTag = $('.'+imgClass).$('.header').('#showContent').$('img').attr('class');
if(imgTag == 'hiden'){
$(imgTag).val('show');
$('.'+imgClass).$('.body').toggle();
}else{
$(imgTag).val('hiden');
$('.'+imgClass).$('.body').toggle();
}
}
</script>
<div class="login">
<div class="header">
<a id="showContent" onclick="opencontent('login');"><img class="hiden" align="center" src="images/hbullet.png" style="top: -4px; position: relative; left: -7px;" />Login</a>
</div>
<div class="body">
<form method="post" target="_self">
<input name="login_username" placeholder="Username" type="text" />
<input name="login_password" placeholder="Password" type="password" />
<input value="Login" type="submit" style="width: 263px;" />
</form>
</div>
Basically what i want to do with this code is, having an "a" tag, with an image inside it, that on click of "a" tag it change the img class, and open/hides the body class of same time, but I must obligatory have {onclick="opencontent('login');"} code so that i may be able to use this method with the other codes i have equal to this except the code inside the body class.
Any one knows anything that works well with what I want?
Edit~
Ok problem solved this way.
<script type="text/javascript">
function opencontent(imgClass){
var clas = $('.'+imgClass+ '> .header > a > img').attr('class');
if(clas == 'hidden'){
clas.val('show');
$('.'+imgClass+ '> .body').slideToggle();
}else{
clas.val('hide');
$('.'+imgClass+ '> .body').slideToggle();
}
}
</script>

Categories

Resources