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

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.

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

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

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

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.

此编辑器使用javascript submit()与编辑器上的小保存图标相关联。当用户按下编辑器上的按钮时,它会触发我在表单标签中的功能。这就是我能够得到的。

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.

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

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.

JQuery脚本的第一部分应该处理textarea的表单验证。如果这真的很难开始工作,我会愿意让它去处理所有服务器端,但我只需要将数据发送到JQuery脚本,以便我可以将它发送到我的PHP脚本。

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

2 个解决方案

#1

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:

不是jQuery的方式。加上它不是你想要的click()事件。做这个:

<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".

表示“找到id为'rpt'的元素并附加一个事件处理程序,以便在对其执行'submit'事件时,调用do_save()函数”。

And change doSave() to:

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

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.

注意:return false现在位于正确的位置,因此它实际上阻止了表单提交回服务器。 action =“”只表示表单将提交回其当前位置,因此您必须阻止它。

#2

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

此外,您需要表单的onsubmit事件。您可以使用

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

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

此外,您可能需要查看Form插件。

#1