Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
Real F-Manager
/
views
/
v3
:
select-servers-20260611022117.ejs
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" ></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.css" rel="stylesheet" /> <title>Select API</title> </head> <body> <!-- Contact 1 - Bootstrap Brain Component Credits: https://bootstrapbrain.com/component/bootstrap-5-simple-contact-form-example/#tab-css --> <section class="py-3 py-md-5"> <div class="container"> <div class="row justify-content-md-center"> <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6"> <h2 class="mb-2 display-5 text-center">Select Countries</h2> <p class="text-secondary mb-3 text-center"> Below are all the countries provided by <%= api %> Api. Select Your country and Click On submit Button </p> <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle" /> </div> </div> </div> <div class="container"> <div class="row justify-content-lg-center"> <div class="col-12 col-lg-9"> <div class="bg-white border rounded shadow-sm overflow-hidden"> <form id="add-form"> <div class="row gy-4 gy-xl-5 p-4 p-xl-5"> <div class="col-12"> <h4 class="text-center">Select Countries</h4> </div> <% if(countries[0].msg){ %> <p>Enable to load countries list because <%= api %> API responded with: <%= countries[0].msg %></p> <% } else { %> <% countries[0].forEach(function (obj, index){ %> <div class="col-12 row mt-3"> <div class="col form-group"> <% let str = obj.country %> <% let modStr = str[0].toUpperCase() + str.slice(1); %> <label for="country" class="form-label"> <input type="checkbox" name="country" id="<%= modStr %>" value="<%= obj.id %>" /> <%= flags[modStr] %> <%= modStr %> </label> </div> <% if(countries[1][index]){ %> <div class="col form-group"> <% let str1 = countries[1][index].country %> <% let modStr1 = str1[0].toUpperCase() + str1.slice(1); %> <label for="country" class="form-label"> <input type="checkbox" name="country" id="<%= modStr1 %>" value="<%= countries[1][index].id %>" /> <%= flags[modStr1] %> <%= modStr1 %> </label> </div> <% } %> </div> <% }) %> <% } %> <div class="col-12"> <div class="d-grid"> <button class="btn btn-primary btn-md" type="submit" id="submit-btn" > Submit </button> </div> </div> </div> </form> </div> </div> </div> </div> </section> <script> document.querySelector("form").addEventListener("submit", (e) => { e.preventDefault(); var data = []; const inputs = document.querySelectorAll("input[type='checkbox']") inputs.forEach((el) => { if (el.checked) data.push({ id: el.value, country: el.id }); }); swal( { title: `Add ${data.length} Countries`, text: `Click on the "Ok" button below. It will redirect you to available services page`, type: "info", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true }, function () { var query = window.location.search .substring(1) .split("&") .map((v) => v.split("=")); var path = { location: window.location.origin, query: Object.fromEntries(query) }; window.location.replace(`${path.location}/v3?id=${path.query.id}&q=page&page=${path.query.page}&status=services&api=${path.query.api}&key=${path.query.key}&countries=${JSON.stringify(data)}`) } ); }); </script> </body> </html>