Issue
I am new to jquery & js. I am using a flask application for my mini project.
I am calling the loding.gif file via js/jquery script. it is working like when I hit submit button in html loding.gif file is called, but it is showing below to the submit button itself.
I want like 'if I hit submit button in html, only loding.gif as to show' other content like form name dropdown, everything has to hide.
what I need to change?
index.html
<!DOCTYPE html>
<html lang="en">
<html><head>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div class="content">
<h1>The select form attribute</h1>
<right>
<!--<img src="https://media.giphy.com/media/l1J9LIsJB4xHMzLLq/giphy.gif">-->
</right>
<div class="zoom"></div>
<form method="POST" id="carform">
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<!--<input type="submit" value="Submit">-->
<input type="submit" name="anything_submit" value="Submit" onclick="$('#loading').show();">
</form>
<div id="loading" style="display:none;"><img src="{{url_for('static', filename='loder.gif')}}" alt="loading......" />Loading...!</div>
<br>
</div>
</body>
</html>
Solution
You can wrap your form inside a div and hide it when you submit your form. So, there's not much more to be added. Take a look:
$('#submit_leave_email').submit(function(e) {
$("#will_hide").hide();
$('#loading').show();
setTimeout(()=>{
$('#loading').replaceWith("<img src='https://c.tenor.com/Kt8pNHXHLKwAAAAC/module-free.gif' width='100'>");
}, 3000)
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="will_hide">
<form id='submit_leave_email' method='post'>
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<button type='submit' class='input_button' value='submit'>Insert </button>
</form>
</div>
<div id="loading" style="display:none">
<p>Loading...!</p>
</div>
</body>Notice that I used the setTimeout just to simulate the delay of backend's response and e.preventDefault() to avoid submitting the form from here.
Answered By - testing_22
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.