enabled submit button if radio button field data and other field data found using jquery-CodePudding

I have four different form field First Name, Last Name, Reference No, Trans ID. And Trans ID field is always required field but If I checked Field_One radio button then two field will be required First Name and Trans ID But when When I checked Field_Two then Reference ID and Trans ID will be required field. If this field is empty then button will be disabled but when It filled up button will be enabed.

But My code is not working properly See the below snippet

$(document).ready(function () {

  $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "Field_One") {
            $(".Field_One").show();
            $(".Field_Two").hide();
        }
        if ($(this).attr("value") == "Field_Two") {
            $(".Field_Two").show();
            $(".Field_One").hide();

        }
    });

    let myfieldval = jQuery('input[name="myfield"]:checked').val(); 
        
        if (myfieldval == "Field_One") {
            jQuery('.reqData,#reqData3').keyup(function(){
                if(jQuery(this).val().length !=0)
                    jQuery('#button1').attr('disabled', false);            
                else
                    jQuery('#button1').attr('disabled',true);
            })
        }
        if (myfieldval == "Field_Two") {
            jQuery('.reqData2,#reqData3').keyup(function(){
                if(jQuery(this).val().length !=0)
                    jQuery('#button1').attr('disabled', false);            
                else
                    jQuery('#button1').attr('disabled',true);
            })
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="myfield" value="Field_One" checked="true"/> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two

<div class="Field_One">
<input type="text" name="first_name" class="reqData" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name"/>
</div>
<br>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" class="reqData2" placeholder="reference_no"  />
</div><br><br>
<input type="text" name="trxid" class="reqData3" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled/>

CodePudding user response：

Update 2:

    $(document).ready(function () {

        function make_required_inputs(el) {
            let value = el.val();
            let div = $('div.'   value);
            $('input[required]').removeAttr('required');
            div.find('input.required').attr('required', true);
            $('input[name="trxid"]').attr('required', true);
            
        }
        function validation() { 
            let valid = true;
            $.each($('input[required]'), function () {
                if ($(this).val() == '') valid = false;
            });
            if (valid) {
                jQuery('#button1').attr('disabled', false);
            } else {
                jQuery('#button1').attr('disabled', true);
            }
        }

        $('input[type="radio"]').click(function () {
            if ($(this).attr("value") == "Field_One") {
                $(".Field_One").show();
                $(".Field_Two").hide();
            }
            if ($(this).attr("value") == "Field_Two") {
                $(".Field_Two").show();
                $(".Field_One").hide();

            }
            validation();
        });

        let checked = $('input[name="myfield"]:checked');
        let value_checked = checked.attr("value");
        if (value_checked == "Field_One") {
            $(".Field_One").show();
            $(".Field_Two").hide();            
        }else if (value_checked == "Field_Two") {
            $(".Field_Two").show();
            $(".Field_One").hide();
        }


        $('input[type="radio"]')



        make_required_inputs($('input[name="myfield"]:checked'));

        $('input[name="myfield"]').on('change', function () {
            make_required_inputs($(this));
            validation();
        });
        $('input').keyup(function (e) {
            validation();
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two

<div class="Field_One">
    <input type="text" name="first_name" class="required" placeholder="First Name" />
    <br><br>
    <input type="text" name="last_name" placeholder="Last Name" />
</div>
<br>
<br>
<div class="Field_Two">
    <input type="text" name="reference_no" class="required" placeholder="reference_no" />
</div><br><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled />