帮助使用 javascript submit() 函数将表单提交到 JQuery 脚本

Question

上周我试图问这个问题，但没有得到解决。我仍然无法让它工作。我想做的是将通过 WYSIWYG javascript 编辑器输入的数据提交到我拥有的 JQuery 脚本，该脚本将首先告诉用户他们是否正在尝试提交一个空文本框我需要它的最后一件事do 是告诉用户他们的数据是否输入成功。

我在 JQuery 脚本中遇到问题，因为当我单击保存按钮时没有执行任何操作。

此编辑器使用绑定到编辑器上的小保存图标的 javascript submit()。当用户按下编辑器上的按钮时，它会触发我在表单标签中的功能。这大概是我所能得到的。

我认为表单标签属性存在问题，因为当我在编辑器上单击anywhere 时，编辑器会从屏幕底部跳下。我相信这与我在表单标签中的 onclick 事件有关。

JQuery 脚本的第一部分应该处理文本区域的表单验证。如果这真的很难开始工作，我愿意放手，只处理服务器端的所有事情，但我只需要将数据发布到 JQuery 脚本，以便我可以将其发送到我的 php 脚本。

感谢大家的帮助。

<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

您需要更改一些内容。首先是：

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

不是 jQuery 方式。加上它不是您想要的 click() 事件。这样做：

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

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

结构：

$(function() {
  ..
});

表示“当文档准备好时，执行这段代码”。它是略长的简写，完全等同于：

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

这段代码：

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

意思是“找到id为'rpt'的元素并为其附加一个事件处理程序，这样当'submit'事件在其上执行时，调用do_save()函数”。

并将 doSave() 更改为：

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

注意： return false 现在在正确的位置，因此它实际上阻止了表单提交回服务器。 action="" 仅表示表单将提交回其当前位置，因此您必须防止这种情况发生。

Answer 2

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

不做你想做的事。什么都不会被执行，因为你从来没有告诉它被执行。

您可能想尝试以下方法：

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

另外，您需要form 的onsubmit 事件。你可以使用

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

此外，您可能还想查看Form plugin。