popolare campi senza ricaricare la pagina

[nexus]

ciao a tutti,
sto cercando di realizzare una cosa che,teoricametne pensavo fosse semplicissima...ma non ci riesco...ma dipende sicuramente dal fatto che ho iniziato a leggere(studiare è una parola grossa) javascript da pochi giorni.

vi espongo il mio problema,nella speranza che abbiate la pazienza di aiutarmi.

in un semplice testo html ho tre input text.

una con scritto punti esperienza,
una con scritto malus %
la terza con scritto risultante.


quello che vorrei creare è:
metto un valore sulla cella "punti esperienza"
metto un valore di % sulla cella "malus %"
in automatico dovrebbe calcolarmi la percentuale della prima cella senza dover ricaricare la pagina.

stavo provando a creare la funzione, basandomi sui vari corsi che ci sono in internet.....
ma il risultato ..bhe lasciamo perdere

function percentuale(px,malus){
             var px;
	var malus;
	npx=(malus/100)*prezzo;
return "npx";
}

tipo:
se volessi prendere il valore scritto sun un imput html tipo

<input name="punti" type="text" size="28" value="<?php echo $main[9]; ?>"onblur="funzione()">
<input name="malus" type="text" size="28" value="<?php echo $main[10]; ?>"onblur="funzione()">
<input name="npx" type="text" size="28" value="<?php echo $main[11]; ?>"

cosa ci dovrei scrivere?
e come faccio a pasasre due valori da due input diversi alla stessa funzione? devo crearne due e poi unirle? tenedo presente che nel campo value poi ho inserito una riga in php per far si che mi elabori i dati nel piccolo bd privato che mi son creato..

sperando in qualche consiglio su come fare(o dove trovare qualche info in piu..ho gia letto i manuali su html.it) vi ringrazio anticipatamente

[emanueledg]

Hai scritto male la funzione percentuale(): se vuoi che le vengano passati i 2 argomenti px e malus e che restituisca npx devi fare così:

function percentuale(px,malus) {
	var prezzo = 5; // non hai definito la variabile prezzo; siccome la usi nell'espressione seguente le devi assegnare un valore;
	var npx = (malus / 100) * prezzo;
	return npx;
}

Inoltre non definisci le variabili rispetto al documento: sono i valori dei text input?
Se hai un codice tipo

<form name="pippo" action="topolinia.php" method="get">
<input type="text" name="topolino" id="topo">
<input type="submit" value="vai">
</form>

puoi accedere al valore di un text input tramite il DOM in più modi:

document.getElementById('topo').value; // dall'ID dell'oggetto;
document.getElementsByName('topolino').value; // dal nome dell'oggetto;

oppure puoi partire dal form.
Una sintassi non proprio conforme allo standard del W3C è quella che considera gli elementi di un form come proprietà del form stesso:

document.pippo.topolino.value;
// cioè in generale:
document.nomeForm.nomeCampo.value;

P.S.:
Lo spazio è necessario dopo il codice php è necessario:

<input name="punti" type="text" size="28" value="<?php echo $main[9]; ?> "onblur="funzione()">

[nexus]

grazie mille

il motivo che la funzione era sbagliata è che non l'ho trascritta bene...



è giusto cosi?perche dovrei recuperare i due valori da due imput diversi
e poi avere un output nel terzo textbox, anche se poco fa ho letto un thread dove due dicevano che javascript non puo' immettere testo in un textbox.

function percentuale(px,malus) {
	var malus = document.getElementsByName('malus').value; //input text malus ;
             var px= document.getElementsByName('px').value; // input text px
	var npx = (malus / 100) * px;
	return npx;
}

il mio form è tipo:

<form name="pippo" action="topolinia.php" method="get">
<input type="text" name="px" id="topo">
<input type="text" name="malus" id="topo">
<input type="text" name="npx" id="topo">
<input type="submit" value="vai">
</form>

ma il form potrebbe anche non esistere....cioè vorei far si che in automatico apparisse il valore calcolato in base all'input px e all'input malus non appena tolgo il focus da malus.
e il valore npx mi compare a questo punto sull'input npx...e solo ora premo il tasto invia.

è possibile farlo?
grazie

[nexus]

up :quote:
please

[emanueledg]

Originariamente inviato da nexus
grazie mille

il motivo che la funzione era sbagliata è che non l'ho trascritta bene...



è giusto cosi?perche dovrei recuperare i due valori da due imput diversi
e poi avere un output nel terzo textbox, anche se poco fa ho letto un thread dove due dicevano che javascript non puo' immettere testo in un textbox.
...

Wrong: Javascript può accedere a tutti gli elementi del DOM del documento.
Ecco la tua soluzione:

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function percentuale() {
	var malus = parseFloat(document.getElementById('malus').value);
	var px = parseFloat(document.getElementById('px').value);
	var npx = (malus / 100) * px;
	if (isNaN(malus) || isNaN(px)) { alert('I campi non contengono valori numerici.'); }
	else { document.getElementById('npx').value = npx; }
}
//-->
</script>
</head>
<body>
<form name="mioModulo" action="mettiQuiLaPaginaDoveInviareIDatiDelForm" method="get">
px: <input type="text" id="px">

malus: <input type="text" id="malus" onblur="percentuale();">

npx: <input type="text" id="npx">

<input type="submit" value="Invia">
</form>
</body>
</html>

Non puoi creare 3 elementi con lo stesso ID: l'ID è l'identità di un elemento all'interno di un documento e pertanto ha un valore unico.

[nexus]

Grazie mille

anche se a leggerlo non ho capito perche hai scritto

if (isNaN(malus) || isNaN(px)) { alert('I campi non contengono valori numerici.'); }
	else { document.getElementById('npx').value = npx; }

ad occhio isNaN penso sia un controllo per verificare se il valore recuperato è un numero o no, e quindi poni una condizione nella quale uno dei due campi (malus o px) non siano numeri fa aprire un popup con la scritta " i campi ....."

altrimenti(e qui non capisco) recupera il valore di npx?
io a dire il vero volevo far si che il risultato appariesse nel box npx.

comuqneu adesso provo a vedere
grazie intanto

[nexus]

funziona tutto perfettamente

ma non ho capito allora il funzionamento di document.getelementbyid.value
oltre a recuperare il valore da un campo text lo immette (id corretti permettendo)?

ne approfitto, come faccio per avere due decimali dopo la virgola?

[emanueledg]

Originariamente inviato da nexus
...
comuqneu adesso provo a vedere
grazie intanto

Bravo, mi sembra giusto prima provare.

NaN è una costante di JavaScript che significa "Not-A-Number", ovvero che un valore non è di tipo numerico (sia esso integer, cioè un numero intero, o float, un numero decimale).

La funzione isNaN() verifica che il valore passatole come argomento sia un numero, intero o decimale, e restituisce un valore booleano, TRUE se è numerico, FALSE se non lo è. Dal momento che il tuo form contiene campi di testo in cui si possono inserire anche caratteri diversi dai numeri mi è sembrato il minimo effettuare un pur blando controllo sull'entità dei valori inseriti al fine di evitare funzionamenti indesiderati all'utente.
Se l'utente inserisce una lettera al posto di un numero, riceverà un alert al momento dell'invio del form che lo informa dell'errore e gli permette di rettificare il campo. (In realtà se inserisce prima un numero e poi una lettera la funzione parseFloat() legge solo il numero, quindi non è un vero e proprio controllo sul campo; per quello ci vuole una RegExp).

L'alert non è un pop-up, ovvero una nuova finestra del browser contenente un nuovo documento, ma è un'informazione del browser stesso ad un livello superiore a quello del documento che impedisce di continuare ad operare sul documento (e talvolta blocca l'esecuzione degli script) finché l'utente non dà l'ok al messaggio mostrato.

Originariamente inviato da nexus
...
altrimenti(e qui non capisco) recupera il valore di npx?

npx non è una variabile che esiste inizialmente nel tuo form, è una variabile che crei tu nello script, alla quale associ il valore di un elemento del tuo form.
Se tu non crei quella variabile, JavaScript non ne sa niente di npx.
JavaScript conosce a priori solo le costanti e le funzioni predefinite, in più accede agli oggetti del documento, quindi lui "vede" il valore del campo di testo con id "npx", ma per lui è solo document.getElementById('npx').value

Sei tu poi che per comomdità associ quel valore alla variabile anche per una questione di comodità (e di spazio di memoria), perché è più breve scrivere npx che non document.getElementById('npx').value (N.B.: è un'assegnazione per valore, non per riferimento, ovvero se modifichi npx non modifichi document.getElementById('npx').value, ovvero il contenuto del text input).

document.getElementById(ID) restituisce l'oggetto il cui ID è passato come argomento del metodo getElementById()
Prova a lanciare alert(document.getElementById('npx')) e vedi cosa ti restituisce nell'alert box.
Poi prova a lanciare alert(document.getElementById('npx').value)) oppure alert(document.getElementById('npx').value.length) )

Il metodo di debug attraverso i controlli di flusso che con PHP fai attraverso un echo "msg" o print("msg") con Javascript lo puoi assimilare ad alert() mettendolo nel punto del documento in cui vuoi verificare se la compilazione arriva (o se è stata bloccata prima dal parser del browser) o per verificare il valore effettivo di una variabile che lo script riceve.

[emanueledg]

La funzione parseFloat() parsa un valore per leggerlo (typecasting) come numero decimale, quindi se inserisci nei tuoi campi qualcosa come 0.01 o 20131.19901 l'interprete JavaScript lo legge come numero decimale.

parseInt() fa lo stesso ma elimina i decimali dopo la virgola.

Originariamente inviato da nexus
...
ne approfitto, come faccio per avere due decimali dopo la virgola?

Se vuoi un formato specifico del valore di quel campo devi controllarlo con una espressione regolare.

[nexus]

Grazie mille,
gentilissimo