Problemi con ajax - input multipli

rapide

Problemi con ajax - input multipli

Ciao,
Da qualche settimana (purtroppo non riesco mai a trovare più di mezz'ora consecutiva per lavorarci su) sbatto la testa con ajax, sono relativamente neofita, anche se da autodidatta ho acquisito una certa dimestichezza con PHP e jquery (html e css sono invece il mio regno). I miei dubbi/problemi sono:

Per quale motivo se nel file html che effettua la chiamata ajax i dati vengono inseriti all'interno dei tag <form></form> la pagina effettua inevitabilmente il reload che non voglio? Cosa sbaglio?
Come faccio ad inviare il mio "value=pincopallo" se ho più di un input? Per come è strutturata la mia funzione ora (seguono i codici) qualunque tasto io pigi, viene riconosciuto sempre è solo il value del primo input.

Ho provato anche a restituire una risposta semplicissima del tipo "echo $_REQUEST['value']" e il browser mi restituisce come risposta "Array".

(seguono codici per maggior chiarezza)

pagina html (head della pagina con script che effettua la chiamata)


<script type="text/javascript">
"use strict";
jQuery(document).ready(function($){
$('#indiceRaccolte li').click(function(){
//prendiamo il valore del nostro campo input
var inputValue = $('.indiceR').val();
//Richiesta ad un file al quale inviamo in POST il parametro value contenente il valore del nostro campo input
$.ajax({
url: "php/indice_raccolte.php",
type: "POST",
data: {value : inputValue},
dataType: "html",
});
// Funzione che restituisce la risposta del nostro script se la nostra richiesta Ajax avrà esito positivo
success: function(msg){
$("#indicePoesie").html(msg);
});
});
});
</script>

pagina html (body lista di input che dovrebbero inviare il value + ul dedicato alla stampa del risultato)


<ul id="indiceRaccolte">
     <li class="TindiceR"><strong>INDICE DELLE RACCOLTE</strong></li><br />
     <li><input type="submit" class="indiceR 01" name="raccolta" value="LUCI E OMBRE" /></li>
     <li><input type="submit" class="indiceR 02" name="raccolta" value="DUE DI NOI "/></li>
     <li><input type="submit" class="indiceR 03" name="raccolta" value="ECCOTI" /></li>
     <li><input type="submit" class="indiceR 04" name="raccolta" value="UNA NUOVA DIMENSIONE" /></li>
     <li><input type="submit" class="indiceR 05" name="raccolta" value="PARIDE³" /></li>
     <li><input type="submit" class="indiceR 06" name="raccolta" value="E POI ARRIVI TU" /></li>
     <li><input type="submit" class="indiceR 07" name="raccolta" value="UN SENSO DI ME" /></li>
     <li><input type="submit" class="indiceR 08" name="raccolta" value="PER UN RAGGIO DI SOLE" /></li>
     <li><input type="submit" class="indiceR 09" name="raccolta" value="NUOVE EMOZIONI" /></li>
     <li><input type="submit" class="indiceR 10" name="raccolta" value="TERRIBIE IL SILENZIO" /></li>
     <li><input type="submit" class="indiceR 11" name="raccolta" value="IN TUTTO IL MONDO TU" /></li>
</ul>
<ul id="indicePoesie">
</ul>

pagina php (per ora è solo una sperimentazione, in seguito ad ogni value corrisponderà una chiamata php/MySql per estrarre dati da un db)


<?php
include 'connect.php';
if(isset($_REQUEST['value']))// Se si clicca sui link degli appartamenti{
     if ($_REQUEST['value'] == 'LUCI E OMBRE') 
     {
     echo "Luci e ombre";
     }
     elseif($_REQUEST['value'] == 'DUE DI NOI')
     {
     echo "Due di noi";
     }
     elseif($_REQUEST['value'] == 'ECCOTI')
     {
     echo "eccoti";
     }
}
else {
     echo "Non ha funzionato l'invio del POST, ma almeno so che sta scrivendo qualcosa"; 
}
?>

rapide

Soluzione trovata da solo, siccome può interessare ad altri posto la soluzione.

L'errore era nella "click function" che selezionava solo il primo degli elementi. La soluzione è stata aggiungere alla select jQuery la specifica "children". Di seguito posto nuovamente il codice jQuery che effettua la chiamata. Lo posto integralmente per aiutare eventuali neofiti.


<script type="text/javascript">
jQuery(document).ready(function() {
	$('#indiceRaccolte > li').click(function(){
		//prendiamo il valore del nostro campo input utilizzando la funzione child (perché ci sono più input)
		var inputValue = $(this).children().val();
		//Richiesta ad un file al quale inviamo in POST il parametro value contenente il valore del nostro campo input
		var richiesta = $.ajax({
			url: "php/indice_raccolte.php",
			type: "POST",
			data: {value : inputValue},
			dataType: "html",
			});
		// Funzione che restituisce la risposta del nostro script se la nostra richiesta Ajax avrà esito positivo
		richiesta.done(function(data) {
			$("#indicePoesie").html(data);
		});
	});
});
</script>

ultima

La soluzione è stata utilizzare $(this) non children.
E poi non utilizzate un input type submit, che non serve a nulla. Potevi utilizzare tranquillamente un <a> con un data-value="valore" e recuperare tale valore:

$('li a').click(function(event) {
var value = $(this).attr('data-value');
// continuo dello script
event.preventDefault();
});

era di gran lunga più semplice