JQuery 和提交按钮答案

【问题标题】：JQuery and Submit buttonJQuery 和提交按钮
【发布时间】：2015-02-16 23:09:59
【问题描述】：

我需要你的帮助。我创建了这个简单的脚本。我的目标是使用此表单文本区域内的文本更新我的数据库。问题是该脚本仅在我第二次按下提交按钮时才起作用。出于某种未知原因（至少对我而言），它第一次不起作用。请您帮帮我吗？

<script>
$(document).ready(function(){
$("#form_dove").submit(function(e){
     e.preventDefault();
        $("#click_dove").click(function(){
           testo = $("#textarea_dove_2").val();
           alert(testo);
           data = 'testo='+testo;
                $.ajax({
                        type:"POST",
                        url:"php/update_dove.php",
                        data: data,
                        cache: false,
                        success: function(html){
                        $('#textarea_dove_2').val(html);
                        alert('Aggiornato!');
                         }
                       });
                    });
                  });
                });
       </script>

 <form name="form_dove" method="post" id="form_dove">
 <div id="textarea_dove">
 <textarea rows="17" cols="90" name="textarea_dove_2"                   id="textarea_dove_2" >
<?php echo("$testo_dove"); ?>
</textarea> 
</div>
<div id="form_submit_dove">
<input type="submit" value="SALVA E AGGIORNA" id="click_dove">
</div>
</form>

【问题讨论】：

标签： php jquery html forms

【解决方案1】：

$("#click_dove").click 在提交中。

这意味着只有在提交表单后点击才会生效。代码很清楚:)

【讨论】：

【解决方案2】：

在您的情况下，ajax 调用是在按钮单击处理程序中完成的，但按钮单击处理程序是在表单提交处理程序中注册的，因此只有在第一个表单提交（由提交按钮单击触发）之后，单击事件处理程序才正在做的ajax调用会被注册。

解决方法：不需要click事件处理程序，将ajax调用移至提交事件处理程序

$(document).ready(function () {
    $("#form_dove").submit(function (e) {
        e.preventDefault();
        testo = $("#textarea_dove_2").val();
        alert(testo);
        data = 'testo=' + testo;
        $.ajax({
            type: "POST",
            url: "php/update_dove.php",
            data: data,
            cache: false,
            success: function (html) {
                $('#textarea_dove_2').val(html);
                alert('Aggiornato!');
            }
        });
    });
});

【讨论】：

感谢您提供的所有信息，我一回到家就尝试代码:-)
好的，这两个脚本都可以工作，但我还有另一个问题.. php 脚本已执行，但传递给 php 脚本的文本是原始文本，而不是我在按下提交按钮之前输入的内容为了更好地理解（对不起我的英语），当我在文本区域内加载页面时，上面写着：“你好”。然后我编辑了文本区域并写了：“hello 123”。当我按下提交按钮时，脚本会传递第一个字符串而不是第二个字符串..
我用谷歌做了一点研究，我发现问题可能出在 TinyMCE 编辑器上。是的，我正在使用它，很抱歉之前没有提及它，但我不知道这可能是我的问题的本质。我使用的是 TinyMCE 编辑器的 4.1.7 版本。你可以帮帮我吗？感谢您的耐心和帮助，真的非常感谢！戴维德，
@P.Davide 尝试在 testo = $("#textarea_dove_2").val(); 之前致电 tinyMCE.triggerSave();

【解决方案3】：

这里不需要两个函数。提交表单时调用 $("#form_dove").submit 函数，单击按钮时调用 $("#click_dove").click 函数。

因为你把点击函数的定义放在了提交函数里面，所以直到表单被提交（即你第一次点击按钮）之前，点击函数才被声明（即不存在）。然后第二次按下按钮时，click 函数完成了你的 ajax 操作。

在这种情况下，最简单的方法是在提交函数中执行您想要的处理 - 这就是您希望在提交表单时发生的事情。如果您需要在提交之前检查表单是否已正确填写，请使用点击功能。

<script>
$(document).ready(function(){
    $("#form_dove").submit(function(e){
      e.preventDefault();
      testo = $("#textarea_dove_2").val();
      alert(testo);
      data = 'testo='+testo;
      $.ajax({
                type:"POST",
                url:"php/update_dove.php",
                data: data,
                cache: false,
                success: function(html){
                    $('#textarea_dove_2').val(html);
                    alert('Aggiornato!');
                 }
       });
    });
    $("#click_dove").click(function(){
      //put some validation in here if you want
    });
});
</script>

【讨论】：