Add two form fields on same row and combine results into one?

Question

I couldn't find an answer to my scenario, at least couldn't manage to implement one properly. I'm using Tsoha-Bootstrap and Twig and have a form that submits information about a clip. What I'm trying to do is:

• Separate the resolution field into two boxes with an x in between the fields.
• After the height and width of the resolution is filled in, I need those to be combined into one name property (name="resolution").

Here's what the form looks like with the code I have: http://gyazo.com/1051cc2c37dc413a31f6ca6b60111969
As you can see, the res is not aligning as intended and not quite sure how to make the combination method happen.

Here's my form:

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

The properties are passed onto a store method that puts the info into a table using the name properties of each field. (Which is why I figured using getElementsByName() would work.)

Answer 1

1. You can make a hidden input with name="resolution" .
2. Add a jQuery trigger on inputs to catch blur action.
3. After a trigger fire you update the value in that hidden input.