Custom Product Line Items Not Working - HELP!

Highlighted
Tourist
4 0 1

Hi there, 

 

I am trying to create some drop down boxes/areas where my customer can customize the product. I have coded it and it works, but when I try and add a new product line item for "delivery date" with a dropdown date option on the top, it messes my whole code up! 

 

This is the code I have that works: 

 
                         <p class="line-item-property__field">
                          
      <label for="recipient-name"> Recipient Name </label>
        <BR>
  <input required class="required" id="recipient-name" type="text" name="properties[Recipient Name]">
 
<p class="line-item-property__field">
  <label for="recipient-address"> Recipient Address </label>
  <BR>
   <textarea required class="required" id="recipient-address" name="properties[Recipient Address]"></textarea>
</p>
  
                            
      <p class="line-item-property__field">   
<head>  
<script type="text/javascript">
function CheckAddress(val){
var element=document.getElementById('return-address');
if(val=='pick address'||val=='youraddress')
    element.style.display='block'; 
  else  
  element.style.display='none';
}
      
</script> 
</head>
<body>
 <label for="Return Address"> Return Label Address</label>
  <br>
  <select name="Return Address" onchange='CheckAddress(this.value);'> 
    <option value="SendAStitch-Address">Send A Stitch Address</option>
    <option value="youraddress">Your Address</option>
  </select>
  <center> <textarea required class="required" name="properties[Return Address]" id="return-address" style='display:none;'/> </textarea> </center> 
</body>
</html>
          </p>
 
  
                <p class="line-item-property__field">
  <label for="personal-message"> Personal Message &nbsp; </label>
                  <BR>
  <textarea required maxlength="400" required class="required" id="personal-message" name="properties[Personal Message]"></textarea>
          <div id="personalization_feedback">15</div>
      
                    </p>
                                   
               
                  
<script> 
$(document).ready(function() {
 
  var text_max = $('#personal-message').attr('maxlength');
  $('#personalization_feedback').html(text_max + ' characters remaining');
 
  $('#personal-message').keyup(function() {
    var text_length = $('#personal-message').val().length;
    var text_remaining = text_max - text_length;
    $('#personalization_feedback').html(text_remaining + ' characters remaining');
  });
 
});
</script>
            
And this is the code I added above all of that code that works when its alone but does not work with all of the other code:
 

<p class="line-item-property__field">
<head>
<script type="text/javascript">
function CheckDate(val){
var element=document.getElementById('ideal-delivery');
if(val=='pick waittosend'||val=='waittosend')
element.style.display='block';
else
element.style.display='none'
}

</script>
</head>
<body>
<label for="Delivery Date">Delivery Date:</label>
<br>
<select name="Delivery Date" onchange='CheckDate(this.value);'>
<option value="SendASAP">Send ASAP!</option>
<option value="waittosend">Send so it arrives by:</option>
</select>
<center><input type="date" name="properties[Delivery Date]" id="ideal-delivery" style='display:none; /> </center>

</body>
</html>
</p>

 

Any insight would be SO HELPFUL!! 

0 Likes