button

[pigi82]

Buongiorno,
volevo sapere se è fattibile fare questa cosa.

Ho un form, e volevo fare due bottoni di tipo button (non submit), che alla pressione del tasto evochi un javascript che controlli dei campi e che in caso siano giusti inviano il form e in caso negativo mandi un alert di errore.

ho due button

<form name="invio" action="invio.php" method="POST">
INSERISCI</button>

ANNULLA</button>

Mentre il codice javascript è
function submitForm(action){
var giusto=true;

if (document.invio.campo.value=="")
giusto=false;

if (giusto)
document.invio.submit();
else
alert("inserisci i campi correttamente");
}

}

[cavicchiandrea]

<script>
function submitForm(azione){
if (azione == 'Annulla' || document.invio.campo.value==""){
alert("inserisci i campi correttamente");
document.invio.campo.value='';
return false;
}else if (azione == 'Inserisci' && document.invio.campo.value!=""){
document.invio.submit();
}
}
</script>

<button style="
width: 110px;
height:700px:
padding: .5em;
color: #76060B;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999999;
box-shadow: 2px 2px 2px #000000;
background-color: #fff;
" onclick="submitForm('Inserisci')">INSERISCI</button>
<button style="
width: 110px;
height:700px:
padding: .5em;
color: #76060B;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999999;
box-shadow: 2px 2px 2px #000000;
background-color: #fff;
" onclick="submitForm('Annulla')>ANNULLA</button>

[pigi82]

Grazie mille.
Se lo metto prima del form il tutto funziona. Se invece lo metto dopo o dentro il form, mi fa il refresh della pagina e mi perde i dati inseriti. Come si può ovviare a questo problema?Se possibile.

<button onclick="submitForm('Inserisci');" class="bottone">INSERISCI</button>

<button onclick="submitForm('Annulla');" class="bottone">ANNULLA</button>

la classe bottone è nel foglio di stile che ho inserito, e che ha lo stesso codice inserito nel mio primo post.

function submitForm(azione){
var giusto=true;
if(document.invio.cf.value==""){
giusto=false;
}

if (giusto==false && azione=='Inserisci'){
alert("inserisci i campi correttamente");
return false;
}else if (azione == 'Inserisci' && giusto==true){
document.invio.submit();
}

[cavicchiandrea]

A) Traduci questa frase:
Se lo metto prima del form il tutto funziona. Se invece lo metto dopo o dentro il form, mi fa il refresh della pagina e mi perde i dati inseriti. o metti un link alla pagina demo pubblica
B) Ma perché non usi il codice che t'ho scritto?

[pigi82]

1) Significa che se io inserisco il codice del "button" prima del form e premo sul bottone, allora mi inserisce correttamente gli errori se non è stato inserito il campo, e non aggiorna la pagina. Se il codice del "button" viene dopo il codice del form allora, mi dice gli errori ma mi aggiorna la pagina.

In pratica il codice che non funziona sarebbe

<form name="invio" method="POST">
<button class="bottone">INSERISCI</button>

<button class="bottone">ANNULLA</button>



Codice Fiscale <input type="text" name="cf" size="20" maxlength="16" onkeyup="this.value = this.value.toUpperCase( );"></p>

....//altri campi

</form>

Mentre funziona se lo metto cosi

<button class="bottone">INSERISCI</button>

<button class="bottone">ANNULLA</button>
<form name="invio" method="POST">



Codice Fiscale <input type="text" name="cf" size="20" maxlength="16" onkeyup="this.value = this.value.toUpperCase( );"></p>

....//altri campi

</form>

2) ho usato il tuo codice per capire il meccanismo,e tutto funziona (ad eccezione di quello che ho scritto nel punto 1). Il motivo è che voglio fare che per ogni campo mi aggiorni una stringa su quale sarà il campo vuoto e avvisi con un solo alert.

[cavicchiandrea]

Secondo me hai troppa confusione, studiati le regole del javascript qui