Multiple Tags From Text Field value-CodePudding

I have created a form for people to subscribe to my newsletter and i would like to classify them by getting their gender and size (i'm in the garment industry). So i need to create tags.

I achieved to create the tag "newsletter", which will be the same for everyone subscribing.

Now I need to get both the size and gender on text field input and know it must be:

" (newletter, something(size), something(gender)) "

Here is the code for the contact[tags]:

{%- form "customer", class: "subscribe-form-flex" -%}<input type="hidden" name="contact[tags]" value="newsletter, ">

For the size:

<input type="hidden"  maxlength="256" name="size_" data-name="Size 2" placeholder="" id="Size" value="Size" >

For the Gender:

<input type="hidden"  maxlength="256" name="gender_" data-name="Gender 2" placeholder="" id="Gender" required="" value="Gender">

My text field IDs are then:

Size

Gender

Any idea, someone ?

Thank you in advance !

CodePudding user response：

There are probably other solutions, but what I have done to solve a similar problem is

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

So in practice you have your form with your inputs (I have added just the size) and then, before you submit the form, you modify the tag input to have all the tags you need.

I don't know your level of Javascript, let me know if you need more details.

CodePudding user response：

thank you so much for your reply and i think i'm understanding what's happening there but i'm pretty new to be honest and i still feel a bit lost.

So here is what i have for now:

<div id="Form7" >
          {%- form "customer",  class: "subscribe-form-flex" -%}
          <input type="hidden" name="contact[tags]" value="newsletter">
            <div >
                <input type="email"  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" >
            <div data-w-id="d73250cb-edf3-eb2e-fa2b-510fffca93fd" style="opacity:1" >
              <div >{{ 'tn36610a88' | t }}</div>
            </div>
            <input type="text"  maxlength="256" name="contact[note][size_]" data-name="Size 2" placeholder="" id="Size">
            <input type="text"  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 >
            <div >{{ 't5a0ea5a1' | t }}</div>
          </div>
          {%- unless form_success -%}<div >
            <div>{%- render "form-errors", form_errors: form_errors -%}</div>
          </div>{%- endunless -%}
        </div>

It doesnt work for now, of course but i feel like i'm not super far from where i want to be.

I also have, in another section in my code, JQuery like this that gets text value on click to my buttons:

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

It should do the same work as your first section which gets value, is that correct ?

If so, chat i need now is to crack how to create the tag when the form submits successfully.

What do you think is wrong ? Maybe i don't really get the information ? Do I need a "OnChange" ?

Thanks a lot once again, I have been stuck on this for half a week now haha