Stampare avviso successo nel proprio div a seconda del form che ho inviato

[blur]

Ciao,
in una pagina html, ho diversi form in cui, tramite uno script ajax, senza dover ricaricare la pagina, passo i dati al file process.php che mi esegue l'inserimento dei dati nel db. Alla fine dell'inserimento mi viene stampato all'interno del <div> contenente il form, un messaggio.

lo script:

<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script><script type="text/javascript">
$(document).ready(function()
{    
    
    $(document).on('submit', '.formValidation', function()
    {
            
        var data = $(this).serialize();
        
        $.ajax({
        
        type : 'POST',
        url  : 'submit.php',
        data : data,
        success :  function(data)
                   {                        
                        $(".formValidation").fadeOut(500).hide(function()
                        {
                            $(".result").fadeIn(500).show(function()
                            {
                                $(".result").html(data);
                            });
                        });
                        
                   }
        });
        return false;
    });
});
</script>

e l'html

<form id="myform2" class="formValidation" name="myform2" action="" method="post"></form>
<div class="widget-body">
  <div class="widget-main">
    <div>
      <label for="form-field-select-1">Comune</label>
      <select name="comune" class="form-control" id="form-field-select-1" form="myform2">
        <option value="">Seleziona...</option>
      </select>
    </div>

    <hr>
    <div class="widget-body">
      <div class="widget-main">
        <div>

          <input type="text" name="comune" id="comune" value="" placeholder="Aggiungi Comune" form="myform2">
          <input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">

          <div class="result"></div>
        </div>
      </div>
    </div>
  </div> </div>

Il problema è che lo script fa riferimento ad una sola classe .result. Quindi avendo tutti i moduli form con la classe

<div class="result"></div>

mi vengono stampati in tutti i moduli lo stesso messaggio, mentre io vorrei che succedesse solo nel modulo che ho inviato. E' possibile modificare lo sript in modo che faccia questo?

grazie

[lukezz]

Basta usare un id univoco, quindi per ogni form crei un div con id diverso.

[blur]

Allora, se ho capito bene, ho sostituito nello script la classe .result con l'id #result e poi nei due form (solo 2 per il test) il

<div class="result"></div>

che era uguale per tutti con id=result1 e id=result2.
Se è così non funziona. Quale rifermento avrebbe lo script per stampare nel form corretto?

[lukezz]

Allora lasciando la classe result per tutti i form fai così:

//aggiungi la variabile divResult

var divResult = $(this).find('.result');

//nella success function

$(divResult).html(data);

[blur]

dunque, ho modificato lo script come hai detto, ma non funziona più, cioè al submit non succede nulla, neppure controllando la console con chrome.

$(document).ready(function(){	
	
	$(document).on('submit', '.formValidation', function()
	{
			
		var data = $(this).serialize();
		var divResult = $(this).find('.result');
		$.ajax({
		
		type : 'POST',
		url  : 'submit.php',
		data : data,
		success :  function(data)
				   {						
						$(".formValidation").fadeOut(500).hide(function()
						{
							$(".result").fadeIn(500).show(function()
							{
								$(divResult).html(data);
							});
						});
						
				   }
		});
		return false;
	});
});

[lukezz]

Bhe strano che non funziona più niente. La console da qualche errore?

[blur]

Ho controllato, il form funziona, cioè i dati vengono passati va POST al file e me li ritrovo nel database, solo che non mi compare più il messaggio dell'avvenuto caricamento all'interno del div corrispondente

[lukezz]

ma il div con la classe result si trova all'interno del form?

[blur]

intendi al tag <form>? Non proprio, nel senso che non potendo annidare i vari <form> l'uno dentro all'altro, ho dovuto eseguire uno stratagemma fornito da html5 che mette a disposizione la funzione "form".

Ma questo è html no?

[lukezz]

Il div con la classe result deve stare dentro i tag form

<form ...>
<input>
<div class="result"></div>
</form>