JQuery and Submit button - php

Question

I need your help. I created this simple script. My goal is to update my database with the text inside the textarea of this form. The problem is that the script works only the second time i press the submit button. For some unknown reason (at least for me) it doesn't work the first time.. May you help me, please?
<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

The $("#click_dove").click is inside the submit.
This means the click becomes active only after the form is submitted. The code is clear :)

Answer 2

In your case the ajax call is done in the button click handler, but the button click handler is registered in the form submit handler, so only after the first form submit(triggered by the submit button click) the click event handler which is doing the ajax call will get registered.
Solution: You don't need the click event handler, move the ajax call to the submit event handler
$(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 3

You don't need two functions here. The $("#form_dove").submit function gets called when the form is submitted and the $("#click_dove").click function is invoked when the button is clicked.
Because you put the definition of the click function inside the submit function, the click function was not declared (ie didn't exist) until the form was submitted (ie. the first time you clicked the button). Then the second time the button was pressed, the click function did your ajax stuff.
In this case, it's most straightforward just do the processing you want in the submit function - it's what you want to happen when the form is submitted. Use the click function if you need to do some checking to see if the form has been filled in properly before submitting it.
<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>