how to use the jquery submit() form handler

Question

I have the following form:

<form action="" method="POST" name="form" id="form">
    <input name="year" type="text" id="year" placeholder="YYYY" size="4" maxlength="4">
    <input name="month" type="text" id="month" placeholder="MM" size="2" maxlength="2">
    <input name="day" type="text" id="day" placeholder="DD" size="2" maxlength="2">
    <input name="hour" type="text" id="hour" placeholder="HH" size="2" maxlength="2">
    <input name="minutes" type="text" id="minutes" placeholder="MM" size="2" maxlength="2">
    <input name="seconds" type="text" id="seconds" placeholder="SS" size="2" maxlength="2">
    <input name="sampleduration" type="text" id="sampleduration" size="4" maxlength="4">
    <input type="hidden" name="sample" id="sample">
    <input type="submit" name="submit" id="submit" value="Mark as reviewed">
</form>

Prior to submission of the form, I would like to concatenate some of the form fields and submit them as a string.

The string should look something like this: "2014-12-03 23:43:12"

The string is a concatenation of the individual form fields above.

I created a hidden form field "sample" so that I can assign the concatenated string to the hidden form field prior to form submission.

After form submission, php/mysql take over and insert the form into a mysql database.

The jQuery code that I have looks like this:

<script>
$( "#form" ).submit(function( event ) {
    $('#sample').val(year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds); });
</script>

My jQuery code does not work. Can anyone explain why?

Are you declaring all those variables? year, month, etc. — Smeegs
– Smeegs, Commented Apr 15, 2014 at 15:04
Does not work? Is the cable plugged in?.. just kidding :) Do you get an error explaining some values are not defined? — A1rPun
– A1rPun, Commented Apr 15, 2014 at 15:04
If you like to do somehting prior to submit you should use event.preventDefault() as first line in your function. — Daniel
– Daniel, Commented Apr 15, 2014 at 15:06
i don't get an error, but I suspect the problem is that 'year' or 'month', etc... are not recognized as variables. how do I fix this? — Carlos Muñiz
– Carlos Muñiz, Commented Apr 15, 2014 at 15:07

MaiKaY · Accepted Answer · 2014-04-15 15:00:42Z

3

your code must be in $(document).ready block to listen on your submit event - like this:

<script type="text/javascript">
    $(document).ready(function () {
        $("#form").submit(function (event) {
            alert('submit is fired!');
        });
    });
</script>

hopefully the following page is helping you: click here

answered Apr 15, 2014 at 15:00

MaiKaY

4,48223 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit Joki · Accepted Answer · 2014-04-15 15:01:29Z

3

Don't use the variables as is. i.e. year etc..

Wrap the year, month etc.. with $('#'+idOfElement).val()

Also wrap your code with $(document).ready() if you are calling the script before the DOM is created.

answered Apr 15, 2014 at 15:01

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

1 Comment

A1rPun Over a year ago

This is the right answer i guess ;). Not only wrapping it in document.ready.

Dan L · Accepted Answer · 2014-04-15 15:19:25Z

2

In Javascript you cannot access the variables without first instantiating them. jQuery is nothing but a bunch of code libraries written in Javascript and it is very useful.

What you're trying to do is access year, etc... without first telling Javscript that these variables exist.

What you have to do is var year; first tells Javascript these variables exist so they can be referenced in your code.

Here's a link to sample code that does what you want. Look at the comments in the code to understand what each part is doing.

Check out JS Fiddle with functional sample code. All you have to do now is set the value of the hidden string to the final_output.

Hope it helps!

http://jsfiddle.net/hx2sH/

answered Apr 15, 2014 at 15:19

Dan L

4,4696 gold badges45 silver badges82 bronze badges

Comments

TriniBoy · Accepted Answer · 2014-04-15 15:16:46Z

1

Following on from Amit's answer with an example.

$(document).ready(function () {
    $("#form").submit(function (event) {
        var concatVals = $('#year').val()+'-'+$('#month').val()+'-'+$('#day').val()+'-'+$('#hour').val()+':'+$('#minutes').val()+':'+$('#seconds').val();
        $('#representativeSampleLocation').val(concatVals); 
    });
});

answered Apr 15, 2014 at 15:16

TriniBoy

6903 silver badges10 bronze badges

Collectives™ on Stack Overflow

how to use the jquery submit() form handler

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related