来自文本字段值的多个标签

Answer 1

非常感谢你的回复，我想我理解那里发生的事情，但老实说我还是个新手，我还是觉得有点失落。

所以这就是我现在所拥有的：

<div id="Form7" class="form-block-7 w-form">
          {%- form "customer",  class: "subscribe-form-flex" -%}
          <input type="hidden" name="contact[tags]" value="newsletter">
            <div class="subscribe-form-input-wrapper">
                <input type="email" class="subscribe-form-input w-input" maxlength="256" name="contact[email]" data-name="Email" placeholder="Enter your email address..." id="Email" required="">
            </div>
          <input type="submit" value="Join" data-wait="Wait..." id="Form7SubmitButton" class="cart-button desktop _2nd w-button">
            <div data-w-id="d73250cb-edf3-eb2e-fa2b-510fffca93fd" style="opacity:1" class="join--button-screen">
              <div class="text-block-36">{{ 'tn36610a88' | t }}</div>
            </div>
            <input type="text" class="text-field-6 desktop w-input" maxlength="256" name="contact[note][size_]" data-name="Size 2" placeholder="" id="Size">
            <input type="text" class="text-field-7 desktop w-input" maxlength="256" name="contact[note][gender_]" data-name="Gender 2" placeholder="" id="Gender" required="">
          {%- assign form_success = form.posted_successfully? -%}
          <script type="text/javascript">
            $('#Form7 form').submit(function (e) {
                var $formTags = $("#Email");
                var preferences = $("#Size").val();
                $formTags.val($formTags.val() + "," + preferences);
                return true;
            });
        </script>
          {%- assign form_errors = form.errors -%}{%- render "form-general-script", form_success: form_success, form_errors: form_errors -%}{%- endform -%}
          <div class="success-message-5 w-form-done  {% if form_success %}form-posted-successfully{% endif %}">
            <div class="div-block-142">{{ 't5a0ea5a1' | t }}</div>
          </div>
          {%- unless form_success -%}<div class="w-form-fail  {% if form.errors %}form-has-errors{% endif %}">
            <div>{%- render "form-errors", form_errors: form_errors -%}</div>
          </div>{%- endunless -%}
        </div>

当然，它现在不起作用，但我觉得我离我想去的地方并不远。

在我的代码的另一部分中，我还有这样的 JQuery，它在单击我的按钮时获取文本值：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 <script>
$( "#men-mobile" ).click(function() {
  var text = $( this ).text();
  $( "#Gender-Mobile" ).text(text);
});
</script>

<script>
$( "#women-mobile" ).click(function() {
  var text = $( this ).text();
  $( "#Gender-Mobile" ).text(text);
});
</script>

<script>
$( "#XS-mobile" ).click(function() {
  var text = $( this ).text();
  $( "#Size-Mobile" ).text(text);
});
</script>

它应该与获得价值的第一部分做同样的工作，对吗？

如果是这样，我现在需要的聊天是破解如何在表单提交成功时创建标签。

你觉得哪里不对？也许我真的没有得到信息？我需要一个“OnChange”吗？

再次感谢，我已经坚持了半周了哈哈

Answer 2

可能还有其他解决方案，但我为解决类似问题所做的是

<div id="my_form_container">
{%- form "customer", class: "subscribe-form-flex" -%}
    <input id="form_tags" type="hidden" name="contact[tags]" 
value="newsletter">
        <div id="select_container">
            <select required="required" name="sizes" 
onchange="var opt=this.options[0];if(opt.getAttribute('role')==='placeholder'&&!opt.selected)opt.parentNode.removeChild(opt);/*This is just to remove the placeholder*/" 
id="form_sizes">
                <option role="placeholder" value="">Size...</option>
                <option>S</option>
                <option>M</option>
                <option>L</option>
                <option>XL</option>
            </select>
        </div>
 {% unless form.posted_successfully? %}
            <script type="text/javascript">
                $('#my_form_container form').submit(function (e) {
                    var $formTags = $("#form_tags");
                    var preferences = $("#form_sizes").val();
                    $formTags.val($formTags.val() + "," + preferences);
                    return true;
                });
            </script>
        {% endunless %}
{%- endform -%}
</div>

因此，在实践中，您的表单带有您的输入（我只添加了大小），然后，在您提交表单之前，您修改标签输入以包含您需要的所有标签。

我不知道您的 Javascript 水平，如果您需要更多详细信息，请告诉我。

Answer 3

我正在做类似的事情。

这是我的代码。我想为城市和鞋码添加一个联系人[标签]。

          <div {{ block.shopify_attributes }} id="kindred">
            {% form 'customer', class: 'newsletter-form' %}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
               <div class="field">      
    
      <input
        type="text"
        name="contact[first_name]"
        id="first-name"
        class="field__input"
        {% if form.first_name %}value="{{ form.first_name }}"{% endif %}
        autocomplete="given-name"
        placeholder="{{ 'customer.register.first_name' | t }}"
        required >
      <label for="first-name" class="field__label">
        {{ 'customer.register.first_name' | t }}
      </label>
    </div>
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="Newsletter-error--{{ section.id }}"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="Newsletter-success--{{ section.id }}"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                 
                </div>
             

            
                <div class="field city">
            <input type="text" id="AddressCityNew" name="contact[city]" value="{{ form.city }}" autocomplete="address-level2" placeholder="{{ 'customer.addresses.city' | t }}">
            <label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
             
          </div>


  

              
    <div class="field womens-shoe-size">
  
    <select class="minimal field__input" id="shoe-size" name="contact[tags]">
      <option class="label field__label" value="" disabled selected><p>Women's Shoe Size</p></option>
        <option value="F35">35</option>
        <option value="F35.5">35.5</option>
        <option value="F36">36</option>
        <option value="F36.5">36.6</option>
        <option value="F37">37</option>
        <option value="F37.5">37.5</option>
        <option value="F38">38</option>
        <option value="F38.5">38.5</option>
        <option value="F39">39</option>
        <option value="F39.5">39.5</option>
        <option value="F40">40</option>
        <option value="F40.5">40.5</option>
        <option value="F41">41</option>
        <option value="F41.5">41.5</option>
        <option value="F42">42</option>
        <option value="F42.5">42.5</option>
        <option value="F43">43</option>
        <option value="F43.5">43.5</option>
        <option value="F44">44</option>
        
      </select>
               </div>

            <div class="field mens-shoe-size">
  
    <select class="minimal field__input" id="shoe-size" name="contact[tags]" >
      <option class="label field__label" value="" disabled selected><p>Men's Shoe Size</p></option>
        <option value="M39">39</option>
        <option value="M39.5">39.5</option>
        <option value="M40">40</option>
        <option value="M40.5">40.5</option>
        <option value="M41">41</option>
        <option value="M41.5">41.5</option>
        <option value="M42">42</option>
        <option value="M42.5">42.5</option>
        <option value="M43">43</option>
        <option value="M43.5">43.5</option>
        <option value="M44">44</option>
        <option value="M44.5">44.5</option>
        <option value="M45">45</option>
        <option value="M45.5">45.5</option>
        <option value="M46">46</option>
        <option value="M46.5">46.5</option>
        <option value="M47">47</option>
        
      </select>
               </div>
              <div class="kindred_button">
        <button type="submit" class="newsletter-form__button kindred" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                     <p style="padding: 0 5px;">Join Kindred</p> 
                  </button>
        </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
             
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>

                
                
                {%- endif -%}
           
       
          </div>
              {% endform %}

你能帮忙吗？