onclick radio button change form fields-CodePudding

I have two radio button like:

Field_One
Field_Two

When I check Field_One it will show First_Name, Last_Name field but when I check Field_Two it will show reference_id field.

But one thing if this reference_id comes from url

like myurl.com?reference_id=12345 then the radio field will auto selected and only reference field will show on form list.

My problem is when reference_id found on url Field_Two not showing it always showing Field_One on load found

Here is my 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();

        }
    });

    $('input[type="radio"]').trigger('click');  // trigger the event
});

<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/> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two

<div class="Field_One">
<input type="text" name="first_name" 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" placeholder="reference_no"  />
</div>

CodePudding user response：

try this:

    $(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();

            }
        });

        //$('input[type="radio"]').trigger('click');  // trigger the event
    
    let url = new URL(window.location.href);
    let reference_id = url.searchParams.get("reference_id");
    if (reference_id == null) {
        $(".Field_One").show();
        $(".Field_Two").hide();
    }else{
        $(".Field_Two").show();
        $(".Field_One").hide();
        $(".Field_Two").find('input[name="reference_no"]').val(reference_id);
    }

    });

<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" 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" placeholder="reference_no" />
</div>