Using JQuery/Javascript to pre-process online forms before saving them

Question

I need some help in pre-processing online form inputs before submitting and storing them in database. This form is actually done with the help of ChronoForms component in Joomla 3.1. The form is made using HTML and the processing is done using JQuery/JavaScript using the 'Load JS' action inside 'OnLoad' event (for those familiar with ChronoForms).

The simplified form is as follows:

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

What I want to do is when users submitted the form, values for period_year and period_month is combined into a text string "x year and y months" and made as value for period. The database will end up storing just period instead of period_year and period_month.

I tried using event listener on submit for the form but it didn't seem to work:

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';
        }
    );
}

Another alternative was to use onchange attribute on the select element as follows, but it didn't seem to work for me too:

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

For the head:

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

What did I do wrong? Or is there other correct ways to do it?

score 3 · Answer 1 · answered May 17 '13 at 06:46

3

need # to select elements with its id

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

)};

answered May 17 '13 at 06:46

bipen

36,319
9
49
62

i've tried adding the #, but using Google's inspect element, it throws out an error: "Uncaught TypeError: Cannot call method 'addEventListener' of null" – ImpStudent May 17 '13 at 07:16
@ImpStudent, read the answer which replaces `addEventListener` with [`jQuery.fn.submit()`](http://api.jquery.com/submit). It could have been written, more like your code, `$('#online_form').on('submit', function () {…});`. – binki Apr 02 '14 at 17:50

score 1 · Answer 2 · answered May 17 '13 at 06:45

1

You need to use # for ID Selector (“#id”) also change value to val(). value is use with DOM object and selector will return jQuery object. If you want to use value then use [0] indexer to convert jQuery object to DOM object.

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

answered May 17 '13 at 06:45

Adil

146,340
25
209
204

i've tried adding the #, but using Google's inspect element, it throws out an error: "Uncaught TypeError: Cannot call method 'addEventListener' of null" – ImpStudent May 17 '13 at 07:05

Using JQuery/Javascript to pre-process online forms before saving them

2 Answers2