Allow for only 1 of multiple text input fields to submit-CodePudding

I run a Shopify store that offers custom text prints with custom fonts. I was able to set up a form for when a visitor selects a font, a text input field appears where they type their text in and they can see a preview of how the text will appear with current selected font.

I also got the form to show the input field per selected font while hiding the others, my problem is this: text entered into 1 field for a specific font doesn't clear when selecting another font to view. So if a customer tests 1 font and selects another to test, both text input fields are pushed to the cart with the text that was entered.

I need the text field to clear when selecting another font option from the dropdown.

I can fix this by setting 1 general text input field but I need

name="properties[Block]"
name="properties[Century]"
etc

so it can push the selected font & text to the cart & order. I hope this makes sense.

Here is the code (i'm sure it's pretty rookie-ish, sorry this is not my strong suit):

$('#noengraving').hide();
$('#block').hide();
$('#century').hide();
$('#clarendon').hide();
$('#cursive').hide();
$('#interlockingmonogram').hide();
$('#oldenglish').hide();
$('#roman').hide();
$('#script').hide();
$('#university').hide();

$('#cases').change(function() {
  var value = this.value;
  $('#noengraving').hide();
  $('#block').hide();
  $('#century').hide();
  $('#clarendon').hide();
  $('#cursive').hide();
  $('#interlockingmonogram').hide();
  $('#oldenglish').hide();
  $('#roman').hide();
  $('#script').hide();
  $('#university').hide();
  $('#'   this.value).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Font
<select name="cases" id="cases">
        <option value="select" selected="selected"title="">------</option>
        <option style="font-family: block" value="block">Block</option>
        <option style="font-family: century" value="century">Century</option>
        <option style="font-family: clarendon" value="clarendon">Clarendon</option>
        <option style="font-family: sursive" value="cursive">Cursive</option>
        <option style="font-family: interlockingmonogram" value="interlockingmonogram">Interlocking Monogram</option>
        <option style="font-family: oldenglish" value="oldenglish">Old English</option>
        <option style="font-family: roman" value="roman">Roman</option>
        <option style="font-family: script" value="script">Script</option>
        <option style="font-family: university" value="university">University</option>
        <option value="noengraving">No Engraving</option>  
        </select></label>
<div  id="noengraving">
  <label>
<input id="noengraving" type="text" style='font-family: block; font-size:20pt;' name="properties[No Engraving]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="block">
  <label>Enter Text
<input id="block" type="text" style='font-family: block; font-size:20pt;' name="properties[Block]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="century">
  <label>Enter Text
<input id="century" type="text" style='font-family: century; font-size:20pt;' name="properties[Century]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="clarendon">
  <label>Enter Text
<input id="calrendon" type="text" style='font-family: clarendon; font-size:20pt;' name="properties[Clarendon]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="cursive">
  <label>Enter Text
<input id="cursive" type="text" style='font-family: cursive; font-size:20pt;' name="properties[Cursive]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="interlockingmonogram">
  <label>Enter Text
<input id="interlockmonogram" type="text" style='font-family: interlockingmonogram; font-size:20pt;' name="properties[Interlock Monogram]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="oldenglish">
  <label>Enter Text
<input id="oldenglish" type="text" style='font-family: oldenglish; font-size:20pt;' name="properties[Old English]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="roman">
  <label>Enter Text
<input id="roman" type="text" style='font-family: roman; font-size:20pt;' name="properties[Roman]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="script">
  <label>Enter Text
<input id="script" type="text" style='font-family: script; font-size:20pt;' name="properties[Script]" required
       minlength="4" maxlength="8" size="10">
</label></div>
<div  id="university">
  <label>Enter Text
<input id="university" type="text" style='font-family: university; font-size:20pt;' name="properties[University]" required
       minlength="4" maxlength="8" size="10">
</label></div>

I tried part of this code: http://jsfiddle.net/bhimubgm/mj5Cm/ it partially worked but still left me without a solution

CodePudding user response：

The following demonstrates what I meant with my comment:

$('#cases').change(function() {
  $('#usertext').css("font-family",this.value).prop("name",`properties[${this.value}]`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Font
<select name="cases" id="cases">
        <option value="select" selected="selected" value="">------</option>
        <option style="font-family: block" value="block">Block</option>
        <option style="font-family: century" value="century">Century</option>
        <option style="font-family: clarendon" value="clarendon">Clarendon</option>
        <option style="font-family: sursive" value="cursive">Cursive</option>
        <option style="font-family: interlockingmonogram" value="interlockingmonogram">Interlocking Monogram</option>
        <option style="font-family: oldenglish" value="oldenglish">Old English</option>
        <option style="font-family: roman" value="roman">Roman</option>
        <option style="font-family: script" value="script">Script</option>
        <option style="font-family: university" value="university">University</option>
        <option value="noengraving">No Engraving</option>  
        </select></label>

<div><label>Enter Text
<input id="usertext" type="text" style='font-size:20pt;' name="usertext" required minlength="4" maxlength="8" size="10">
</label></div>

There is only one user input field that will be formatted dynamically.