I have designed a form with some input fields marked as Readonly along with an icon placed beside each of them. Is there a way to toggle the Readonly property of a specific field when I click on the adjacent icon?
Sample Form
<div class="input-group">
<input class="input--style-3" type="text" name="phone" id="phone" placeholder="Phone" value= "<?php echo $this->session->userdata('phone'); ?>" />
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
</div>
$('.input-group-addon').click(function(){
$(this).parent() // selects the parent container with the class 'input-group'
.children('input') // selects the input element within the container
.removeAttr('readonly'); // removes the readonly attribute from the input element
});
Testing this functionality yielded successful results (you cannot edit the telephone number until clicking the red square) https://codepen.io/anon/pen/pXXPNo
Implementing this solution not only helps you progress but also enhances your understanding
If you are dynamically creating elements rather than having them preloaded in the DOM, adjust your event binding as follows:
$('body .input-group-addon').on("click", function(){
$(this).parent() // gets parent container 'input-group'
.children('input') // gets the input in the container
.removeAttr('readonly'); // removes the readonly attr from the input
});
I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...
I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...
I'm trying to create a trapezoid button using CSS. Here is the intended look: https://i.sstatic.net/0vqlk.png However, my current implementation looks like this: https://i.sstatic.net/QrR4t.png The button appears fine but there seems to be some e ...
On touch screen responsive devices, there seems to be an issue where clicking outside the checkbox or radio button (within about 8px) causes the checkbox or radio button to toggle. This problem only occurs on responsive touch devices and works fine on desk ...
Learning the ropes of web programming, I have a personal project to monitor expenses. Simply put, my database stores data on total expenditures for this month and last month. I am able to display it manually (via echo), but I'm struggling to pass the ...
Looking for Assistance I've been working on a simple web application using Laravel 6.0 and have encountered an issue with the image post function I developed. Despite not receiving any error messages, the functionality doesn't seem to be work ...
I have utilized jQuery to perform calculations on Page1.html, where I retrieve values from input boxes using the get function and set those values in other input boxes using the set function. I am having trouble getting the total value of checkboxes when t ...
My goal is to dynamically change the view of a page based on which checkbox is checked. Additionally, I want to ensure that when one checkbox is selected, another becomes unchecked. <input class="searchType" type="checkbox"></input> <input ...
I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...
I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back ...
I'm struggling to validate a <select> element in my form. With the help of knockout.js, I select a location which then populates the Service Point based on the Location chosen. However, when I try to validate the form using parsley.js after pres ...
I'm currently working on a website that displays the value of a .TXT file, and here is the progress I've made so far: <script> $(document).ready(function() { $("#responsecontainer").load("info.txt"); var refreshId = setInterval(function( ...
Within my code, there is an AJAX function named flagIt() that gets triggered by another function called validateForm() upon submission. The validateForm() function is responsible for form validation. function validateForm(){ var error = ""; //perf ...
I have an array containing HTML elements, and I want to add a class to the elements whose data-id matches the IDs retrieved from an AJAX call. Here is my code: function update_books() { var $bookIds = $(".js-book").map(function() { return $(this).dat ...
HTML <div class="blok1" ></div> <div class="blok2"></div> <div class="blok3"></div> CSS .blok1 { background-color: green; border-bottom-left-radius:15px; border-bottom-right-radius:15px; h ...
I have been attempting to utilize a separate style sheet in order to customize the front page of my wordpress website. Despite several attempts, I have not had any success. Below is the current code that I am working with: add_action('wp_enqueue_styl ...
I have successfully designed a contact form using a CSS grid layout that features 4 input fields and a submit button spanning across 2 columns. Two of the input fields take up 1fr of space each, while the remaining two are 1/3 wide. My challenge lies in c ...
I've been successfully using "jQuery UI Sortable connectwith" for drag & drop functionality, as shown in the example here: . However, I now need to implement drag & drop with multiple UI elements and it's not functioning correctly. Example: < ...
Hi everyone, I really need some assistance with my code. The flex-direction property is not working for me no matter what I try. I've tested it on both Chrome and Microsoft Edge, but it displays the same result. I've been stuck on this for the pa ...
Does anyone know of an efficient way to strip HTML tags from a string of HTML text? ...