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 %}

将属性传递到store方法，该方法使用每个字段的name属性将信息放入表中。（这就是为什么我认为使用getElementsByName（）会起作用。）

Answer 1

您可以使用name="resolution"进行隐藏输入。
在输入上添加jQuery触发器以捕获模糊操作。
触发器触发后，您将更新该隐藏输入中的值。

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

1 个答案: