Send readonly input value to server(MEAN stack)

input readonly
css readonly input
input readonly javascript
how to make text field non editable in html
how to get value of readonly textbox in javascript
html input readonly vs disabled
html checkbox readonly
react input readonly

I have a form which has one readonly and other normal fields like name, height, weight, DOB. I am unable to send the value of read-only field to the server(MongoDB). Without the read-only field, I tried sending the form and its working fine.                    

I get error

"failed{"errors":{"id":{"message":"Path id is req…Path id is required.","name":"ValidationError"}"}

when i try with readonly field.

export class HomeComponent {

  getname=localStorage.getItem('key');
  id = Date.now()

  constructor(private service:RecordService) { }

 onsubmit(form: NgForm) {
  this.service.postRecords(form.value).subscribe(res => {
    console.log(res);
  });

}

}
<div class="container">
    <h2 class="text-center">Welcome {{getname}}</h2>
    <form  #myForm="ngForm" (ngSubmit)="onsubmit(myForm); myForm.reset()">
        
        <div class="form-group"> 
            <label>Member ID</label>
            <input  type="number" name="id" [value]="id" class="form-control" readonly>
           </div>

         

        <div class="form-group"> 
            <label for="name">Name</label>
            <input ngModel required name="name" pattern="[A-za-z]+" #name="ngModel" minlength="4" type="text" class="form-control" id="name">
            <div class="alert alert-danger" *ngIf="name.touched && !name.valid">
                <div *ngIf="name.errors.required">Name is required.</div>
                <div *ngIf="name.errors.minlength">Name requires atleast 4 characters.</div>
                <div *ngIf="name.errors.pattern">Name should contain only alphabets without space.</div>

            </div>
        </div>

        <div class="form-group"> 
            <label for="dob">Date of Birth</label>
            <input  type="date" class="form-control" id="dob" name="dob" #dob="ngModel" ngModel required>
            <div class="alert alert-danger" *ngIf="dob.touched && !dob.valid">
                <div *ngIf="dob.errors.required">Date of Birth is required.</div>
            </div>
        </div>

        <div class="form-group"> 
            <label for="height">Height</label>
            <input  type="number" placeholder="Enter in cms" class="form-control"  id="height" name="height" #height="ngModel" ngModel required>
            <div class="alert alert-danger" *ngIf="height.touched && !height.valid">
                <div *ngIf="height.errors.required">Height is required.</div>
            </div>
        </div>

        <div class="form-group"> 
            <label>Weight</label>
            <input  type="number" placeholder="Enter in Kilograms" class="form-control" id="weight" name="weight" #weight="ngModel" ngModel required>
            <div class="alert alert-danger" *ngIf="weight.touched && !weight.valid">
                <div *ngIf="weight.errors.required">Weight is required.</div>
            </div>
        </div>


     <!-- <a routerLink="/table">    -->
        <button type="submit"class="btn btn-success" [disabled]="!myForm.form.valid">Submit</button> 
    <!-- </a> -->
     &nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-success" (click)=" myForm.reset()">Reset</button>
    </form>
</div>

you can use the "disabled" instead-of "readonly"

How can I make an input field read only but still have it send data , Then, a JavaScript can remove the readonly value, and make the input field editable. Note: A form will still submit an input field that is readonly, but will not� When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.).

I figured it out I just changed

<input  type="" name="id"  [value]="id" class="form-control" readonly>

HTML input readonly Attribute, Then, a JavaScript can remove the readonly value, and make the input field editable. Applies to. The readonly attribute can be used on the following elements:� The MEAN stack is a popular web development stack made up of MongoDB, Express, Angular, and Node.js. MEAN has gained popularity because it allows developers to program in JavaScript on both the client and the server. The MEAN stack enables a perfect harmony of JavaScript Object Notation (JSON) development: MongoDB stores data in a JSON-like

There are two ways to do the Job:

  1. You can create a hidden field for the readonly field whose value will be binded with the readonly field so once you submit the form the hidden input will be passed.[ Remember to give the name attribute you want to pass to the hidden field rather than the readonly field as the hidden field will be passed and not eh readonly field].

  2. Second way is to remove the disable property from all the input at the time your are subumitting your form. In this way you can send the value of all the inputs.

HTML readonly Attribute, The HTML input element is used to create interactive controls for web-based Use the accept attribute to define the types of files that the control can select. hidden, A control that is not displayed but whose value is submitted to the server. of form field to use for sending the element's directionality in form submission. The readonly and disabled attributes have superficially similar behaviors — they both stop the user from editing the value of the <input> element. However, there is a big difference. The value of the readonly element will be included when the form is submitted to the server. The value of a disabled element will not be submitted to the server.

<input>: The Input (Form Input) element, A Boolean attribute which, if present, means this field cannot be edited by the user. Note: Because a read-only field cannot have a value, required does When submitted, the data name/value pair sent to the server will be� The call to retrieve the user info is quite slow so I don't want to repeat it for every Ajax request, so I'm thinking of displaying the information on the first screen using @Html.TextBoxFor(m=>m.FieldName, new {@readonly="readonly"}) (styled so it doesn't look like an ordinary readonly input). Then simply posting this information back and re

<input type="text">, Disabled and read-only controls before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.) Please consult the definition of each control for information about initial values and possible constraints on values imposed submit buttons: When activated, a submit button submits a form. Sometimes we need to set a default value of the <input> element, This example explains methods to do so. Text Value Property This property set/return the value of value attribute of a text field. The value property contains the default value, the value a user types or a value set by a script. Syntax: Return the value property: textObject.value

Forms in HTML documents, Use jQuery methods to add the readonly attribute to the form input field. jQuery attr() Method: This method set/return attributes and values of the "https://ajax. googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" > full-stack-img first_page How to move a file into a different folder on the server using PHP? Read-only is a file attribute, or a characteristic that the operating system assigns to a file. In this case, read-only means that the file can be only opened or read; you cannot delete, change, or rename any file that’s been flagged read-only. To change the read-only attribute, follow these steps: Right-click the file or folder […]

Comments
  • I think this could solve your problem : stackoverflow.com/questions/45429107/…