在同一行添加两个表单字段并将结果合并为一个？

Question

我找不到我的方案的答案，至少无法正确实施。我正在使用 Tsoha-Bootstrap 和 Twig 并有一个提交有关剪辑信息的表单。我想做的是：

• 将分辨率字段分成两个框，字段之间用 x 分隔。
• 分辨率的高度和宽度填好后，我需要将它们组合成一个名称属性（name="resolution"）。

这是我的代码表单的样子：http://gyazo.com/1051cc2c37dc413a31f6ca6b60111969
如您所见， res 没有按预期对齐，并且不太确定如何使组合方法发生。

这是我的表格：

{% extends "base.html" %}
{% block content %}
<h1>Upload a fresh clip</h1>

{% if errors %}
<div class="alert alert-danger">
  <ul>
    {% for error in errors %}
      <li>{{error}}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<script language="javascript">
    function combineResolution(){
    document.getElementsByName("resolution").value = document.getElementById("res1").value + " x " + document.getElementById("res2").value;
    }
</script>

<form method="post" action="{{base_path}}/clipList">
<div class="form-group">
  <label>Title</label>
  <input type="text" value="" name="title" value="<?php echo htmlspecialchars($_GET['title']); ?>" class="form-control" />
</div>

<div class="form-group">
  <label>Game</label>
  <input type="text" value="" name="game" value="<?php echo htmlspecialchars($_GET['game']); ?>" class="form-control" />
</div>

<div class="form-group">
  <label style="float:left;display:inline-block">Resolution</label> <br>
  <input id="res1" type="text" value="" name="res1" value="<?php echo htmlspecialchars($_GET['resolution']); ?>" class="form-control" style="width: 60px;float:left;display:inline-block"/>
  <p style="float:left">&#160;<strong>X</strong>&#160;</p>
  <input id="res2" type="text" value="" name="res2" value="<?php echo htmlspecialchars($_GET['resolution']); ?>" class="form-control" style="width: 60px;float:left;display:inline-block"/>
</div>
<br>
<div class="form-group">
  <label>FPS</label>
  <input type="text" value="" name="fps" value="<?php echo htmlspecialchars($_GET['fps']); ?>" class="form-control" />
</div>

<div class="form-group">
  <label>Upload date</label><br> <!-- Try to auto-add this without a field somehow. -->
  <input type="date" value="" name="added" value="<?php echo htmlspecialchars($_GET['added']); ?>" />
</div>

<div class="form-group">
  <label>Description</label>
  <textarea value="" name="description" value="<?php echo htmlspecialchars($_GET['description']); ?>" class="form-control"></textarea>
</div>

<div class="form-group">
  <button type="submit" class="btn btn-primary" action=combineResolution()>Save Changes</button>
</div>
</form>
{% endblock %}

属性被传递给一个存储方法，该方法使用每个字段的名称属性将信息放入一个表中。 （这就是为什么我认为使用 getElementsByName() 会起作用的原因。）

Answer 1

1. 您可以使用name="resolution" 进行隐藏输入。
2. 在输入上添加 jQuery 触发器以捕捉模糊动作。
3. 触发器触发后，您会更新隐藏输入中的值。