[jQuery] form richiamato due volte al click sul submit

  • Creatore Discussione Creatore Discussione ginger
  • Data di inizio Data di inizio

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...
 
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
 
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 :)
 
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:
 
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
 
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