Submit form and make some fields readonly after submission

[Mery nancy]

Hello guys,

I am newbie here and also not a developer.

I have an issue with a form in a signup page that is in a third party application. I asked to access the source code of the page and learned that it was actually possible to make changes to code from admin panel of the app.

**The problem:**

The form has some personal information to fill in: Email, shop name, password, password confirmation and some custom fields($cus_fields) that admin creates as needed for additional information required from user.

**What I want is when user clicks on button (id="create"), the form is submitted and the ($cus_fields) are switched to "readonly" after submission.** I have spent countless of hours trying to find a solution with Jquery code. I really need your help guys to make it happen. Sorry in advance if I missed any important information to better understand the problem. But, if you have any question or concern, I am here to clarify.

Here is the complete code of the signup page:

_______________________________________________________________________________________________

<style>

.hidden { display:hidden; }

</style>

<form id="signup_form" action="index.php?p=signup_process" method="post" enctype="multipart/form-data">

<div class="card add_card mp-form-bg-color">

<div class="mp-margin-top-50">

<div class="row">

<div class="col-lg-offset-2 col-md-offset-2 col-lg-8 col-md-8 col-sm-12 col-xs-12">

<h4 class="text-uppercase">CREATE YOUR ACCOUNT</h4>

<p>Already have an account?

Go to

<a rel='nofollow' href="index.php?p=login" class="link-style">Login</a></p>

</div>

</div>

<div class="row">

<div class="col-lg-offset-2 col-md-offset-2 col-lg-8 col-md-8 col-sm-12 col-xs-12 mp-margin-top-20">

<div id="signup-data" class="">

<br><div class="form-group mp-margin text-capitalize">

<div class="">Your SHOP NAME<span class="text-danger">*</span></div>

<input type="text" class="form-control" id="wk_seller_name" name="wk_seller_name" placeholder="Bio_cosmetics" value="{if !empty($signup_cookie)}{$signup_cookie.seller_name}{/if}" autofocus/>

<p style=" text-transform: none;" class="text-muted small">You can contact us anytime to change it.</p>

</div>

<br><div class="form-group mp-margin text-capitalize">

<div class="">EMAIL<span class="text-danger">*</span></div>

<input type="email" class="form-control" id="wk_email" name="wk_email" value="{if !empty($signup_cookie)}{$signup_cookie.email}{/if}">

</div>

<br><div class="form-group mp-margin text-capitalize">

<div class="">PASSWORD<span class="text-danger">*</span></div>

<input type="password" class="form-control" id="wk_password" name="wk_password">

</div>

<br><div class="form-group mp-margin text-capitalize">

<div class="">CONFIRM PASSWORD<span class="text-danger">*</span></div>

<input type="password" class="form-control" id="wk_cpassword" />

<p class="text-muted small">Please enter your password again</p>

</div>

{if !empty($cus_fields) && $cus_fields}

{foreach $cus_fields as $key => $value key=index name=count}

<div class="form-group text-capitalize">

<br><div class="">{$value.display_name|upper}{if $value.required}<span class="text-danger">*</span>{/if}</div>

{if $value.id_custom_input_type == 1}

<input type="text" class="form-control" id="{$value.input_name|escape:"html":"UTF-8"}" name="{$value.input_name|escape:"html":"UTF-8"}" value="{if !empty($signup_cookie)}{$signup_cookie.custom_fields[$key]["input_name"]}{/if}">

{else if $value.id_custom_input_type == 2}

<textarea class="form-control" id="{$value.input_name|escape:"html":"UTF-8"}" name="{$value.input_name|escape:"html":"UTF-8"}" rows="6">{if !empty($signup_cookie)}{$signup_cookie.custom_fields[$key]["input_name"]}{/if}</textarea>

{else if $value.id_custom_input_type == 6}

{include file = "seller_dropdown.tpl"}

{else if $value.id_custom_input_type == 5}

<button type="button" class="upload_img" id="{$value.input_name}">UPLOAD FILE</button><span class="file_name">{if !empty($id)}{$field_value[$key]|regex_replace:"/https://(.*)//":" "}{/if}</span>

<br>

<input type="file" id="custom" onchange="Filevalidation();" class="hidden" name="{$value.input_name}" accept="application/pdf">

<input type="hidden" name="check_cust_file[{$value.input_name}]" value="{if !empty($id)}{$field_value[$key]|escape:"html":"UTF-8"}{/if}">

<div class="row col-md-12 col-lg-12 col-sm-12 col-xs-12">

<p style=" text-transform: none;" class="mp-margin-bottom-10"><strong>Your ID Card, Company Incorporation, Business Bank Account, VAT Registration, Tax ID and any useful information. Accepted formats: PDF only and less than 3 MB.</strong></p>

</div>

<div class="row mp-hidden-div col-lg-12 col-md-12 col-sm-12 col-xs-12">

<label class="note">Error : </label>

<p class="mp-margin-bottom-10">File size too large. Maximum allowed size of File is 3 MB.</p>

</div>

{/if}

</div>

{/foreach}

{/if}

<script>

function Filevalidation() {

var allowedExtensions = /(.pdf)$/i;

const fi = document.getElementById("custom");

var filePath = fi.value;

// Check if any file is selected.

if (!allowedExtensions.exec(filePath)) {

document.getElementById("custom").value = "";

alert("Oops! Invalid file type! Please only select a PDF file.");

return false;

} else if (fi.files.length > 0) {

for (const i = 0; i <= fi.files.length - 1; i++) {

const fsize = fi.files.item(i).size;

const file = Math.round((fsize / 1024));

// The size of the file.

if (file >= 3072) {

document.getElementById("custom").value = "";

alert(

"Oops! File too Big. Please select a file less than 3 MB");

return false;

} else {

document.getElementById('size').innerHTML = '<b>'

+ file + '</b> KB';

}

}

}

}

</script>

{if isset($admin_terms_condition)}

<div class="form-group row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<input type="checkbox" id="term_con_cbx" class="hidden check-option chkbox checkbox wk-inp-cbx" data-side="seller">

{$cbx_data = ["cbx_for"=>"term_con_cbx", "title"=>"By signing up you agree to the

<a rel='nofollow' href='{if !empty($tc_link)}{$tc_link}{else}index.php?p=terms_con{/if}' target='_blank' class='wk-theme-color link-style'>Seller Ploicy</a><i class='text-danger'>*</i>"]}

{call getAnimatedCheckbox data=$cbx_data}

</div>

<input type="hidden" name="term_con" id="term_con" value="0">

</div>

<div class="hidden" id="admin_terms_condition" value="{$admin_terms_condition["active"]}"></div>

{/if}

<div class="hidden">

<input type="hidden" name="mplan_id" id="mplan_id">

</div>

<div class="mp-error-mini">

<div class="mp-error-mini-msg small text-danger"></div>

</div>

</div>

<div class="form-group pull-left">

<button type="submit" id="create" class="wk_btn prime-btn text-capitalize signup-btn mp-theme-background {if isset($admin_terms_condition)} disabled-btn{/if}" data-loading-text="<div style='opacity:0.7;'></div>" autocomplete="off" {if isset($admin_terms_condition)}disabled{/if}>{if !empty($customize_details) && $customize_details}{$customize_details.signup_btn_text}{else}{$signup_create_my_account}{/if}</button>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

{else}

<div class="container-fluid mp-margin-top-50">

<div class="row">

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left mp-margin-top-30 padding-20">

<h1 class="text-uppercase mp-margin-top-50 mp-pad-top">RESTRICTED</h1>

<p>The content you are looking for might have been restricted by merchant.<br>

Contact your merchant.</p>

</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-center padding-20">

<img class="full-max-width" src="img/EmptyTable/Seller-login-signup.png">

</div>

</div>

</div>

{/if}

</div>

{if isset($admin_terms_condition)}

<script type="text/javascript">

var checkbox_check = true;

</script>

{/if}

<script type="text/javascript">

var error = notice = false;

{if $error == 1}

error = "Email already exist";

{else if $error == 2}

error = "All fields are mandatory";

{else if $error == 3}

error = "Required fields cannot be blank";

{else if $error == 4}

error = "Enter correct email";

{else if $error == 5}

error = "Password is too small";

{else if $error == 6}

error = "You have to accept the terms and conditions";

{else if $error == 7}

error = {$signup_default_shopname}

{else if $error == 8}

error = "Invalid seller name";

{else if $error == 9}

error = "Form contains invalid key";

{else if $error == 10}

error = "Something went wrong";

{else if $error == 11}

error = "Invalid Tag";

{/if}

var signup_err_all_field_mand = "{$signup_err_all_field_mand}";

var signup_err_name_mand = "{$signup_err_name_mand}";

var signup_err_email_mand = "{$signup_err_email_mand}";

var err_email_like = "{$err_email_like}";

var signup_err_pass_mand = "{$signup_err_pass_mand}";

var signup_err_pass_length = "{$signup_err_pass_length}";

var signup_err_pass_cpass_not_match = "{$signup_err_pass_cpass_not_match}";

var signup_err_checkbox_mand = "{$signup__accept_trm_con_continue}";

var signup_err_pass_balnk_not_allow = "{$signup__blank_space_not_allow}";

var signup_err_seller_name = "Seller name cannot be blank";

var signup_err_email = "Email cannot be blank";

var signup_err_pwd = "Password cannot be blank";

var signup_err_cpwd = "Confirm Password cannot be blank";

var signup_err_pwd_not_match = "Password and Confirm Password doesn't matched";

var signup_err_email_not_valid = "Email not valid";

var signup_err_accept_tnc = "Please accept Terms and Conditions";

var mp_active = "{$mp_active}";

var disp_mplan = "{$disp_mplan}";

var p_value = "{$p_value}";

{if !empty($main_tag_names)}

var main_tag_names = {$main_tag_names};

{/if}

var array_coll = {$all_collections|default:0};

var res_category = 1;

var multi_level_coll = 1;

var selected_colls = "";

</script>

____________________________________________________________________________________________

[Keerthana Rajendran]

Hi Mery Nancy, 

Thanks for contacting Syncfusion support. 

We checked the provided details and code. We noticed that the code doesn’t have any Syncfusion components and a similar query had been raised in general forums. We request you to follow the below blogs for general queries. 

https://www.webdeveloper.com/d/394969-submit-form-and-make-some-fields-readonly-after-submission 

https://stackoverflow.com/questions/28578932/input-fields-get-readonly-after-hit-submit-button 

We would also like to let you know that we have a similar Form Validator component in EJ2 and we request you to have a glance on the following UG and demo links.  

UG:  https://ej2.syncfusion.com/documentation/form-validator/validation-rules/ 

Demo: https://ej2.syncfusion.com/demos/#/material/form-validator/external-submit.html 

Please get back to us if you need any further assistance with Syncfusion components. 

Regards, 

Keerthana R.