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>

提交输入框或选择框（不是两者）

2 个答案: