CODEWITHSUNDEEP
javascriptjqueryforms
Carlos Muñiz
Carlos Muñiz

Reputation: 1918

how to use the jquery submit() form handler

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?

Upvotes: 0

Views: 247

Answers (4)

Dan L
Dan L

Reputation: 4439

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/

Upvotes: 2

TriniBoy
TriniBoy

Reputation: 690

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

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

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.

Upvotes: 3

MaiKaY
MaiKaY

Reputation: 4482

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

Upvotes: 3

Related Questions