只允许提交多个文本输入字段中的一个

Question

我经营一家Shopify商店，提供自定义字体的自定义文本打印。我能够设置一个表单，当访问者选择一种字体时，一个文本输入框会出现在他们输入文本的地方，他们可以看到文本将如何显示当前选择的字体的预览。

我也得到的形式显示输入字段每选定的字体，而隐藏其他的，我的问题是这样的:文本输入到一个特定的字体字段不清楚时，选择另一种字体查看。因此，如果客户测试一种字体并选择另一种字体进行测试，则将两个文本输入字段与输入的文本一起推到购物车中。

当从下拉菜单中选择另一个字体选项时，我需要清除文本字段。

我可以通过设置一个通用文本输入字段来解决这个问题，但我需要

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

所以它可以推送选定的字体&短信到购物车&秩序。我希望这是有意义的。

下面是代码(我敢肯定这是相当菜鸟，抱歉这不是我的强项):

$('#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 class="noengraving" 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 class="block" 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 class="century" 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 class="clarendon" 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 class="cursive" 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 class="interlockingmonogram" 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 class="oldenglish" 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 class="roman" 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 class="script" 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 class="university" 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>

我尝试了部分代码:http://jsfiddle.net/bhimubgm/mj5Cm/它部分工作，但仍然让我没有解决方案

Answer 1

下面演示了我的注释的意思:

$('#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>

只有一个用户输入字段将被动态格式化。