Member Avatar for vindom

Hi!
I have a form (which is in html(the rest of my coding done in PHP)) that prompts user to choose image, type in title and choose status and after pressing confirm button script uploads image and its details to MySQL database. I'm trying to fade whole screen or disable all buttons on the page or display animation or all of that together to prevent user from pressing submit button few times. Any simple fade function in Javascript, JQuery or Ajax. I know nothing about those languages and don't have much time left to learn it. I've tried for couple days to achieve that myself but unsuccessfully..
Any help would be great..
Thanks!

Here is my code:

<html>
<head>
</head>
<body>
<img id="background-img" class="bg" src="water.jpg" alt="" />    
<br/><br/><br/><br/><br/>

<div class="frame">
<p class="ridge" font size="40px";>Choose Your Image</p>
    <form enctype="multipart/form-data" action="insert.php" method="post" name="changer"> 
        <p style="text-align:center;font-weight: bold;font-size:20px;color:blue;text-shadow:5px 5px 5px grey;">
            <input name="MAX_FILE_SIZE" value="1024000" type="hidden">
<br/><br/><label>Select file</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="img" accept="image/jpeg" type="file">
<br/><br/><label>Title</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="title"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <br/><br/><b>If you want your image available for public set status to PUBLIC otherwise set to PRIVATE</b> <br/><br/>
            <select style="font-weight: bold; heght: 100px; width: 130px;" name="status">
            <option >Set your status</option>
            <option value="public">Public</option>
            <option value="private">Private</option>
            </select>
<br/><br/><b>Please allow some time to upload the picture</b>
<br/><br/><input type="button" style="font-weight: bold;height: 30px; width: 100px; background-color:#125940;color:white;"  value="Cancel" onClick="location.href='usermenu.php';" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input style="font-weight: bold;height: 30px; width: 100px; background-color:#125940;color:white;"  value="Submit" type="submit" >
        </p>
    </form>
 </div>
</body>
</html>
Edited by vindom
  • 2 Contributors
  • 2 Replies
  • 320 Views
  • 33 Minutes Discussion Span
  • Latest Post Latest Post by vindom

Dani AI

Generated

Short summary tied to the existing replies: wants to stop multiple clicks while a file is uploading. ’s fade idea is fine visually, but fading the form alone does not reliably stop clicks or repeated submissions. A robust pattern is to both disable the form controls and add a full-page overlay that captures pointer events so further clicks are ignored.

Example implementation (minimal, vanilla JS):

<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('form[name="changer"]');
  if (!form) return;
  form.addEventListener('submit', function (ev) {
    // disable every control in the form
    Array.prototype.forEach.call(form.querySelectorAll('input,select,button,textarea'), function(el){
      el.disabled = true;
    });
    // add a blocking overlay so the user sees feedback and cannot click
    var o = document.createElement('div');
    o.id = 'upload-overlay';
    o.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;z-index:9999';
    o.textContent = 'Uploading... please wait';
    document.body.appendChild(o);
  }, false);
});
</script>

Practical notes and cautions:

  • The Cancel button in the form should be disabled the same way, otherwise navigation might still happen. The snippet above disables all inputs/buttons inside the form.
  • Some browsers navigate very quickly; if the overlay never appears, an alternative is to prevent default submission, show the overlay, then call form.submit() inside a short setTimeout to allow painting.
  • Client-side fixes improve UX but are not safe alone. Add a server-side protection (single-use token or session flag) to avoid duplicate processing if the client-side protection is bypassed.
  • For better UX later, consider an AJAX upload with a progress indicator and explicit re-enable on error.

This combines ’s visual idea with the necessary control-disabling and server-side safety so uploads cannot be submitted multiple times.

Member Avatar for moyk

Your code needs more semantics and formatting, and you should look more into unobstrusive Javascript, I'm just letting you know this as an information to help you make your code better.

Now, include JQuery at the beginning of your code, or really wherever you want on the page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Then put the following at the end of your code, should do the job:

$('.frame').fadeOut('slow');

However there's a much better way to do this, using unobrstusive Javascript, but I'm feeling kinda lazy right now.

Edited by moyk
Member Avatar for vindom

Thanks but either i'm doing something wrong or it just not working...Probably the first one.. Mind I've no idea about jquery....

Edited by vindom
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.