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.

Click top button from 2 buttons

I am currently working my automator and it has a limit to operate I think this method is the solution,
I'm having trouble on how to click this link, if anyone can help me create AppleScript using safari app. that would be help me save a lot of time.
If you can help combine applescript and jQuery or javascript for this to click
Here is the target link to click
Edit
bunch of them HTML:
<td class="new-variants-table__cell">
<div class="next-field__connected-wrapper next-field__connected-wrapper--align-right">
Edit
<button class="ui-button ui-button--size-small" data-bind-event-click="deleteVariantModal_27652747591744.show()" data-track-click="{ action: 'Delete variant', category: 'Products' }" type="button" name="button"><svg aria-hidden="true" focusable="false" class="next-icon next-icon--size-20"> <use xlink:href="#delete-minor"></use> </svg></button>
</div>
<script data-define="{deleteVariantModal_27652747591744: new Shopify.Modal(this)}" type="text/html" class="modal_source"><header><h2>Delete Chrome?</h2><button type="button" name="button" class="btn--link close-modal">Close</button></header>
<form class="edit_product_variant" id="edit_product_variant_27652747591744" autocomplete="off" data-define="{ deleteForm: new Shopify.Form(this) }" data-tg-refresh-on-success="modal variant-row-27652747591744" data-tg-remote="true" action="/admin/products/3424746569792/variants/27652747591744" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="delete" /><input type="hidden" name="authenticity_token" value="vHjz4tkmojd0dpVMZeZsQt3Bn/EaumOoZrNxR1awHaHaQnNQSsO1YxJglzNwoNthWoBwIlCjlxVPwmiLpTc5UA==" />
<div class="body">
<p>
Are you sure you want to delete the variant <strong>Chrome</strong>? This action cannot be reversed.
</p>
</div>
<div class="buttons">
<button class="ui-button close-modal" type="button" name="button">Cancel</button>
<button class="ui-button js-btn-loadable btn-destroy-no-hover" type="submit" name="button">Delete</button>
</div>
</form></script>
</td>

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.

How to find parent form element when element is clicked using jQuery?

When I click on Order Now button (<a class="btn btn-lp btn-popup" data-popup-open="popup-1" href="#">Order Now</a>) the popup appears with the form buttons that will send data to the server.
<div class="section-pick-your-box section-choose-a-plan">
<ul class="content">
<li>
<div class="wrapper">
<a class="btn btn-lp btn-popup" data-popup-open="popup-1" href="#">Order Now</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<form action="/cart/add" method="post" novalidate enctype="multipart/form-data" data-productid="">
<input type="hidden" name="properties[shipping_interval_frequency]" value="1">
<input type="hidden" name="properties[shipping_interval_unit_type]" value="Months">
<input type="hidden" name="id" value="12673316716586">
<input type="hidden" name="properties[subscription_id]" value="106203">
<input type="hidden" name="purchase_type" value="autodeliver">
<div class="price-button-wrap">
<a class="btn btn-lp buy-now" href="/cart">Wrapped</a>
</div>
</form>
<form action="/cart/add" method="post" novalidate enctype="multipart/form-data" data-productid="">
<input type="hidden" name="properties[shipping_interval_frequency]" value="1">
<input type="hidden" name="properties[shipping_interval_unit_type]" value="Months">
<input type="hidden" name="id" value="12673316683818">
<input type="hidden" name="properties[subscription_id]" value="106203">
<input type="hidden" name="purchase_type" value="autodeliver">
<div class="price-button-wrap">
<a class="btn btn-lp buy-now" href="/cart">Unwrapped</a>
</div>
</form>
<p><a data-popup-close="popup-1" href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
</div>
</li>
</ul>
</div>
The problem with the code above is that it does not recognize the parent form or closest form element from which the button was triggered.
This is my current jquery code below to get the parent form element:
$('.section-pick-your-box .content > li .popup-inner > form .buy-now').click(function(e) {
e.preventDefault();
var $data = $(this).closest('li').find('form').serialize();
console.log($data);
});
When I console.log, I am getting the data of both forms.
Any help is appreciated.

Since you have multiple forms inside an li, so instead of closest li, check for closest form
var $data = $(this).closest('form').serialize();

Copying text from many div to many input value

I have a page with many product listed. Each of those products is inside a div and has a form like this:
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
As you can see the value of add-to-cart is missing.
In the same div where the form is, we have an other div like this that contains the ID of the product (for instance IDPRODUCT), that needs to go inside the value:
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">IDPRODUCT</div>
I need a javascript function that on document ready(?) or onmouseover the div searches for the value inside the div, for instance IDPRODUCT, and copy this value into the value of the input name="add-to-cart"
Of course for each of those different divs there should be the proper IDPRODUCT.
Here is one JSFiddle I tried but it doesn't seem to work:JSFiddle
Any idea of how to solve this?
Thank you so much

UPDATE
The full Example again
$('.cart-add-wrapper').each(function(){
var id = $(this).find('.vc_gitem-woocommerce-product-id').text();
$(this).find('input[name=add-to-cart]').val(id);
console.log("id", id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">4321</div>
</div>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">1234</div>
</div>