如何在提交之前运行javascript函数？

Question

I am using a javascript function to append values to a hidden div, which has to be submitted to the database.
The javascript function needs to run when the Submit button is clicked, append the values, and then the form should be submitted.
My js code to append the values like this:

$('#submitButton').click( function () {
  $('#submitField').val('[');
  $.each(Selector.selected_options, function (i) {
    if (i == 0){
      $('#submitField').val($('#submitField').val() + this.id);
    } else {
      $('#submitField').val($('#submitField').val() + ', ' + this.id);
    }
  });
  $('#submitField').val($('#submitField').val()+']');
});

(This output is evaluated as an array)

I am using Rails form_tag and text_field_tag

How can I make this function run (and finish) right before the form is submitted to the database?

Answer 1

You can write your all code into onSubmit event

like.. -

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );

});

Answer 2

You could use $(#form-id).submit.preventDefault()

then the function dealing with the div and then an $(#form-id).trigger('submit') to submit the form after the div has been populated

$('#FORM-ID').submit( function (e) {
  e.preventDefault();
  $('#submitField').val('[');
  $.each(Selector.selected_options, function (i) {
    if (i == 0){
      $('#submitField').val($('#submitField').val() + this.id);
    } else {
      $('#submitField').val($('#submitField').val() + ', ' + this.id);
    }
  });
  $('#submitField').val($('#submitField').val()+']');
  $('#FORM-ID').trigger('submit');
});