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>