Even though I have set my bootstrap select to readonly="true", I am still able to change the selected option.
I tried using disabled="true", but then the select is not included when submitted.
Is there a way to achieve a combination where the selected option cannot be changed, but the select is still submitted?
I considered using hidden fields, but was hoping for a simpler solution.
Dealing with a comparable problem, my strategy involves eliminating the disabled attributes when the form onsubmit event occurs, as disabled attributes are not sent back to the server by the browser.
$('form').submit(function () { $('[disabled]').removeAttr('disabled'); })
In addition, I have discovered that another viable approach is to store the values in hidden inputs.
One alternate approach could involve utilizing a replacement for the select element with dropdowns, where it is feasible to disable the dropdown while still being able to submit the value of the hidden select element. Another option would be to include hidden fields in the form layout.
Alternatively, you could insert a hidden field containing the selected value if the select element is disabled.
<input type="hidden" name="whatever">
<select name="whatever">
If both the hidden field and the select element share the same name attribute, the selected value from the select element will take precedence over the hidden field when submitted (e.g., if the select field is dynamically enabled through JavaScript). If the select element is disabled, the value of the hidden field will be sent instead. The submission order may need clarification.
$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});
This solution, assuming JavaScript functionality is available, effectively disables all unselected options. As a result, only the selected option is submitted, preventing any alterations.
A related question that has already been addressed can be found at html-form-readonly-select-tag-input
When the page loads, the readonly attribute is disabled
$('[readonly]').prop( "disabled", true );
Before submitting, remove the disabled attribute
$('[readonly]').prop( "disabled", false );
A reminder from the jQuery documentation:
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
Here is my personal solution, which I find to be the most straightforward:
select[readonly] {
pointer-events: none;
}
UPDATE:
It is also necessary to assign a tabindex value of -1 to the select element in order to prevent it from being focused and its value changed using the keyboard.
A more efficient approach is to avoid using disabled. Instead, utilize jQuery to prevent the action of opening a select with
$('select[readonly]').on("focus", function(e){ e.preventDefault(); });
Greetings! As I work on developing an ASP.NET JavaScript application in SharePoint, I encounter a specific issue. My project consists of two pages: default.aspx and addnewitem.aspx. On the default.aspx page, there is a gridview with an edit button. Ideally ...
Having some trouble with JSON parsing using jQuery and JavaScript. I'm trying to fetch weather information from the open weather simplest API, but for some reason it's not working. When I hardcode the JSON data into a file or my script, everythin ...
Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...
I've been working hard on developing a custom JavaScript thumbnail slider that uses data-src. Everything seems to be in order, except the next and previous buttons are not functioning properly. Any assistance would be greatly appreciated. Here's ...
Hey there! I've got a list of items (users) in a popup that's contained within a scrollable div. What I'm trying to achieve is creating a search box using jQuery and Javascript to determine the position of a specific user in this list and th ...
Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...
I want to remove a record from a datatable without having to reload all the pages: $(function () { $(".btndeletesoftware").click(function () { $.ajax({ type: "POST", url: '@Url.Action("Delete")', ...
Embarking on a new project using socket.io has been quite the learning experience for me as a beginner. Despite extensive research, I managed to reach the desired stage where I have divs dynamically populated with data fetched from MySQL. In my server.js f ...
Here's the script I am working with: $('.how-we-do-it .items div').on('click', function () { var $matchingDIV = $('.how-we-do-it .sections .section .content div.' + $(this).attr('class')); $matchingDIV. ...
I have a span element with a background-color applied to it. Is there a way to adjust the size of this specific background? I attempted using background-size: auto 2px;, but it did not produce the desired effect. I am looking to make the background color ...
I have a null div element: <div id="reportBody"></div> with basic styling: #reportBody { height: 100%; } The reportBody div is located within a hidden modal that is triggered by a button click. I am using jQuery and AJAX to call a contro ...
My preference is to use standard CSS rules for different styles that include various vendor prefixes. To test, I would start with the following: border-radius: 5px; box-shadow: 0px 0px 4px 0px #fff; transform: rotate(90deg); For the final version, I woul ...
When a user clicks on a chat-tab, I want to update the classes of active tabs and rooms. The goal is to remove the hidden class from the unclicked room divs and add it to the irrelevant ones. I have been struggling with getting the selectors for the rooms ...
My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...
In my thumb gallery, I have implemented a functionality using ajax/javascript to seamlessly submit a form for each image to report it as broken. This form and script are templated, with the script located in the header and the form printed multiple times o ...
I'm having trouble getting checkboxes to display on a form for users to choose workshops. I am using the Materialize CSS gem with Rails. Here is my form: <div class="row"> <% workshops = Workshop.all.order("date") %> <% workshops. ...
In my current project, users are able to write articles. One feature of the editor is the ability to upload photos and include them in the article. While this functionality works well, there is an issue with how the photos are handled and stored. Each ar ...
I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...
Is there a way to output a list into x number of columns within a content div without specifying the exact amount of columns in CSS? I also want to include a heading at the top of each column: Firstname Lastname State Firstname Lastname State ...
I'm currently using a .post() request to fetch a PHP array into JavaScript. Here's an example: $.post("example.php",{"data":user},function( result ){ alert(result);},'json'); It works perfectly fine with a single array; however, I now ...