JQuery和Submit按钮

时间:2015-02-16 14:33:10

标签: php jquery html forms

我需要你的帮助。我创建了这个简单的脚本。我的目标是使用此表单的textarea中的文本更新我的数据库。问题是该脚本仅在第二次按下提交按钮时才起作用。由于一些不明原因(至少对我来说)它第一次没有工作..请你帮帮我吗?

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

3 个答案:

答案 0 :(得分:1)

$("#click_dove").click位于提交内。

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

答案 1 :(得分:0)

在你的情况下,ajax调用是在按钮单击处理程序中完成的,但按钮单击处理程序是在表单提交处理程序中注册的,所以只有在第一个表单提交(由提交按钮单击触发)之后才会出现单击事件处理程序正在做ajax调用将被注册。

解决方案:您不需要点击事件处理程序,将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!');
            }
        });
    });
});

答案 2 :(得分:0)

这里不需要两个功能。提交表单时调用$(“#form_dove”)。submit函数,单击按钮时调用$(“#click_dove”)。click函数。

因为你在提交函数中放置了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>