同じページで2つのフォームを同期化する方法

Question

私のSHOPIFYでは、同じページにフォームを複製したいと思います。オプションや数量を選択すると、2番目のフォームで同時に値を変更することができます。これどうやってするの ？

<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}"> 
     {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %} 
      {% for option in product.options_with_values %} 
      <div class="selector-wrapper js product-form__item"> 
       <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}"> 
       {{ option.name }} 
       </label> 
       <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}"> 
       {% for value in option.values %} 
        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option> 
       {% endfor %} 
       </select> 
      </div> 
      {% endfor %} 
     {% endunless %} 

     <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js"> 
      {% for variant in product.variants %} 
      {% if variant.available %} 
       <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}"> 
       {{ variant.title }} 
       </option> 
      {% else %} 
       <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option> 
      {% endif %} 
      {% endfor %} 
     </select> 

     {% if section.settings.show_quantity_selector %} 
      <div class="product-form__item product-form__item--quantity"> 
      <label for="Quantity">{{ 'products.product.quantity' | t }}</label> 
      <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*"> 
      </div> 
     {% endif %} 

     <div class="product-form__item product-form__item--submit"> 
      <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit {% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}"> 
      <span class="fa fa-lock"></span><span id="AddToCartText-{{ section.id }}"> 
       {% unless current_variant.available %} 
       {{ 'products.product.sold_out' | t }} 
       {% else %} 
       {{ 'products.product.add_to_cart' | t }} 
       {% endunless %} 
      </span> 
      </button> 
     </div> 
     </form> 

Answer 1

jqueryまたはjavascriptを使用して、1番目のフォームの値を2番目のフォームに複製できます。以下では、jQueryを使用してフィールドの値を複製するための "変更"メソッドを使用しました。

$('#name').change(function() { 
 
    $('#firstname').val($(this).val()); 
 
}); 
 

 

 
$('#surname').change(function() { 
 
    $('#surname_2').val($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <label for="first_name">First Name form 1</label> 
 
    <input type="text" name="name" id="name" /> 
 
</div> 
 
<div> 
 
    <label for="surname">Surname form 1</label> 
 
    <input type="text" name="surname" id="surname" /> 
 
</div> 
 
<!-- first form ends --> 
 

 
<div> 
 
    <label for="firstname">Firstname form 2</label> 
 
    <input type="text" name="firstname" id="firstname" disabled="disabled" /> 
 
</div> 
 
<div> 
 
    <label for="surname_2">Surname form 2</label> 
 
    <input type="text" name="surname_2" id="surname_2" disabled="disabled" /> 
 
</div> 
 
<!-- second form ends -->