php


JQuery and Submit button


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>
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!');
}
});
});
});
The $("#click_dove").click is inside the submit.
This means the click becomes active only after the form is submitted. The code is clear :)
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>

Related Links

fwrite to txt-file
is there an abstraction layer for XML?
MVC without ORM is not real MVC?
php calculate float
Removing X-Powered-By
Graph spacing algorithm
What is Doctrine hydration? [closed]
sometime SetCookie() not working
When is a cookie available?
Unique, short filenames for pictures
returning null array in getting photos albums
Why does a PHP function with no parameters require parentheses?
best place to put xdebug_time_index() to measure page executing time when using ZF
how to implement and which Audio, video chat with file transfer for mywebsite using php
How can I make PHP scripts timeout gracefully while waiting for long-running MySQL queries?
PunBB or FluxBB?

Categories

HOME
python-2.7
user-interface
xcode
windows-8.1
focus
foaf
command-prompt
portable-class-library
tfs2015
tibco
apache-kafka-connect
sympy
scheduler
polymer-2.x
twitter-oauth
graphdb
documentum
clish
angular4
createjs
sslhandshakeexception
spring-jpa
sql-injection
supervisord
phonegap-build
nest-api
google-sites
string-formatting
jest
backtracking
fido-u2f
intel
channel
substring
beego
fstar
onchange
basex
autodesk-model-derivative
shapeless
bean-validation
jfxtras
ms-solver-foundation
microsoft-ui-automation
text-decorations
grunt-contrib-watch
minikube
docker-ucp
music21
sigsegv
watir-webdriver
webvtt
asp.net-web-api-routing
word-2007
patternlab.io
clrs
dynamics-crm-4
msxml
adobe-reader
controllers
wininet
jenkins-workflow
deferred-rendering
seadragon
m4
arbre
opencyc
largenumber
mousehover
nastran
blockquote
wlanapi
alwayson
abstract-factory
erlog
mathematical-expressions
debug-symbols
object-code
nidaqmx
.htpasswd
fileshare
tabletools
ivalueconverter
visual-c++-2005
discovery
non-ascii-characters
acceptance-testing
aero
spiral
oscilloscope
donut-chart
jquery-cycle
xmlwriter
android-dialog
image-formats
coordinate
system-information
uipangesturerecognizer
multidrop-bus
litespeed
winsxs
kext
css-friendly
gaelyk
aptitude
mongrel
ccnet-config
activestate
urchin
getimagesize
ntruencrypt
iphone-sdk-3.1.3
regioninfo
rendering-engine
service-factory

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App