How to populate two text fields from one select drop-down

Question

I have the following HTML produced by CakePHP's form helper. In the interface, the user is selecting two dates which are then used in the resulting PHP to pull data from MySQL. I have also provided the user with "financial months", which are defined in MySQL as a shortcut to pre-populate the two date fields. However, I have absolutely no idea how to achieve this as my jQuery/Javascript knowledge is very limited.

What I want to do: When user selects something from the SELECT box, the value of the option before the _ is pulled in to date1, and the value of the option after the _ is pulled in to date 2.

Is this possible?

edit: Here is the code in CakePHP that produces the form:

<script type="text/javascript" src="/js/revenuelines.js"></script>

<h1>Lock revenue</h1>

<div class="inner">

    <p>Select two dates to lock revenue for the specified period.</p>

    <?php

    echo $this->Form->create('lock');

    ?>

    <span>Between</span>
    <?php

    echo $this->Form->input('RevenueLine.date1', array('div' => false, 'class' => 'input datepicker', 'label' => false));

    echo "&nbsp;and&nbsp;";

    echo $this->Form->input('RevenueLine.date2', array('div' => false, 'class' => 'input datepicker', 'label' => false));

    echo $this->Form->submit('Submit', array('label' => false, 'div' => false, 'class' => 'submit_black gradient', 'style' => 'display: inline;')); 

    echo $this->Form->input('FinancialMonth.selector', array('label' => '&nbsp;&nbsp;&nbsp;...or select financial month to auto-populate&nbsp;&nbsp;&nbsp;', 'div' => false, 'class' => 'input', 'options' => $months));

    echo $this->Form->end(); 

    ?>
</div>

Here is the actual HTML produced:

<div id="content">

                        <script type="text/javascript" src="/js/revenuelines.js"></script>

<h1>Lock revenue</h1>

<div class="inner">

    <p>Select two dates to lock revenue for the specified period.</p>

    <form action="/revenue_lines/lock" id="lockLockForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
    <span>Between</span>
    <input name="data[RevenueLine][date1]" class="input datepicker hasDatepicker" type="text" id="RevenueLineDate1">&nbsp;and&nbsp;<input name="data[RevenueLine][date2]" class="input datepicker hasDatepicker" type="text" id="RevenueLineDate2"><input class="submit_black gradient" style="display: inline;" type="submit" value="Submit"><label for="FinancialMonthSelector">&nbsp;&nbsp;&nbsp;...or select financial month to auto-populate&nbsp;&nbsp;&nbsp;</label><select name="data[FinancialMonth][selector]" class="input" id="FinancialMonthSelector">
<option value="22JUN2013_26JUL2013">2013 - July</option>
<option value="27JUL2013_30AUG2013">2013 - August</option>
</select></form></div>
                    </div>

Answer 1

Yes it is!, code here:

jQuery demo here and code under:

$('#FinancialMonthSelector').on('change', function () {
    var val = this.value; // get the value from this select
    var parts = val.split("_"); // split the value on the "_" generating an array
    $('#RevenueLineDate1').val(parts[0]); // give input LineDate1 the arrays first value
    $('#RevenueLineDate2').val(parts[1]); // give input LineDate2 the arrays second value
});

and in plain javascript (demo)

var selectEl = document.getElementById('FinancialMonthSelector');
selectEl.onchange = function () {
    var input1 = document.getElementById('RevenueLineDate1');
    var input2 = document.getElementById('RevenueLineDate2');
    var val = this.value;
    var parts = val.split("_");
    input1.value = parts[0];
    input2.value = parts[1];
}

Answer 2

Use the change event, and then just split on _ (no error checking done here you can do that yourself)

$("#FinancialMonthSelector").change(function(){
  var value = $(this).val();
  var dates = value.split("_");
  $("#RevenueLineDate1").val( dates[0] );
  $("#RevenueLineDate2").val( dates[1] );
});