java - Trouble Manipulating Custom Text Boxes with Shopify Code

I have a custom box on my site for customers to enter a product customization, on the Shopify platform. The main box (name="properties[Engrave]") appears based on a conditional set of parameters, with no issue. This week, I attempted to add a second box, based on similar parameters (name="properties[Engrave2]"), but it does not seem to function properly. The text restrictions do not apply to the box (name="properties[Engrave2]") and it will only hide when the "No Engravings" option is selected. In a quick summary, I am attempting to get the following 3 processes to function. I have attempted numerous edits of the code, with little success, and would appreciate any help!

1. User selects no engraving: 0 text boxes appear
2. User selects 3 character engraving: 1 text box appears (name="properties[Engrave]") with the 3 character limitation
3. User selects 12 character engraving: 2 text boxes appear (name="properties[Engrave]", name="properties[Engrave2]") with the first (name="properties[Engrave]") having a 3 character limitation and the second (name="properties[Engrave2]") having a 12 character limitation

HTML

<p><label for="engrave"><b>Please Engrave:</b></label></p>
<p><input type="text" id="engrave" name="properties[Engrave]" placeholder="Your monogram - 3 character limit..."/></p>
<p><input type="text" id="engrave" name="properties[Engrave2]" placeholder="Your banner message - 12 character limit..." /></p> 
Copy code

Corresponding Java

var chk = $("[name='properties[Engrave]']", "[name='properties[Engrave2]']").attr('id');
if(variant.option1 == "No Engravings" || variant.option2 == "No Engravings" || variant.option3 == "No Engravings"){
  $("[name='properties[Engrave]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
  $("[name='properties[Engrave2]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
}

else if(variant.option1 == "3 Characters or Less" || variant.option2 == "3 Characters or Less" || variant.option3 == "3 Characters or Less"){
  $("[name='properties[Engrave]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",3);
    $("#" + chk).parent().siblings("p").show();
  });
  $("[name='properties[Engrave2]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
}

else if(variant.option1 == "12 Characters or Less" || variant.option2 == "12 Characters or Less" || variant.option3 == "12 Characters or Less"){ 
  $("[name='properties[Engrave]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",3);
    $("#" + chk).parent().siblings("p").show();
   });  
  $("[name='properties[Engrave2]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",12);
    $("#" + chk).parent().siblings("p").show();
   });            
} 
Copy code

Thank you so much, please let me know if any clarification is needed.

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.