Tengo dos botones de radio como:
Cuando Field_One , mostrará el campo First_Name , Last_Name , pero cuando Field_Two , mostrará el campo reference_id .
Pero una cosa si este reference_id proviene de url
como myurl.com?reference_id=12345 , entonces el campo de radio se seleccionará automáticamente y solo se mostrará el campo de referencia en la lista de formularios.
Mi problema es cuando se encuentra reference_id en url Field_Two que no lo muestra y siempre muestra Field_One en la carga encontrada
Aquí está mi fragmento:
$(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>prueba esto:
$(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>