Использование JQuery/Javascript для предварительной обработки онлайн-форм перед их сохранением

Question

Мне нужна помощь в предварительной обработке входных данных онлайн-формы перед отправкой и сохранением их в базе данных. Эта форма фактически делается с помощью компонента ChronoForms в Joomla 3.1. Форма создается с использованием HTML, а обработка выполняется с использованием JQuery/JavaScript с использованием действия "Load JS" внутри события "OnLoad" (для тех, кто знаком с ChronoForms).

Упрощенная форма выглядит следующим образом:

<form name="online_form" id="online_form">
    <select name="period_year" id="period_year">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select name="period_month" id="period_month">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="hidden" name="period" id="period"/>
    <input type="submit" id="submit_form"/>
</form>

То, что я хочу сделать, это когда пользователи отправили форму, значения для period_year и period_month объединяются в текстовую строку "x year и y months" и делаются как значения для period. База данных будет хранить только период вместо period_year и period_month.

Я попытался использовать прослушиватель событий при отправке формы, но это не сработало:

window.addEvent('domready', function() {
    $('online_form').addEventListener('submit', 
        function() { 
            var period_year = $('period_year').value;
            var period_month = $('period_month').value;
            $('period').value=period_year+' year and '+period_month+' months';
        }
    );
}

Другой альтернативой было использование атрибута onchange в элементе select следующим образом, но он мне тоже не помог:

....
<select name="period_year" id="period_year" onchange="process()">...</select>
<select name="period_month" id="period_month" onchange="process()">...</select>
....

Для руководителя:

function process() {
    $('period').value=period_year+' year and '+period_month+' months';
};

Что я сделал не так? Или есть другие правильные способы сделать это?

Answer 1

Необходимость # выбрать элементы с их идентификатором

$('#online_form').submit(function() {   
//-^---here
     $('#period').val(period_year+' year and '+period_month+' months');
     //-^---here

)};

Answer 2

Вам нужно использовать # для селектора идентификаторов ("#id") также изменяется value в val(), значение используется с DOM объект и селектор вернутся jQuery объект. Если вы хотите использовать значение, используйте [0] индексатор для преобразования объекта JQuery в объект DOM.

$('#online_form').addEventListener('submit', 
    function() { 
        $('#period').val(period_year+' year and '+period_month+' months');
        //$('period')[0].value=period_year+' year and '+period_month+' months';
    }
);