Develop Reference

How to close only current popup in Javascript and Jquery?

I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.

My suggestion would be to use the break function. That will exit the current loop.

Disappearing a submit button after being clicked in html form

I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?

Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>

after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.

jQuery: first-child (without id or classes)

That's is the html structure: (see also in jsfiddle here: http://jsfiddle.net/hQ5dZ/)
<div id="fields">
<div>
<input type="file" />
<input type="button" value="+add">
<div>
<div>
<input type="file" />
<input type="button" value="+add">
<div>
</div>
The second jQuery-statement below does not work, why?
$('#fields').children().hide();
$('#fields :first-child').show();
EDIT: Desired Behaviour -> First div-child (with its content) should appear

Your markup is invalid — you are not closing the <div> and <input> tags:
<div id="fields">
<div>
<input type="file" />
<input type="button" value="+add" />
</div>
<div>
<input type="file" />
<input type="button" value="+add" />
</div>
</div>
After changing the markup to a valid syntax, it's working - http://jsfiddle.net/teddyrised/nBbxY/

You were not closing the div elements, instead was creating new div child which was causing the #fields element to have only one child.
So $('#fields').children().hide() was hiding the child and then $('#fields > :first-child').show() was displaying it back.
<div id="fields">
<div> <!-- fc-1 -->
<input type="file" /> <!-- fc-2 -->
<input type="button" value="+add" />
</div> <!--not closed-->
<div>
<input type="file" /> <!-- fc-3 -->
<input type="button" value="+add" />
</div>
</div> <!--not closed-->
$('#fields').children().hide();
$('#fields > :first-child').show();
Demo: Fiddle
Also the second selector is updated because #fields :first-child will select all descendant elements of #fields which are the first child of its parent, in the above markup it will select all fields marked as fc-x

Besides closing the needed tags you can shorten you jQuery code like so, for example:
$('#fields').children().hide().eq(0).show();
Working example online: http://jsfiddle.net/nBbxY/1/

SlideUp by jQuery

I'm trying to slideUp part of page by jQuery.
I use this code
$("#FirstPage").slideUp(1000);
I will hide FirstPage part of page,but not by time,I mean that it will hide suddenly not by 1000 ms.
the following code is FirstPage part,which should be hide after 1000ms and with slideUp.
<div id="FirstPage">
<div id="Login">
<form method="post" id="LoginForm">
<br />
<input type="text" name="username" id="username" />
<br />
<input type="password" name="passowrd" id="password" />
<br />
<input type="checkbox" name="invisible" value="TRUE" id="invisible" />
<br />
<img src="" /><input type="text" name="captcha" disabled="true" style="display: none"
id="captcha" />
<br />
<input type="button" value="Login ..." onclick="Ajax_Login()" />
</form>
</div>
<div class="OtherFeaturBig" id="WindowsVersion">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturBig" id="Advertisment">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturSmall" id="AboutUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
<div class="OtherFeaturSmall" id="ContactUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
</div>
where is my code problem?

This code works fine to slide your div up upon the click of a button:
$("#hide").click(function() {
$("#FirstPage").slideUp(1000);
})
As used in this jsFiddle with your HTML (I removed the non-functioning images): http://jsfiddle.net/jfriend00/JFRGr/.
So, the issue must have to do with either your code or the rest of your HTML, both of which you have not shared. If you want further help, please show us the actual code you are using and explain what triggers the code to run.
As Trikks said, make sure that you aren't calling slideUp before the page is fully loaded.

try
Ensure to run your code after document.ready so the DOM is really loaded. Also ensure that jQuery is loaded and 1sec = 1000 ms...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#FirstPage").slideUp(1000);
});
</script>

Javascript variable not displayed in HTML file

Whats wrong with my code . The title is not displayed within the div banAdT :
<form action="" method="post" enctype="multipart/form-data">
<p>
Banner Ad Name :<br />
<input type="text" name="bannerAdName" id="bannerAdName" />
</p>
<p>
Your web page :<br />
<input type="text" name="bannerAdWeb" id="bannerAdWeb" />
</p>
<p>
Ad image :<br />
<input type="file" name="bannerAdImage" id="bannerAdImage"/>
</p>
<p>
Title :<br />
<input type="text" name="bannerAdTitle" id="bannerAdTitle" />
</p>
<p>
Description :<br />
<textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea>
</p>
<div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div>
<input type="hidden" value="POST" />
</form>
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="contactArea">
<div id="banAdT">
<script>document.write(document.getElementById("bannerAdTitle").value);</script> <!-- Displays nothing -->
</div>
<img src="" id="preview" width="120" height="120" />
</div>
</div>

That's because when the script runs, the element bannerAdTitle won't have a value. I'm not exactly sure what you're trying to do, but you probably want to attach a change event listener to the bannerAdTitle input, and write the value from there:
document.getElementById("bannerAdTitle").onchange = function() {
document.getElementById("banAdT").innerHTML = this.value;
}
That will write the value of bannerAdTitle in the banAdT element every time the change event is fired.

document.write is executed as the page loads, but at that point you haven't given bannerAdTitle a value - the INPUT is empty.