Javscript - If field contains any value show these fields-CodePudding

We are using teh following script and it works for showing the 3 fields if someone types in the Last Name field.

<script>
jQuery(function($){
$("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();
$("#billing_last_name_field").on('keyup', function(){
$("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
})
});
</script>

We want the 3 fields to also show if there is any text in the last name field when the page loads. GPTchat recommended the following code but it does not work - the 3 fields are still hidden when the page loads - even when there is a value in the last name field.

jQuery(function($){
  $("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();
  $("#billing_last_name_field").ready(function(){
    if($(this).val()){
      $("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
    }
  });
  $("#billing_last_name_field").on('keyup', function(){
    $("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
  });
});

Any ideas on why itis not working? Thanks

CodePudding user response：

The ready() function in jQuery is used to execute a function when the DOM (Document Object Model) is ready to be manipulated, but it does not check whether an element has a value when the page loads. To check for a value in the #billing_last_name_field element when the page loads, you can use the val() function within an if statement.

Here is an example of how you could modify your code to show the 3 fields if there is a value in the #billing_last_name_field element when the page loads:

jQuery(function($){
  $("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();

  // Check if the #billing_last_name_field element has a value when the page loads
  if ($("#billing_last_name_field").val()) {
$("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
  }

  $("#billing_last_name_field").on('keyup', function(){
$("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
  });
});

This code will check for a value in the #billing_last_name_field element when the page loads, and if a value is found, it will show the 3 fields. If no value is found, the 3 fields will remain hidden until the user types something into the #billing_last_name_field element.

CodePudding user response：

In your .on('keyup', ) function do a conditional show or hide based on the billing_last_name_field value. Then add a .trigger('keyup') to trigger that conditional code when the page is ready:

$(function() {
  $("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();
  $("#billing_last_name_field").on('keyup', function() {
    if($(this).val()) {
      $("#d_o_b1_field, #billing_phone_field, #gender1_field").show();
    } else {
      $("#d_o_b1_field, #billing_phone_field, #gender1_field").hide();
    }
  }).trigger('keyup');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr><td> Last Name: </td><td> <input id="billing_last_name_field" value="Smith" /></td></tr>
<tr><td> DOB: </td><td> <input id="d_o_b1_field" /></td></tr>
<tr><td> Phone: </td><td> <input id="billing_phone_field" /></td></tr>
<tr><td> Gender: </td><td> <input id="gender1_field" /></td></tr>
</table>
</form>