[jQuery] form richiamato due volte al click sul submit

ginger

Nuovo Utente
22 Ott 2012
9
0
0
Salve,
sto usando un form per aggiungere dei commenti a dei post sul sito che sto costruendo: al click sul submit ho associato una funzione jQuery ma la funzione viene richiamata due volte e quindi i dati nel database sono inseriti due volte!
Il form è questo:

Codice:
<form action="#" method="post" id="form_comment">
<textarea name="comment<?php echo $id; ?>" id="comment<?php echo $id; ?>" rows="1" cols="29"></textarea>
<button type="submit" id="mySubmitButton" value="" />
<input type="hidden" name="post_id" id="post_id" value="<?php echo $id; //qui recupero l'id del post che sto commentando ?>"/> 
<input type="hidden" name="verifica_login" id="verifica_login" value="<?php if(isset($_SESSION['nome_user'])) echo $_SESSION['nome_user']; else echo 'no'; // questo valore mi permette di verificare se l'ut è loggato?>"/>
</form>

Questa è la funzione richiamata al click sul submit:

Codice:
<script type="text/javascript">
$(function() {

$("#mySubmitButton").click(function() {
//$('#mySubmitButton').attr('disabled', true); //disabilita il tasto submit, l'applicazione di questa riga non risolve il problema

	var post_id = $("#post_id").val();  //questo è l'id del post che passo alla pag  insert_comment_db.php per inserire il commento del db
	var comment = $("#comment"+post_id).val();
	var dataString =  '&comment=' + comment + '&post_id=' + post_id;
	var login = $("#verifica_login").val();
	
	if( comment=='')
	 {
	alert('Please insert a comment: '+post_id);
	 }
	else 
	 {
		if(login == 'no')
		{
			alert('You have to login to comment');
		}
		else
		{
		$("#flash").show();
		$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>'); 
				$.ajax({
					type: "POST",
					url: "insert_comment_db.php", 
					data: dataString,
					cache: false,
					success: function(html){
	 
							$("div#update<?php echo $id; ?>").append(html);
							$("div#update<?php echo $id; ?> li:last").fadeIn("slow");
	  
							document.getElementById('comment<?php echo $id; ?>').value='';
		
						  $("#flash").hide();
						  //alert('inserito in db'); // questo alert viene richiamato due volte
		
					}
				});
		}
return false;
	}
});

});
</script>

Ho provato varie soluzioni che hanno fallito tutte:
  1. Ho sostituito $("#mySubmitButton").click con $("#form_comment").submit
  2. ho rimosso i tag dei form di apertura e chiusura (<form> </form>)
  3. ho rimosso tutti gli if ed else che uso per dei controlli nella funzione
  4. ho chiamato il tasto submit in vari modi, <input type="submit"> o <button> etc...
  5. ho rimosso l' "action=#" dal form
  6. usato vari browser: chrome, ff, IE con tutti lo stesso problema

Nessuno di questi metodi risolve il problema nè mi aiuta a capire qual'è....

:(

Ps:ho cercato altre discussioni simili nel forum, non ne ho trovate...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ad una prima letta a me sembra a posto
il button si chiude con </button>
HTML:
<button type="submit" id="mySubmitButton" value=""></button>
fai una prova anche cosi
HTML:
<script type="text/javascript">
    $("#mySubmitButton").click(function() {
        
        $('#mySubmitButton').attr('disabled', true);
        var post_id = $("#post_id").val(); 
        var comment = $("#comment" + post_id).val();
        var dataString =  'comment=' + comment + '&post_id=' + post_id;  // la prima & non dovrebbe servire
        var login = $("#verifica_login").val();
	
        if( comment=='') {
            alert('Please insert a comment: ' + post_id);
            $('#mySubmitButton').attr('disabled', false);
            return false; 
        } 
        if(login == 'no'){
            alert('You have to login to comment');
            $('#mySubmitButton').attr('disabled', false);
            return false;
        }
        
        $("#flash").show();
        $("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
       
        $.ajax({
            type: "POST",
            url: "insert_comment_db.php", 
            data: dataString,
            cache: false,
            success: function(html){
                $("div#update<?php echo $id; ?>").append(html);
                $("div#update<?php echo $id; ?> li:last").fadeIn("slow");
                $('#mySubmitButton').attr('disabled', false);
                document.getElementById('comment<?php echo $id; ?>').value='';
                	
                $("#flash").hide();
                //alert('inserito in db'); // questo alert viene richiamato due volte		
            }
        });       
        return false;   
    });   
</script>
non ho testato
 

ginger

Nuovo Utente
22 Ott 2012
9
0
0
non ho testato

Ci ho provato io ma niente...il problema secondo me non sta all'interno dello script ma sta proprio nel fatto che lo chiama interamente due volte!! Ma io non capisco, solo 3 giorni fa funzionava perfeettamente!! :crying:
 

ginger

Nuovo Utente
22 Ott 2012
9
0
0
D'ooooooooooooooooooh!! Ho capito dove sbagliavo....era proprio dove pensavo: alla chiamata della funzione!! Ogni volta che richiamavo un nuovo post richiamavo la pagina che conteneva la funzione javascript che rispondeva al click del subimit...così facendo richiamavo più di una funzione nella stessa pagina!!! ho provato a metterla tra i tag <head> ma non so perchè non funziona!! quindi ho dato al nome dell'id del bottone un nome identificativo per ogni post e che richiamasse una precisa funzione js...in pratica l'id del bottone l'ho sotituito con
Codice:
<button type="submit" id="mySubmitButton<?php echo $id; ?>" class="mySubmitButton" value="" ></button>
e la chiamata alla funzione allo stesso modo:
Codice:
$("#mySubmitButton<?php echo $id; ?>").click(function() {

Grazie lo stesso dell'aiuto :)
 

ginger

Nuovo Utente
22 Ott 2012
9
0
0
Ragazzi ho un altro problema sullo stesso script...l'ho modificato perchè il precedente funzionava solo in parte:
Questo è il solito form:

Codice:
<form method="post" id="form_comment">
	<textarea name="comment<?php echo $id; ?>" id="comment<?php echo $id; ?>" class="comment<?php echo $id; ?>" rows="1" cols="29"></textarea>
	<input type="hidden" name="verifica_login" id="verifica_login" value="<?php if(isset($_SESSION['nome_user'])) echo $_SESSION['nome_user']; else echo 'no'; // questo valore mi permette di verificare se l'ut è loggato?>"  />
	<button class="mySubmitButton" onClick="mySubmitButton(<?php echo $id; ?>)"></button>
</form>

Questa è la funzione js richiamata:

Codice:
function mySubmitButton(id) {

	var id = id;  //questo è l'id del contest che passo alla pag  insert_comment_db.php per inserire il commento del db
	var comment = $('textarea#comment'+id).val();
	var dataString =  '&comment=' + comment + '&id=' + id;
	var login = $("#verifica_login").val();
	alert('id= '+id+' comment ='+comment+' datastring è '+dataString);
	if( comment=='')
	 {
	alert('Please insert a comment: id= '+id+' comment ='+comment+' ');
	 }
	else 
	 {

		if(login == 'no')
		{
			alert('You have to login to comment');
		}
		else
		{
		alert('sono prima di ajax');
		$("#flash").show();
		$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>'); //nello script originale c'era un immagine prima di loading comment
				$.ajax({
					type: "POST", 
					url: "insert_comment_db.php", //in questa pagina php inserisco script e controlli per inserire il commento nel db
					data: dataString,
					cache: false,
					success: function(html){
	
							$("div#update"+id).append(html);
							$("div#update"+id+" li:last").fadeIn("slow");
	  
							document.getElementById('comment'+id).value='';
		
						  $("#flash").hide();
						  //alert('inserito in db');
						  //alert('inserito commento: '+comment);
		
					}
				});alert('sono dopo di ajax');
				return false;
		}

	}
}

Il problema è che non riesco ad entrare nel "success: function" e la pagina si ricarica!! Non capendo perchè ho cercato un po su internet dove ho trovato questo pezzo di codice da inserire nell'ajax:

Codice:
error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }

L'ho inserito prima di success function e l'errore che mi riporta è il primo: cioè network failure...ovviamente sono perfettamente connessa al mio sito!! Non ho capito cosa sia jqXHR ma ve l'ho riportato nella speranza vi possa aiutare a capire il mio problema.....:confused:
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ho fatto diverse prove perche la cosa mi incuriosiva
ho notato che lo script funzionava bene su Explorer ma non su FF e Chrome
ho ridotto al minimo il codice per capirne il motivo
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<?php
$id = 1;
?>
<form method="post" action="" id="form_comment">
    <textarea name="comment<?php echo $id; ?>" id="comment<?php echo $id; ?>" rows="1" cols="29"></textarea>
    <input type="button" value="invia" onClick="mySubmitButton(<?php echo $id; ?>)"/>
</form>
<div id="flash" style="display:none"></div>
<div id="update<?php echo $id; ?>">
    <ul>
        <li>uno</li>
        <li>due</li>
    </ul>
</div>
<script>
    function mySubmitButton(id) {
         
        var comment = $('textarea#comment'+id).val();
        var dataString =  'comment=' + comment + '&id=' + id;
                
        
        $("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>'); 
        $.ajax({
            type: "POST", 
            url: "insert_comment_db.php", 
            data: dataString,
            success: function(response){
	
                $("#update"+ id + " ul").append("<li>" + response + "</li>");		
                $("#flash").hide();
		
            },
            error: function(er) {		
                var status = er.status;
                var text = er.statusText;			
                var message = status + ': ' + text;
                alert(message);		
            }
        });            
    }
</script>
insert_comment_db.php
PHP:
<?php

echo $_POST['id'] . " " . $_POST['comment'];
?>
come hai segnalato tu lo status +della chiamata ajax risultava sempre 0 ma non su Explorer dove funzionava
ho risolto togliendo il tag button e inserendo al suo posto il tag input type='button'
ora non me lo so spiegare ma ha ripreso a funzionare anche su gli altri browser

facci qualche prova
 

ginger

Nuovo Utente
22 Ott 2012
9
0
0
ora non me lo so spiegare ma ha ripreso a funzionare anche su gli altri browser

facci qualche prova

Avevo già provato ad usare input type="button" e ovviamente non funzionava....ma ora non me lo so spiegare neanche io ma funziona!!! Mi funziona su tutti i browser...anche se IE mi da molti problemi su altri script (che prima funzionavano!) che su FF e chrome vanno perfetti...alle volte penso di fare proprio un sito a parte per IE...ma proverò prima a risolverli,quindi se non ci riuscirò penso che ci risentiremo presto!!!

Grazie mille del supporto!! E' davvero un gran bel forum questo :byebye: :D
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Scelta form con jquery jQuery 1
P sostituire form con jquery jQuery 0
A consiglio uso jquery php per mostrare parte di un form PHP 6
A consiglio uso jquery per mostrare parte di un form jQuery 0
B jQuery mobile e più form ajax jQuery 1
L jquery UI dialog form. Conferma prima di invio jQuery 2
C form con jquery jQuery 3
I Richiamare funzione jquery all'invio del form php Javascript 6
P controllo dati form con jquery e php PHP 8
P problema validazione form con ajax e jquery Ajax 0
D Problema nella validazione di un form con JQUERY ed AjAX jQuery 4
G problema con plugin validazione form jquery jQuery 0
K jQuery Form Reset jQuery 1
D Selezionare tutti i checkbox di un form con jQuery jQuery 1
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1
G [HTML] Jquery e tooltipster's jQuery 5
I Jquery fadeout-fadein html data jQuery 0
trattorino Estrarre Nome Utente jquery div php PHP 9

Discussioni simili