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
  • 307 Views
  • 33 Minutes Discussion Span
  • Latest Post Latest Post by vindom
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.