Submit a form then make an input field readonly

11 2 1

Hello there,


It's been days that I am looking for a solution for this issue.
I am not a developer, but passionate about coding especially Jquery.

I am trying to figure out how to submit a form on click of a button. After data is submitted, I need to make just one input field readonly. This input field that I want to make readonly is required.

I am using a third party app and do not have access to HTML. But, only changing the HTML code by using Jquery.

First, I tried to make sure I can change field to readonly permanently:




This code works, as I get a Javascript message that says all fields are required. The data is not submitted (empty field) as field is set to readonly.

Then tried to change to readonly on click of the button, like below:


This does not work at all! Data is submitted and input field is editable after submission.
I have checked in the inspector of google chrome for the Id of the targeted field.
I do not know what I am doing wrong!

I have spent hours trying to figure it out. When I look at HTML, I do not see any thing that makes it impossible to change these input fields. My be the fact that input field is required? That's why I thought may be I need to make it readonly after a certain time (ms) from submission.

I have tried to set a delay between submission and the switch to "ReadOnly" via settimeout(), but it does not work either:

$("#add_btn").click(function() { setTimeout(function() {$("#St_name").Attr("readonly","readonly");​​​​​}, 3000); });

As I do not have access to the HTML code, I may be have two possibilities via Jquery:

1. On click, submit the data and then switch the fields to readonly, or
2. onclick, submit the data but create a new readonly input field on top of the old one just to show the information.

Any help from you guys is more than appreciated.
Thank you in advance for your support