I try to add/remove the "required" element from inputs depending on the value of a select. Hiding/Showing works as a charm but nothing happen for the required element (both adding or removing). Same issue with "prop" instead of "attr".
<div class="form-group">
<label class="control-label " for="id_Commission_Type">Commission Type</label>
<div class=" ">
<select name="Commission_Type" class=" form-control" required id="id_Commission_Type">
<option value="" selected>---------</option>
<option value="Percentage">Percentage</option>
<option value="Amount">Amount</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label " for="id_Commission_Percentage">Commission Percentage</label>
<div class=" ">
<input type="number" name="Commission_Percentage" step="any" class=" form-control" id="id_Commission_Percentage">
</div>
</div>
<div class="form-group">
<label class="control-label " for="id_Commission_Amount">Commission Amount</label>
<div class=" ">
<input type="number" name="Commission_Amount" step="any" class=" form-control" id="id_Commission_Amount">
</div>
</div>
<script>
$(function () {
$("#id_Commission_Percentage").prop("required", true);
$("#id_Commission_Type").change(function() {
var Commission_Type = $("#id_Commission_Type").val();
if (Commission_Type == "Percentage") {
$("#id_Commission_Amount").hide();
$("[for='id_Commission_Amount']").hide();
$("#id_Commission_Amount").removeAttr("required");
$("#id_Commission_Percentage").show();
$("[for='id_Commission_Percentage']").show();
$("#id_Commission_Percentage").prop("required", true);
}
else if (Commission_Type == "Amount") {
$("#id_Commission_Percentage").hide();
$("[for='id_Commission_Percentage']").hide();
$("#id_Commission_Percentage").removeAttr("required");
$("#id_Commission_Amount").show();
$("[for='id_Commission_Amount']").show();
$("#id_Commission_Amount").attr("required", true);
};
});
});
</script>
Try this:
$(document).ready(function() {
$("#id_Commission_Type").change(function() {
var Commission_Type = $("#id_Commission_Type").val();
if (Commission_Type == "Percentage") {
$("#id_Commission_Amount").hide();
$("[for='id_Commission_Amount']").hide();
$("#id_Commission_Amount").removeAttr("required");
$("#id_Commission_Percentage").show();
$("[for='id_Commission_Percentage']").show();
$("#id_Commission_Percentage").attr("required", true);
}
else if (Commission_Type == "Amount") {
$("#id_Commission_Percentage").hide();
$("[for='id_Commission_Percentage']").hide();
$("#id_Commission_Percentage").removeAttr("required");
$("#id_Commission_Amount").show();
$("[for='id_Commission_Amount']").show();
$("#id_Commission_Amount").attr("required", true);
};
});
});
In other words: try $(document).ready(function() {...}) instead of $(function() {...}.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments