Codice da eseguire al cambiamento dell'options

07-02-2016, 14.34.37

Salve a Tutti,
Vorrei chiedere una informazione...
Sul mio sito ho creato una pagina nella quale è presente una "echo" in php di tutta una tabella del mio database (ottenuto tramite ciclo while sul mysql_fetch_array di mysql_query).

In aggiunta alla tabella del db però ho avuto la necessità di inserire un campo di Select con varie option.
Quello che vorrei ottenere è:
- al cambiamento di un select in automatico viene avviato un php che mi modifica un campo del db (solo il campo corrispondente alla voce alla quale appartiene il campo select)...

Come posso fare?

Specifico che il ogni campo select ha un nome divero

Confido nel vostro aiuto :)

07-02-2016, 15.19.33

Dovresti usare ajax, se già hai confidenza con jquery è molto semplice, dacci un occhio, nel caso ti scrivo il codice.
http://api.jquery.com/jquery.ajax/

07-02-2016, 15.35.02

Originalmente inviato da competenzepertutti

Dovresti usare ajax, se già hai confidenza con jquery è molto semplice, dacci un occhio, nel caso ti scrivo il codice.
http://api.jquery.com/jquery.ajax/

a dire il vero jquery non lo ho mai usato

07-02-2016, 19.55.12

Jquery è una libreria di javascript che ti semplifica assai la vita se usi questo linguaggio, perciò ti consiglio di impararlo :P
Dovrai prima importarlo nel file:
Se non vuoi scaricarlo

Codice:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Se invece lo scarichi e lo carichi nel tuo server

Codice:

<script src="directoryJQuery/jquery-1.10.2.js"></script>

Quindi ora puoi fare qualcosa del genere:

Crei un file php e lo chiami come vuoi (file.php)
file.php:

Codice PHP:


<?php
if(isset($_POST['opzione'])){  //controllo che sia settata la variabile che mando con ajax
$valoreOpzione = $_POST['opzione']; //assume il valore che mando con ajax (quello dell'option selezionato) 
//eseguo i comandi per modificare il database
}

Nel tuo file principale scrivi questo:

Codice HTML:

<select id="select">
<option value="1">Opzione 1</option>
<option value="2">Opzione 2</option>
</select>

<script>

$("#select").change(function(){
  var valore = $(this option:selected).text(); //valore avrà il valore del "value" dell'opzione
  $.ajax({
	type: "POST",
	url: "file.php", //file dove eseguire codice php (quello creato prima)
	data: "opzione="+valore, //opzione è il valore che controllo nel file php
	dataType: "html",
	success: function(data) {
	  alert("campo del database modificato!");
	}
  });
})
</script>

07-02-2016, 22.11.55

Originalmente inviato da competenzepertutti

Jquery è una libreria di javascript che ti semplifica assai la vita se usi questo linguaggio, perciò ti consiglio di impararlo :P
Dovrai prima importarlo nel file:
Se non vuoi scaricarlo

Codice:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Se invece lo scarichi e lo carichi nel tuo server

Codice:

<script src="directoryJQuery/jquery-1.10.2.js"></script>

Quindi ora puoi fare qualcosa del genere:

Crei un file php e lo chiami come vuoi (file.php)
file.php:

Codice PHP:


<?php

if(isset($_POST['opzione'])){  //controllo che sia settata la variabile che mando con ajax

$valoreOpzione = $_POST['opzione']; //assume il valore che mando con ajax (quello dell'option selezionato) 

//eseguo i comandi per modificare il database

}

Nel tuo file principale scrivi questo:

Codice HTML:

<select id="select">
<option value="1">Opzione 1</option>
<option value="2">Opzione 2</option>
</select>

<script>

$("#select").change(function(){
  var valore = $(this option:selected).text(); //valore avrà il valore del "value" dell'opzione
  $.ajax({
	type: "POST",
	url: "file.php", //file dove eseguire codice php (quello creato prima)
	data: "opzione="+valore, //opzione è il valore che controllo nel file php
	dataType: "html",
	success: function(data) {
	  alert("campo del database modificato!");
	}
  });
})
</script>

Ho provato a fare così:
File index.php:

Codice PHP:


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Documento senza titolo</title>

</head>



<body>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>



<select name="opzione" id="select">

<option value="1">Opzione 1</option>

<option value="2">Opzione 2</option>

</select>



<script>



$("#select").change(function(){

  var valore = $(this option:selected).text(); //valore avrà il valore del "value" dell'opzione

  $.ajax({

    type: "POST",

    url: "file.php", //file dove eseguire codice php (quello creato prima)

    data: "opzione="+valore, //opzione è il valore che controllo nel file php

    dataType: "html",

    success: function(data) {

      alert("campo del database modificato!");

    }

  });

})

</script>

</body>

</html>

File file.php:

Codice PHP:


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Documento senza titolo</title>

</head>



<body>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>



<?php

if(isset($_POST['opzione'])){  //controllo che sia settata la variabile che mando con ajax

$valoreOpzione = $_POST['opzione']; //assume il valore che mando con ajax (quello dell'option selezionato) 



echo $valoreOpzione;//eseguo i comandi per modificare il database

}

?>

</body>

</html>

Però quando provo a selezionare una nuova voce del campo select cella index non succede nulla

07-02-2016, 22.26.21

Ok ho fatto una prova, questo è quanto:

1) Nel file "file.php" scrivi solo codice php, servirà per fare le chiamate ajax
2) Ho sbagliato a scrivere

Codice:

 $(this option:selected)

deve invece essere

Codice:

 $("#select option:selected")

3) Se vuoi ricavare la value dell'option usa questo codice:

Codice:

var valore = $("#select option:selected").val();

Se invece vuoi ricavarne il testo scritto tra <option> e </option> usi questo

Codice:

var valore = $("#select option:selected").text();

Detto questo il risultato corretto sarebbe questo:

Index.php

Codice HTML:

<head> 
<meta charset="UTF-8"> 
<title>Documento senza titolo</title> 
</head> 

<body> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<select name="opzione" id="select"> 
<option value="1">Opzione 1</option> 
<option value="2">Opzione 2</option> 
</select> 

<script> 

$("#select").change(function(){ 
  var valore = $(this option:selected).text(); //valore avrà il valore del "value" dell'opzione 
  $.ajax({ 
    type: "POST", 
    url: "file.php", //file dove eseguire codice php (quello creato prima) 
    data: "opzione="+valore, //opzione è il valore che controllo nel file php 
    dataType: "html", 
    success: function(data) { 
      alert(data); 
    } 
  }); 
}) 
</script> 
</body> 
</html>

File.php

Codice PHP:


<?php 
if(isset($_POST['opzione'])){  //controllo che sia settata la variabile che mando con ajax 
$valoreOpzione = $_POST['opzione']; //assume il valore che mando con ajax (quello dell'option selezionato)  

echo $valoreOpzione;//eseguo i comandi per modificare il database 
}

Andando dunque a cambiare opzione del select vedrai un alert con il valore dell'option selezionata.
Se nel file.php invece di fare un echo fai modifiche al database, l'alert sarà vuoto perché non hai output, ma il database verrà modificato.

Codice:

success: function(data) { 
      alert(data); 
    }

il "data" che vedi qui, corrisponde all'output che emetti nel file file.php, e può essere qualsiasi cosa, verrà processato come html.

07-02-2016, 23.11.30

Originalmente inviato da competenzepertutti

Ok ho fatto una prova, questo è quanto:

1) Nel file "file.php" scrivi solo codice php, servirà per fare le chiamate ajax
2) Ho sbagliato a scrivere

Codice:

 $(this option:selected)

deve invece essere

Codice:

 $("#select option:selected")

3) Se vuoi ricavare la value dell'option usa questo codice:

Codice:

var valore = $("#select option:selected").val();

Se invece vuoi ricavarne il testo scritto tra <option> e </option> usi questo

Codice:

var valore = $("#select option:selected").text();

Detto questo il risultato corretto sarebbe questo:

Index.php

Codice HTML:

<head> 
<meta charset="UTF-8"> 
<title>Documento senza titolo</title> 
</head> 

<body> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<select name="opzione" id="select"> 
<option value="1">Opzione 1</option> 
<option value="2">Opzione 2</option> 
</select> 

<script> 

$("#select").change(function(){ 
  var valore = $(this option:selected).text(); //valore avrà il valore del "value" dell'opzione 
  $.ajax({ 
    type: "POST", 
    url: "file.php", //file dove eseguire codice php (quello creato prima) 
    data: "opzione="+valore, //opzione è il valore che controllo nel file php 
    dataType: "html", 
    success: function(data) { 
      alert(data); 
    } 
  }); 
}) 
</script> 
</body> 
</html>

File.php

Codice PHP:


<?php 
if(isset($_POST['opzione'])){  //controllo che sia settata la variabile che mando con ajax 
$valoreOpzione = $_POST['opzione']; //assume il valore che mando con ajax (quello dell'option selezionato)  

echo $valoreOpzione;//eseguo i comandi per modificare il database 
}

Andando dunque a cambiare opzione del select vedrai un alert con il valore dell'option selezionata.
Se nel file.php invece di fare un echo fai modifiche al database, l'alert sarà vuoto perché non hai output, ma il database verrà modificato.

Codice:

success: function(data) { 
      alert(data); 
    }

il "data" che vedi qui, corrisponde all'output che emetti nel file file.php, e può essere qualsiasi cosa, verrà processato come html.

hai sbagliaito di nuovo a scrivere xD

Comunque adesso funziona a meraviglia :D
Grazie infinite

07-02-2016, 23.19.22

Ahahah si hai ragione, è che ho copiato e incollato la tua citazione :P

07-02-2016, 23.27.42

Mi sorge un'altro problema adesso...
I miei campi select hanno il nome "opzione<?php echo $i ?>", dove $i è un numero che aumenta sempre di 1 (è il risultato di un mysql_fetch_array...come posso fare a trasferire la variabile $i nella pagina "file.php"?

08-02-2016, 01.04.30

Prova con
var valore = $("#select option:selected").attr("name");

Ps impara jquery, ti tornerà super utile ;)

08-02-2016, 12.03.19

Originalmente inviato da competenzepertutti

Prova con
var valore = $("#select option:selected").attr("name");

Ps impara jquery, ti tornerà super utile ;)

facendo così però sulla pagina "file.php" che valore devo inserire nella riga if(isset($_GET['opzione']))...?

08-02-2016, 12.47.45

Rimane sempre uguale, solo che a "valore" assegni un differente valore, quindi $valoreOpzione = $_POST['opzione']; assumerà il nome dell'opzione.

08-02-2016, 12.52.14

Originalmente inviato da competenzepertutti

Rimane sempre uguale, solo che a "valore" assegni un differente valore, quindi $valoreOpzione = $_POST['opzione']; assumerà il nome dell'opzione.

ho provato ma nell'alert non appare nessun messaggio...(ovviamente ho commentato le query in php e ripristinato l'echo $valoreOpzione

08-02-2016, 15.54.35

index.php

Codice HTML:

<head> 
<meta charset="UTF-8"> 
<title>Documento senza titolo</title> 
</head> 

<body> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<select name="opzione" id="select"> 
<option name="primo">Opzione 1</option> 
<option name="secondo">Opzione 2</option> 
</select> 

<script> 

$("#select").change(function(){ 
  var valore = $("#select option:selected").attr("name"); 
  $.ajax({ 
    type: "POST", 
    url: "file.php",
    data: "opzione="+valore, 
    dataType: "html", 
    success: function(data) { 
      alert(data); 
    } 
  }); 
}) 
</script> 
</body> 
</html>

file.php

Codice PHP:


<?php 
if(isset($_POST['opzione'])){ 
$valoreOpzione = $_POST['opzione']; 

echo $valoreOpzione;
}

Con questo codice non ti da il valore "name" dell'option? strano...
Se selezioni la prima opzione dovrebbe farti un alert con scritto prima, se fa il secondo un alter con secondo.

08-02-2016, 16.13.44

ok qui funziona il mio problema però era un altro...ovvero

il mio select ha nome: opzione<?php echo $i ?>
dove $i è un numero sempre crescente
in quanto il select è ripetuto per n volte.

di conseguenza come faccio a dire alla pagina file.php il corretto nome del select per poterlo inserire in una variabile?

08-02-2016, 18.00.46

Ah ok, allora ti conviene fare una funzione:

index.php

Codice HTML:

<head> 
<meta charset="UTF-8"> 
<title>Documento senza titolo</title> 
</head> 

<body> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<select name="select1" onchange="funzione('select1');" id="select1"> 
<option name="primo">Opzione 1</option> 
<option name="secondo">Opzione 2</option> 
</select> 

<select name="select2" onchange="funzione('select2');" id="select2"> 
<option name="terzo">Opzione 1</option> 
<option name="quarto">Opzione 2</option> 
</select> 
<script> 

function funzione(elemento){
  var valore = $("#"+elemento+" option:selected").attr("name"); 
  $.ajax({ 
    type: "POST", 
    url: "file.php",
    data: "select="+elemento+"&opzione="+valore, 
    dataType: "html", 
    success: function(data) { 
      alert(data); 
    } 
  }); 
}
</script> 
</body> 
</html>

file.php

Codice PHP:


 <?php 
if(isset($_POST['opzione'], $_POST['select'])){ 
$select = $_POST['select'];
$valoreOpzione = $_POST['opzione']; 

echo "opzione = $valoreOpzione presa dal select $select";

}

08-02-2016, 18.32.14

perfetto :)
scusa se ti disturbo ancora...un'altra cosetta...
io sulla pagina "file.php" ho adesso la variabile $select composta da: select26 (per esempio)...se io volessi creare una seconda variabile ($id) con solo il numero 26 come posso "estrapolarlo"?

08-02-2016, 19.03.48

Il primo modo che mi viene in mente è il seguente:

Codice PHP:


$id = str_replace('select', '', $_POST['select']);

08-02-2016, 19.05.30

Grazie infinite

Discussione: Codice da eseguire al cambiamento dell'options

LinkBack

Strumenti discussione

Display

Codice da eseguire al cambiamento dell'options

Regole di scrittura