提交输入框或选择框（不能同时提交）

Question

我希望我的用户可以选择提交表单，他们可以选择使用选择框或输入文本框，但不能同时使用两者。这是我的表单代码：

    <!-- Text input-->
    <div id="incident-type" class="control-group">
      <label class="control-label" for="textinput">Incident Type (Use this box or the common incident box)</label>
      <div class="controls">
        <input id="textinput" name="incident_type" type="text" class=" form-control">
      </div>

    </div>  

<!-- Select Box -->
           <div id="incident-control-box" class="control-group">
      <label class="control-label" for="textinput">Common Incidents (Use this box or the incident type box)</label>
      <div class="controls">
        <select onclick="hideInputBox()" id="textinput incident-type1" name="incident_type" type="text" class=" form-control" >
            <option value="blank"></option>
      <option value="AFA Commercial">AFA Commercial</option>
      <option value="AFA Residential">AFA Residential</option>
      <option value="MVA W/Injuries">MVA W/Injuries</option>
      <option value="Gas Leak Outside">Gas Leak Outside</option>
      <option value="Gas Leak Inside">Gas Leak Inside</option>
      <option value="Investigation">Investigation</option>
      <option value="Possible Structure Fire">Possible Structure Fire</option>

          </select>
      </div>

    </div>

然后这是我的 PHP 代码，它获取表单的输入框：

  $incident_type     = $row['incident_type'];

我遇到的问题是我希望他们中的任何一个根据用户选择填写的内容来提交。目前只有选择输入有效，文本框输入也无效。

更新：请参阅我在下面添加的答案，我已经弄清楚了。

Answer 1

很遗憾，您将无法按照您尝试的方式执行此操作，因为incident_type 参数发生冲突。发生这种情况时，服务器会任意选择一个——我见过的大多数都是参数列表中的最后一个。你会想要给输入不同的名字，但是你有很多选择：

• 如果文本框不为空，请使用文本框，因为它更具自定义性。
• 如果选择为空白，请使用文本框。
• 强制选择select 并提供Other 选项。如果选择了 Other，请使用文本框。
• 让用户明确地选择使用哪个切换开关（如果您愿意，可以隐藏未使用的输入）。也提交切换的值，并使用它指定的字段。

如果您真的想将逻辑排除在服务器之外，您可以编写一些 JavaScript 将 name 属性从一个输入切换到另一个输入。这样一来，只会发送一个，但这对我来说有点恶心。

Answer 2

所以我最终通过使用 jQuery 解决了这个问题。我从用户 bob-the-destroyer 那里得到了一些帮助，他评论并告诉了我应该如何实施这个解决方案的一些步骤。我基本上有一个隐藏的输入，并从表单上的两个输入中复制文本或选定的值，并将其提交到隐藏的输入中。我使用下面的 jQuery 代码传输了输入内容的文本/值。

HTML：

<!-- Text input-->
<div id="incident-type" class="control-group">
  <label class="control-label" for="textinput">Incident Type (Use this box or the common incident box)</label>
  <div class="controls">
    <input id="input-incident1" name="input-incident1" type="text" class=" form-control">
  </div>

</div>  



        <!-- Select Box -->

       <div id="incident-control-box" class="control-group">
  <label class="control-label" for="textinput">Common Incidents (Use this box or the incident type box)</label>
  <div class="controls">
    <select id="input-incident2" name="input-incident2" type="text" class=" form-control" >
        <option value=""></option>
  <option value="AFA Commercial">AFA Commercial</option>
  <option value="AFA Residential">AFA Residential</option>
  <option value="MVA W/Injuries">MVA W/Injuries</option>
  <option value="Gas Leak Outside">Gas Leak Outside</option>
  <option value="Gas Leak Inside">Gas Leak Inside</option>
  <option value="Investigation">Investigation</option>
  <option value="Possible Structure Fire">Possible Structure Fire</option>

      </select>
  </div>

</div>  

<input type="hidden" id="incident_type" name="incident_type">

jQuery：

 <script>
          $(function () {
    var $src = $('#input-incident1'),
        $dst = $('#incident_type');
    $src.on('input', function () {
        $dst.val($src.val());
    });
        });

        </script>

                <script>
                $(function () {
    var $src = $('#input-incident2'),
        $dst = $('#incident_type');
    $src.on('input', function () {
        $dst.val($src.val());
    });
    });
        </script>