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

Question

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

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

该编辑器使用 javascript Submit()，它与编辑器上的一个小保存图标相关联。当用户按下编辑器上的按钮时，它会触发我在表单标签中拥有的功能。这就是我所能得到的。

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

JQuery 脚本的第一部分应该处理文本区域的表单验证。如果这真的很难工作，我愿意放弃它，只处理服务器端的所有事情，但我只需要将数据 POSTed 到 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=""只是意味着表单将提交回其当前位置，因此您必须防止这种情况发生。