Кнопка JQuery и Submit

Question

Мне нужна ваша помощь. Я создал этот простой скрипт. Моя цель - обновить мою базу данных текстом внутри текстового поля этой формы. Проблема в том, что скрипт работает только во второй раз, когда я нажимаю кнопку отправки. По какой-то неизвестной причине (по крайней мере для меня) это не работает в первый раз. Можете ли вы мне помочь, пожалуйста?

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

Answer 1

В вашем случае вызов 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!'); 
      } 
     }); 
    }); 
}); 

Answer 2

$("#click_dove").click находится внутри представить.

Это означает, что щелчок активируется только после отправки формы. Код ясен :)

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