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

PHP - Two directories up doesn't seem to work
Submit button not working in Wordpress
php push dimensional array
class table inheritance in eloquent orm
Laravel Route get controller's construct without method
Highcharts doesn't show all contents of x-axis
Dynamic table with php pdo and two foreach
PHP color of the first line in a loop
Decrypt Rijndael with Passphrase in PHP
WP-API Get Posts After a Specific Date
How Do i Print last 10 days using php? [closed]
MySQL: Joining table duplicates SUM()
how to manuplate the google api php client
Unable to get cookie in construct function
How to loop through Models find from Where clause?
Trying to keep session with curl login in twitter

Categories

HOME
python-2.7
xpath
openshift
user-interface
automapper
angular-ui-grid
scroll
swi-prolog
kivy
tcp
qooxdoo
turbojpeg
clone
save
reportviewer
cqrs
sslhandshakeexception
jquery-file-upload
synthesis
pinterest
pfobject
tableview
android-permissions
pst
el
gollum-wiki
multi-upload
device
eclipse-emf
exchange-server-2010
prompt
tf-idf
history.js
ccavenue
django-import-export
sendmessage
ninject
windows2012
commonsware-cwac
image-optimization
devtools
spring-rabbitmq
bean-validation
dreamfactory
xerces-c
keyboard-layout
jade4j
twilio-php
uivisualeffectview
microkernel
classnotfoundexception
pyttsx
asihttprequest
spongycastle
rightnow-crm
subforms
stateless-session-bean
email-forwarding
business-rules
openerp-6
oid
annotatorjs
gapi
mifos
researchkit
okio
e
logical
dcount
bilinear-interpolation
always-on-top
fdt
textblock
lowercase
dnx50
blank-line
mixins
enaml
vdm-sl
darwin
whitespace-language
mxe
n-tier-architecture
quantify
nidaqmx
jini
thruway
ivalueconverter
jms-serializer
nosql-aggregation
ctp
jquery-transit
postgres-xc
indesign-server
.net-remoting
chartfx
user-forums
prefuse
acpi
office-automation
photo-management
sqlsitemapprovider
autobench
isapi-redirect

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App