Help submitting a form to a JQuery script using a javascript submit() function

Question

I attempted to ask this question last week without a resolution. I am still unable to get this to work. What I would like to do is submit data entered through a WYSIWYG javascript editor to a JQuery script I have that will first tell the user if they are trying to submit an empty textbox The last thing I need it to do is tell the user if their data was entered successfully or not.

I am having a problem inside the JQuery script as nothing is being executed when I click the save button.

This editor uses javascript submit() that is tied to a small save icon on the editor. When the user presses the button on the editor, it fires the function I have in the form tag. That's about as far as I was able to get.

I think there is an issue with the form tag attributes because when I click anywhere on the editor, the editor jumps down off the bottom of the screen. I believe it has something to do with the onclick event I have in the form tag.

The first part of the JQuery script is supposed to handle form validation for the textarea. If that's going to be really difficult to get working, I'd be willing to let it go and just handle everything server side but I just need to get the data POSTed to the JQuery script so that I can send it to my php script.

Thanks for the help guys.

<form name="rpt" class="rpt" id="rpt" action="" onclick="doSave(); return false;">

---

function doSave()
{
  $(function()
  {
    $('.error').hide();
    $(".rpt").click(function()
    {
      $('.error').hide();
      var textArea = $('#report');
      if (textArea.val() == "")
      {
        textArea.show();
        textArea.focus();
        return false;
      }
      else
      {
          return true;
      }
     var dataString = '&report='+ report;
     alert (dataString);return false;

      $.ajax({
          type: "POST",
          url: "body.php?action=customer",
          data: dataString,
          dataType: 'json',
          success: function(data){
              $('#cust input[type=text]').val('');
              var div = $('<div>').attr('id', 'message').html(data.message);
              if(data.success == 0) {
                  $('#cust input[type=text]').val('');
                  $(div).addClass('ajax-error');
              } else {
                  $('#cust input[type=text]').val('');
                  $(div).addClass('ajax-success');
              }
              $('body').append(div);
            }
      });
      return false;
    });
  });
}

Answer 1

function X() {
    $(function() {
        //... things you want to do at startup
    });
};

Doesn't do what you want. Nothing is ever executed, because you never tell it to be executed.

You might want to try something like:

<script type="text/javascript">
    jQuery(function($) {
        //... things you want to do at startup
    });
</script>

Also, you want the onsubmit event of the form. You can use

$('#theform').submit(function() {
    //... perform the ajax save
});

In addition, you may want to look into the Form plugin.

Answer 2

There are a few things you need to change. Firstly this:

<form name="rpt" class="rpt" id="rpt" action="" onclick="doSave(); return false;">

isn't the jQuery way. Plus its not the click() event you want. Do this:

<form name="rpt" class="rpt" id="rpt" action="">

<script type="text/javascript">
$(function() {
  $("#rpt").submit(do_save);
});
</script>

The construction:

$(function() {
  ..
});

means "when the document is ready, execute this code". It is shorthand for and exactly equivalent to the slightly longer:

$(document).ready(function() {
  ..
});

This code:

$("#rpt").submit(doSave);

means "find the element with id 'rpt' and attach an event handler to it such that when the 'submit' event is executed on it, call the do_save() function".

And change doSave() to:

function doSave() {
  $('.error').hide();
  $(".rpt").click(function() {
    $('.error').hide();
    var textArea = $('#report');
    if (textArea.val() == "") {
      textArea.show();
      textArea.focus();
      return false;
    } else {
      return true;
    }
    var dataString = '&report='+ report;
    alert (dataString);return false;

    $.ajax({
      type: "POST",
      url: "body.php?action=customer",
      data: dataString,
      dataType: 'json',
      success: function(data){
        $('#cust input[type=text]').val('');
        var div = $('<div>').attr('id', 'message').html(data.message);
        if (data.success == 0) {
          $('#cust input[type=text]').val('');
          $(div).addClass('ajax-error');
        } else {
          $('#cust input[type=text]').val('');
          $(div).addClass('ajax-success');
        }
        $('body').append(div);
      }
    });
  });
  return false;
}

Note: return false is in the correct place now so it actually prevents the form submitting back to the server. action="" just means the form will submit back to its current location so you have to prevent that.