CODEWITHSUNDEEP
jquery.netasp.net-core
Fafau
Fafau

Reputation: 27

Set null value to disabled text box using jQuery

I have some questions regarding how to set the null value to a disabled text box and pass the null value to the database using jQuery. Right now, I am able to enable or disable the text box using checkbox function but I can't figure it out on how can I pass the null value if the text box is disabled. Below is the code that I think related to the problem.

script

<script>
$(document).ready(function () {

    $('#CheckBox1').change(function () {
        $("#TextBox1").prop("disabled", !$(this).is(':checked'));
    });

}); </script>

Model class

 [Display(Name = "Login Restriction")]
 public bool isRestrictedIp { get; set; }

 [RegularExpression(@"^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$", ErrorMessage = "Invalid IP address format")]
 [Required(ErrorMessage = "This is a mandatory field.")]
 [Display(Name = "Restrict IP Address to")]
 [StringLength(50, ErrorMessage = " The {0} cannot exceed {1} characters.")]
 public string restrictedIp { get; set; }

the checkbox and text box code

<div class="form-group form-check">
     <label class="form-check-label">
         <input class="form-check-input" asp-for="isRestrictedIp" id="CheckBox1" checked="checked" /> 
          @Html.DisplayNameFor(model => model.isRestrictedIp)
     </label>
</div>

<div class="form-group">
     <label asp-for="restrictedIp" class="control-label"></label>
     <input asp-for="restrictedIp" class="form-control" id="TextBox1" />
     <span asp-validation-for="restrictedIp" class="text-danger"></span>
</div>

Upvotes: 1

Views: 734

Answers (1)

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14208

You can not send disabled input to server, so you need to use tricks like this.

View:

Declare TextBox1_Display input to display.

 <label asp-for="TextBox1_Display" class="control-label"></label>
 <input asp-for="restrictedIp" class="form-control" id="TextBox1" type="hidden" />   
 <input asp-for="restrictedIp" class="form-control" id="TextBox1_Display" />
 <span asp-validation-for="restrictedIp" class="text-danger"></span>

Jquery

var $TextBox1 = $("#TextBox1");
var $TextBox1_Display = $("#TextBox1_Display");

$('#CheckBox1').change(function () {
    var isChecked = $(this).is(':checked');
    $TextBox1_Display.prop("disabled", !isChecked);
    
    $TextBox1.val(isChecked ? $TextBox1_Display.val() : "");
    
    console.log($("#TextBox1").val());
});

$TextBox1_Display.keyup(function(){
   $TextBox1.val($(this).val());
   console.log($TextBox1.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="form-check-input" asp-for="isRestrictedIp" id="CheckBox1" checked="checked" />

<label asp-for="TextBox1_Display" class="control-label"></label>
 <input asp-for="restrictedIp" class="form-control" id="TextBox1" type="hidden" />   
 <input asp-for="restrictedIp" class="form-control" id="TextBox1_Display" />
 <span asp-validation-for="restrictedIp" class="text-danger"></span>

Edit: Add AllowEmptyString to the model class then we are good to go.

[RegularExpression(@"^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$", ErrorMessage ="Invalid IP address format")]
[DisplayFormat(ConvertEmptyStringToNull = false)]
[Required(AllowEmptyStrings = true, ErrorMessage = "This is a mandatory field.")]
[Display(Name = "Restrict IP Address to")]
[StringLength(50, ErrorMessage = " The {0} cannot exceed {1} characters.")]
public string restrictedIp { get; set; }

Upvotes: 1

Related Questions