Skip to content
- Tutorials
- Python Tutorial
- Taking Input in Python
- Python Operators
- Python Data Types
- Python Numbers
- Python String
- Python Lists
- Python Tuples
- Sets in Python
- Python Dictionary
- Python Loops and Control Flow
- Python Conditional Statements
- Python Loops
- Python Functions
- Python OOPS Concept
- Python Data Structures
- Python DSA
- Linked List
- Stack
- Queue
- Tree
- Heap
- Hashing
- Graph
- Sets
- Map
- Advance Data Structure
- Sorting Algorithms
- Searching Algorithms
- Python Exception Handling
- Python File Handling
- Python Exercises
- Python List Exercise
- Python String Exercise
- Python Tuple Exercise
- Python Dictionary Exercise
- Python Set Exercise
- Python Design Patterns
- Python Programming Examples
- Python Practice Questions
- Java
- Java Programming Language
- Java Tutorial
- Data Types
- Variables
- Operators
- Flow Control in Java
- Loops in Java
- Methods
- Strings
- Arrays
- OOPs Concepts
- OOPs Concepts
- Classes and Objects
- Access Modifiers
- Inheritance
- Abstraction
- Encapsulation
- Polymorphism
- Interface
- Packages
- Multithreading
- File Handling
- Regular Expression
- Java Collections
- Java Collections
- Collection Class
- List Interface
- ArrayList
- LinkedList Class
- Queue Interface
- Set Interface
- HashSet Class
- Map Interface
- HashMap Class
- HashTable Class
- Iterator
- Comparator
- Collection Interview Questions
- Java 8 Tutorial
- Java Programs
- Java Programming Examples
- Java Array Programs
- Java String Programs
- Java Date-Time Programs
- Java File Handling Programs
- Java Collection Programs
- Java JDBC Programs
- Java Apache POI Programs
- Java OpenCV Programs
- Java Interview Questions
- Java Interview Questions
- Core Java Interview Questions-Freshers
- Java Multithreading Interview Questions
- OOPs Interview Questions and Answers
- Java Exercises
- Java Quiz
- Java Quiz
- Core Java MCQ
- Java Projects
- Advance Java
- Spring Tutorial
- Spring Boot Tutorial
- Spring Boot Interview Questions
- Spring MVC Tutorial
- Spring MVC Interview Questions
- Hibernate Tutorial
- Hibernate Interview Questions
- Java Programming Language
- Programming Languages
- C
- C++
- JavaScript
- PHP
- R Tutorial
- C#
- SQL
- Scala
- Perl
- Go Language
- Kotlin
- System Design
- System Design Tutorial
- What is System Design
- Key Terminologies in System Design
- Analysis and Architecture of Systems
- Scalability in System Design
- Databases in System Design
- High Level Design or HLD
- Low Level Design or LLD
-
-
- HTML Tutorial
- HTML Exercises
- HTML Tags
- HTML Attributes
- Global Attributes
- Event Attributes
- HTML Interview Questions
- HTML DOM
- DOM Audio/Video
- HTML 5
- HTML Examples
- Color Picker
- A to Z Guide
- HTML Formatter
Open In App
Last Updated : 04 Mar, 2024
Summarize
Comments
Improve
Styling the options of an HTML
<select>
element can enhance the visual appearance and usability of dropdown menus, making them more appealing and user-friendly. Styling options can be used to highlight or differentiate certain options, improving readability and guiding user interaction.Table of Content
- Using Pure CSS
- Using CSS Pseudo-Elements
- Using Custom Dropdown
Approach 1: Using CSS Styling
First, target the “select” element using the selector and apply styling to it. Set the width, background color, text color, and border properties to style the selected element. Then, target the option elements within the select element using the < select > option selector. We apply background color and text color to style the options.
Example: Illustration of styling the option of an HTML select element Using CSS Styling.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Demo</
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
/>
</
head
>
<
body
>
<
div
>
<
select
>
<
option
>Option 1</
option
>
<
option
>Option 2</
option
>
<
option
>Option 3</
option
>
</
select
>
</
div
>
</
body
>
</
html
>
CSS
select {
width
:
10
rem;
background-color
:
#c3f0c6
;
border
:
#b2eeac
2px
solid
;
}
select>option {
background-color
:
#b8e1ba
;
}
Output:
Output
Approach 2: Using CSS Pseudo-Elements
Style the options using the option selector, setting the font size and background color. Next, we use the option:before pseudo-element to insert content before each option. In this case, we’re adding a “>” symbol. We initially set display: none; for the pseudo-element to hide it by default. Upon hovering over an option (option:hover:before), we set display: inline; to show the “>” symbol.
Example: Illustration of styling the option of an HTML select element using CSS pseudo-elements.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Pseudo Elements</
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
/>
</
head
>
<
body
>
<
div
>
<
select
id
=
"ddlProducts"
name
=
"Programming Languages"
>
<
option
>Language1 : C++ </
option
>
<
option
>Language2 : Java </
option
>
<
option
>Language3 : Python </
option
>
<
option
>Language4 : JavaScript </
option
>
</
select
>
</
div
>
</
body
>
</
html
>
CSS
option {
font-size
:
18px
;
background-color
:
#ffffff
;
}
option:before {
content
:
">"
;
font-size
:
20px
;
display
:
none
;
padding-right
:
10px
;
padding-left
:
5px
;
color
:
#fff
;
}
option:hover:before {
display
:
inline
;
}
Output:
Output
Approach 3: Using Custom Dropdown
The HTML structure consists of a container with two nested div elements. The first div with class “select-selected” represents the currently selected option, and the second div with class “select-items” contains the dropdown options. The JavaScript code handles the functionality of the custom dropdown. It toggles the visibility of the dropdown when the select box is clicked, sets the selected option when an option is clicked, and closes the dropdown when the user clicks outside of it.
See AlsoAn Introduction to HTML ColorsExample: Illustration of styling the option of an HTML select element using a custom dropdown.
HTML
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>Demo</
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
/>
</
head
>
<
body
>
<
div
class
=
"custom-select"
>
<
div
class
=
"select-selected"
>
Select an Option
</
div
>
<
div
class
=
"select-items"
>
<
div
>Select Option 1</
div
>
<
div
>Select Option 2</
div
>
<
div
>Select Option 3</
div
>
</
div
>
</
div
>
<
script
src
=
"script.js"
></
script
>
</
body
>
</
html
>
CSS
.custom-select {
position
:
relative
;
display
: inline-
block
;
}
.select-selected {
background-color
:
#f7f7f7
;
color
:
#333333
;
padding
:
5px
10px
;
cursor
:
pointer
;
}
/* Style the dropdown items */
.select-items {
position
:
absolute
;
display
:
none
;
background-color
:
#d88181
;
box-shadow:
0
4px
8px
rgba(
0
,
0
,
0
,
0.1
);
border-radius:
4px
;
z-index
:
1
;
width
:
100%
;
}
/* Style the dropdown items */
.select-items div {
padding
:
10px
;
cursor
:
pointer
;
}
/* Style the dropdown items on hover */
.select-items div:hover {
background-color
:
#c69c9c
;
}
Javascript
// Get all custom select elements
let customSelects = document.querySelectorAll(
'.custom-select'
);
// Attach click event listeners to each custom select
customSelects.forEach(
function
(select) {
let selectSelected = select.querySelector(
'.select-selected'
);
let selectItems = select.querySelector(
'.select-items'
);
let options = selectItems.querySelectorAll(
'div'
);
// Toggle the dropdown visibility when the select box is clicked
selectSelected.addEventListener(
'click'
,
function
() {
if
(selectItems.style.display ===
'block'
) {
selectItems.style.display =
'none'
;
}
else
{
selectItems.style.display =
'block'
;
}
});
// Set the selected option and hide the dropdown when an option is clicked
options.forEach(
function
(option) {
option.addEventListener(
'click'
,
function
() {
selectSelected.textContent = option.textContent +
" ????"
;
selectItems.style.display =
'none'
;
});
});
// Close the dropdown if the user clicks outside of it
window.addEventListener(
'click'
,
function
(e) {
if
(!select.contains(e.target)) {
selectItems.style.display =
'none'
;
}
});
});
Output:
Output
Next Article
How to find all selected options of HTML select tag ?
Please Login to comment...
Similar Reads
How to remove all the options of a select box and then add one option and select it using JQuery ? Given a select box with a fixed number of options, the task is to remove all the options and then add one option and immediately select that particular option using jQuery. There are two approaches that can be taken to achieve this: Approach 1: Using find(), remove(), end() and append() Methods: In the following example, a select box with some opti 3 min read Select different values on two select tags in Vue.js In this article, we will see the selection of different values on a single select and two <select> tags in vue.js, along with understanding their basic implementation through the examples. HTML <select> tag is used to create a drop-down list. Adding a list of options inside the drop-down list using the <option> tag. when we select 6 min read How to remove CSS style of <style> tag using JavaScript/jQuery ? Given an HTML document containing inline and internal CSS and the task is to remove the style of <style> tag. The internal or embedded CSS is used within the head section of the HTML document. It is enclosed within <style> tag. Approach: The jQuery remove() and empty() methods are used to remove the CSS style of <style> element. E 2 min read React.js Blueprint Popover2 Style Minimal Style BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Popover2 Component provides a way for users to display floating content next to a target element. We can use the following approach in ReactJS to use the ReactJS Blueprint Popo 2 min read How to Hide Option in Select Menu with CSS ? In HTML, the <select> tag creates a drop-down list of options for the user to choose from. Sometimes, you may want to hide certain options from the user for various reasons. This can be achieved using CSS by applying the display: none property to the <option> tag that you want to hide. Syntax: select option[value="value-to-hide"] { disp 2 min read Why does AngularJS include an empty option in select ? AngularJS is a Javascript framework containing several built-in functionalities, that intend to make the development easier and more efficient for the developers. The dropdown is one of them. A dropdown is a GUI element that enables the user to choose one value from a list of values. When a drop-down is active, a list of values gets displayed to th 3 min read How to create a Disabled Option Select using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Disabled Option Select using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http://code.jquery.com/mobile/1 1 min read How to create Selected Option Select using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Selected Option Select using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" href="http://code.jquery.com/mobile/1 1 min read Auto select option from Dropdown in ReactJS Auto Select option from Dropdown means without forcing the user to click on any options, the option value is auto-populated. Material UI for React has this component available for us and it is very easy to integrate. We can auto-select the options from Dropdown using the following approach. Creating React Application And Installing Module: Step 1: 2 min read How to select onchange pass option value in angular 6 ? In this article, we will see how to select onchange pass option value in angular 6, along with knowing the different techniques for retrieving the value of the user-selected item in a dropdown list & will understand their implementation through the illustration. The Dropdown is a commonly used element in HTML forms that facilitates the users to 5 min read How to use Checkbox inside Select Option using JavaScript ? In this article, we are going to learn how to use Checkbox inside Select Option using JavaScript. ApproachThe HTML contains a styled dropdown (selectBox) and hidden checkboxes (checkBoxes).CSS styles enhance the appearance, styling the dropdown and checkboxes.The function showCheckboxes() toggles checkbox visibility on a dropdown click.Checkboxes a 2 min read How to Show/Hide a Div Based on Selected Option Value of a Select Using JavaScript ? We are going to discuss how can we show/hide a div based on a selected option value. Select is one of the input type tags. It is used in HTML to get input from one of the options given below. Not only are we able to get select input (optional input), but we can also make dynamic changes to the website according to user user-selected Options. Let's 3 min read How to Set Selected Option of a Select in React? In the React setting the selected option of a Select can be achieved using different approaches including using the native HTML <select> element and using third-party select components like react-select. We will discuss two approaches to Setting selected options of a select in React: Table of Content Using the native 'select' elementUsing rea 3 min read Vue.js Form Input Binding with Select option Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stag 3 min read How to select direct parent element of an element in jQuery ? In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and returns that element. Syntax: $(selector).parent() Exa 1 min read How to Style Parent Element when Hover Over a Child Element in CSS ? In this article, we will learn how to style the parent element when hovering over a child element. Styling the parent element when hovering over a child element is a useful CSS technique that allows you to change the appearance of the parent element when the mouse cursor is hovering over one of its child elements. This can be useful for adding inte 2 min read How to select html element using ID in jQuery when ID contains a dot character ? The task is to select an HTML element/node by ID using jQuery when the ID itself contains a DOT (' . '). Not only dots(.) there are so many other meta character such as ! " # $ % & ' ( ) * + , . / : ; ? @ [ \ ] ^ ` { | } ~ can be selected by this procedure. Syntax: $('#ID_PREFIX\\.ID_SUFFIX') Approach: In order to select an HTML element by ID we ju 2 min read How to customize a “select” HTML form element with CSS3 ? The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list. In this article, you will learn many ways to customize "select” HTML form element with CSS 3. Note: The <select> tag is used in a form to receive user response. Syntax: <se 4 min read How to set the default value for an HTML <select> element ? Setting the default value for an HTML <select> element ensures a specific option is preselected when the form loads. This is done by adding the selected attribute to the desired <option> tag. It's useful for enhancing user experience by pre-filling forms with common or expected values. The <select> tag creates dropdown lists; < 2 min read How to select all children of an element except the last child using CSS? When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes. Syntax: element:not(:last-child) { // CSS Style } Example 1: This example creates a navigation menu separat 2 min read How to set the value of a select box element using JavaScript? In JavaScript, selectedIndex property is used to set the value of a select box element. The selectedIndex property sets or returns the index of the selected value in a drop-down list. Syntax: Set index: selectObject.selectedIndex = number Return index: selectObject.selectedIndex Note: Integer number is used for Index at the value place. Example-1: 2 min read How to remove options from select element using jQuery ? The task is to remove the option elements from the select element using jQuery. Approach: Select the option from select which needs to remove.Use JQuery remove() method to remove the option from the HTML document. Example 1: This example removes the option of which val = 'val_1' using remove() method. C/C++ Code <script src= "https://ajax.g 2 min read How to select first element in the drop-down list using jQuery ? Given a drop-down list containing options elements, the task is to get the first element of the select element using JQuery. Approach 1: Select the first element of <select> element using the jQuery selector.Use the prop() method to get access to properties of that particular element.Change the selectedIndex property to 0 to get access to the 2 min read How to get N options from the <select> element using JQuery? The task is to get the random N options from the select element. Below are few of the approaches: Approach 1: First get the all option element's text in the array. Generate a random index of the array and get the option of that index. Swap the last element with the current random index and subtract the length of array by 1. Repeat the process until 3 min read How to select an element with multiple classes using jQuery ? There are two procedures to select an element with multiple classes by using jQuery. Both the procedures are described below with the proper example. Using filter() Method: By using filter() method we can filter out all the elements that do not match the selected criteria and those matches will be returned. Syntax: $(selector).filter(criteria, func 2 min read How to make checkbox visible when hover or select the element? In this article, we will learn How to make a checkbox visible when: It is hovered overSelected Approach: The checkbox shouldn't be visible when not selected. It only becomes visible when hovered over again. The solution to the problem is simple. We can use the opacity property of the checkbox element and manipulate that. Just change the opacity val 1 min read How to select an element by its class name in AngularJS? Given an HTML document and the task is to select an element by its className using AngularJS. The elements can be selected with the help of a class name using the document.querySelector() method that is used to return the first element that matches a specified CSS selector(s) in the document. Approach: The approach is to use the element of classNam 2 min read How to get select element's value in react-bootstrap ? There are several methods to get element's value in react-bootstrap. Some of them are discussed below: Using Ref: First way to get element's updated value is by using ref. Using ref, we get the reference of the element and its value can be accessed throughout the existing components. import React, { Component } from "react"; import { Form 3 min read How to select only direct children from element with Sass? Introduction:Sass is a scripting language that is compiled into Cascading style sheets (CSS). It is a kind of preprocessor language. It was initially designed by Hampton Catlin and then it was developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend SASS with SassScript. It supports four da 2 min read How to select all ancestors of an element in jQuery ? In this article, we will select all the ancestor elements of an element in jQuery. To select all ancestor elements of an element, the parents() method is used. This method is used to find all the parent elements related to the selected element. This method traverses all the levels up the selected element and returns all elements. Syntax: $(selector 1 min readArticle Tags :
- HTML
- Web Technologies
- HTML-Questions
Trending in News
View More- How to Merge Cells in Google Sheets: Step by Step Guide
- How to Lock Cells in Google Sheets : Step by Step Guide
- #geekstreak2024 – 21 Days POTD Challenge Powered By Deutsche Bank
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
-
- System Design Tutorial
- Python Tutorial
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, check: true }), success:function(result) { jQuery.ajax({ url: writeApiUrl + 'suggestions/auth/' + `${post_id}/`, type: "GET", dataType: 'json', xhrFields: { withCredentials: true }, success: function (result) { $('.spinner-loading-overlay:eq(0)').remove(); var commentArray = result; if(commentArray === null || commentArray.length === 0) { // when no reason is availaible then user will redirected directly make the improvment. // call to api create-improvement-post $('body').append('
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `
${comment_text}
`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `
${suggest_val}
`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `
Thank You!
Your suggestions are valuable to us.
You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.
`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('
'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('
'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });