Pass form data from product page to cart

Highlighted
New Member
2 0 0

Hi guys,

 

I'm trying unsuccessfully to pass through some data from a form on the product page through to the cart. I have two options to select from, event organiser and event, and the data for the event is relative to the event organiser chosen. 

 

The page is available here: https://zone3.com/products/mens-aspire-wetsuit-month-z3hire 

 

It passes the event organiser through to the cart OK, but regardless of my selection of the event it always passes through the first row of the last block. Here's my code:

 

 <div class="form-group line-item-property__field">
  <label class="ProductForm__Label Heading u-h5" for="eventorg">Event</label>
  <select class="ProductForm__Item" id="eventorg" name="properties[Event Organiser]">
    <option value="No Specific Event">No Specific Event</option>
    <option value="Outlaw">Outlaw</option>
    <option value="Human Race">Human Race</option>
    <option value="Castle Triathlon">Castle Triathlon</option>
    <option value="Challenge Family">Challenge Family</option>
    <option value="Ironman">Ironman</option>
  </select>
  </div>

  <div class="form-group line-item-property__field" id="outlawDiv">
    <label class="ProductForm__Label Heading u-h5" for="outlaw">Outlaw Event</label>
    <select class="form-control ProductForm__Item" id="outlaw" name="properties[Event]">
      <option value="Half Holkham Triathlon">Half Holkham Triathlon</option>
      <option value="Nottingham Triathlon">Nottingham Triathlon</option>
      <option value="Outlaw X – Thoresby Park">Outlaw X – Thoresby Park</option>
      <option value="Zone3 Midland Series">Zone3 Midland Series</option>
    </select>
  </div>
    
  <div class="form-group line-item-property__field" id="humanraceDiv">
    <label class="ProductForm__Label Heading u-h5" for="humanrace">Human Race Event</label>
    <select class="form-control ProductForm__Item" id="humanrace" name="properties[Event]">
      <option value="Eton Sprints">Eton Sprints</option>
      <option value="Royal Windsor Triathlon">Royal Windsor Triathlon</option>
      <option value="Banana Triathlon">Banana Triathlon</option>      
      <option value="WoBurner Triathlon">WoBurner Triathlon</option>
      <option value="Woburn Abbey Triathlon">Woburn Abbey Triathlon</option>
      <option value="Season Finale">Season Finale</option>
    </select>
  </div>    
    
  <div class="form-group line-item-property__field" id="castletriathlonDiv">
    <label class="ProductForm__Label Heading u-h5" for="castletriathlon">Castle Triathlon Event</label>
    <select class="form-control ProductForm__Item" id="castletriathlon" name="properties[Event]">
      <option value="Lough Cutra Triathlon">Lough Cutra Triathlon</option>
      <option value="Cholmondely Castle">Cholmondely Castle</option>
      <option value="Festival of Endurance">Festival of Endurance</option>      
      <option value="Castle Howard">Castle Howard</option>
      <option value="Chantilly Castle">Chantilly Castle</option>
      <option value="Hever Castle">Hever Castle</option>
    </select>
  </div>
  
  <div class="form-group line-item-property__field" id="challengefamilyDiv">
    <label class="ProductForm__Label Heading u-h5" for="challengefamily">Challenge Family Event</label>
    <select class="form-control ProductForm__Item" id="challengefamily" name="properties[Event]">
      <option value="Challenge Almere-Amsterdam">Challenge Almere-Amsterdam</option>
      <option value="Challenge Heilbronn">Challenge Heilbronn</option>
    </select>
  </div>

  <div class="form-group line-item-property__field" id="ironmanDiv">
    <label class="ProductForm__Label Heading u-h5" for="ironman">Ironman Event</label>
    <select class="form-control ProductForm__Item" id="ironman" name="properties[Event]">
      <option value="Ironman Cascais">Ironman Cascais</option>
      <option value="Ironman Gdynia">Ironman Gdynia</option>
    </select>
  </div>
    

and the JS that shows the right secondary options based on the initial selection

 

<script type="text/javascript">
  $("#eventorg").change(function() {
 
  if ($(this).val() == "Outlaw") {
    $('#outlawDiv').show();

  } else {
    $('#outlawDiv').hide();

  }
  if ($(this).val() == "Human Race") {
    $('#humanraceDiv').show();

  } else {
    $('#humanraceDiv').hide();

  }
      if ($(this).val() == "Castle Triathlon") {
    $('#castletriathlonDiv').show();

  } else {
    $('#castletriathlonDiv').hide();

  }
     if ($(this).val() == "Challenge Family") {
    $('#challengefamilyDiv').show();

  } else {
    $('#challengefamilyDiv').hide();

  }
      if ($(this).val() == "Ironman") {
    $('#ironmanDiv').show();

  } else {
    $('#ironmanDiv').hide();
  }


});

$("#eventorg").trigger("change");
</script>	

Any help much appreciated.

 

Cheers,
James. 

0 Likes
Highlighted
New Member
2 0 0

Hi all,

 

I've been looking to see if metafields might be a better way of doing this, but not sure where to start. Any help much appreciated.

 

Thanks,

James.

0 Likes