Question

在我的SHOPIFY中，我想在同一页面复制一个表单。当我选择一个选项或数量时，我希望第二个表格同时改变价值！我怎么能这样做？

<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将第一个表单的值克隆到第二个表单。下面，我使用了＆＃34;更改＆＃34;使用jQuery克隆字段值的方法。

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

如何在同一页面中同步2个表单

1 个答案: