Use js to control the value and attribute of the input tag

Recently, in the project, I did a form submission validation, requiring that a company name and a company number cannot be empty. This is simple, as long as jQuery Validate is used for form validation.
However, due to demand, special treatment needs to be performed for a special company. The company does not have a company code and cannot fill in the company code.
Therefore, special treatment is given to the company according to the company name.
Here, js is used to control the attribute control and value control of the input tag, and use the mouse to remove the event blur to handle it.
Basically, as long as you have development experience, you know how to write, and the records here are also regarded as daily accumulation.

Not much nonsense, paste the code:

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2 no-padding-right" for="companyName"><span class="red">*</span>公司名称:</label>
        <div class="col-xs-12 col-sm-9">
            <input type="text" name="companyName" id="companyName" class="col-xs-12 col-sm-6" value="<#if user ??>${user.companyName}</#if>">
            <span class="help-inline col-xs-12 col-sm-4">
                <@form.errors path="user.companyName"/>
            </span>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2 no-padding-right" for="customerId"><span class="red">*</span>公司编号:</label>
        <div class="col-xs-12 col-sm-9">
            <input type="text" name="customerId" id="customerId" class="col-xs-12 col-sm-6" value="<#if user ??>${user.customerId}</#if>">
            <span class="help-inline col-xs-12 col-sm-4">
                <@form.errors path="user.customerId"/>
            </span>
        </div>
    </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
    $( "#companyName" ).blur( function () { 
        var name = $( "#companyName" ).val() || '' ;
         if (name == "special company name" ){
            $("#customerId").attr('value', '********');
            $("#customerId").attr('readOnly',true);
        }
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

The function achieved is that when the specified special company name is entered in the company name column, and then the mouse focus is removed, the company number column will be set to a default value and modified as a read-only attribute.

Related: Use js to control the value and attribute of the input tag