Ciao a tutti
ho una conoscenza basica di javascript cosi' avrei bisogno di qualche consiglio e aiuto per eseguire correttamente
e su piu'tipi di browser un orderform.
Il form è composto da una serie di <Fieldset> che contengono diverse checkbox e un paio di input di testo.
Siccome spediro' via mail il form e i riceventi me lo inoltreranno in risposta per un controllo e conferma,
ci sono alcune condizioni che limitano la programmazione.
1-Il form deve potere essere eseguito offline, dal lato client, cosi' gli script devono essere contenuti nella singola pagina html.
2-deve potere essere compilato anche parzialmente e salvato in locale per potere, in seguito, essere ricaricato con le scelte salvate ed essere ultimato
3- deve potere consentire di spuntare, da una singola checkbox a tutte le checkbox e campi di testo.
Qui sotto il codice del form e un <javascript> che ho trovato su un un famoso blog,e che sul mio Firefox permette di salvare in locale e ricaricare il form con la scelta.
purtroppo la stringa -document.getElementById("")- permette di avere uno solo elemento ID,
(ho provato a sostituire-getElementById- con -getElementByName- ma lo script non viene piu' eseguito).
dovrei quindi inserire il codice'per avere getElementBy??("") per input multipli.
dovrei anche inserire il codice per la condizione delle checkbox, se spuntate o no, e aggiungere il codice per salvare la condizione delle checkbox insieme ai campi di testo.
vorrei anche controllare se funziona sui diversi browser.
chiedo troppo...anche se è Natale ?
ringrazio in anticipo
e Buon Anno a tutti
Andrea
Il form:
<body>
<form name="modulo" id="salvamodulo" method="post" action="">
<fieldset>
<legend><strong>TRIBAL ARMBANDS</strong> [_ tavole A3 in b/n] XXeuro per singola tavola // set completo XXeuro</legend>
<input type="checkbox" name="TriArm1" value="TriArm1"/> TriArm1
<input type="checkbox" name="TriArm2" value="TriArm2"/> TriArm2
<input type="checkbox" name="TriArm3" value="TriArm3"/> TriArm3
<input type="checkbox" name="TriArm4" value="TriArm4"/> TriArm4
<input type="checkbox" name="TriArm5" value="TriArm5"/> TriArm5
<input type="checkbox" name="TriArm6" value="TriArm6"/> TriArm6 //totale
<input type="text" textarea id="totalCostTriArm" name="totalcostTriarm" value="euro" size="3" maxlength="3"/> euro
</fieldset><br/>
<fieldset>
<legend><strong>TRIBAL VISIONS</strong> [_ tavole A3 in b/n] XXeuro per singola tavola // set completo XXeuro</legend>
<input type="checkbox" name="TriVis1" value="TriVis1"/> TriVis1
<input type="checkbox" name="TriVis2" value="TriVis2"/> TriVis2
<input type="checkbox" name="TriVis3" value="TriVis3"/> TriVis3
<input type="checkbox" name="TriVis4" value="TriVis4"/> TriVis4
<input type="checkbox" name="TriVis5" value="TriVis5"/> TriVis5
<input type="checkbox" name="TriVis6" value="TriVis6"/> TriVis6 //totale
<input type="text" textarea id="totalCostTriVis" name="totalCostTriVis" value="euro" size="3" maxlength="3" /> euro
</fieldset>
<fieldset>
<legend><strong>offerta speciale:<br> TRIBAL ARMBANDS + TRIBAL VISIONS </strong>//totale XXeuro <input type="checkbox" name="tribarm+vis" value""/>
TRIBAL ARMBANDS + TRIBAL VISIONS</legend>
</fieldset>
================================================== ================================================== ==================================
<fieldset>
<legend><strong>LACES CHAINS & JEWELS</strong> [_ tavole A3 in b/n] XXeuro per singola tavola // set completo XXeuro</legend>
<input type="checkbox" name="LC&J1" value="LC&J1"/> LC&J1
<input type="checkbox" name="LC&J2" value="LC&J2"/> LC&J2
<input type="checkbox" name="LC&J3" value="LC&J3"/> LC&J3
<input type="checkbox" name="LC&J4" value="LC&J4"/> LC&J4
<input type="checkbox" name="LC&J5" value="LC&J5"/> LC&J5
<input type="checkbox" name="LC&J6" value="LC&J6"/> LC&J6 //totale
<input type="text" name="totalcostLCJ" value="euro" size="3" maxlength="3" /> euro
</fieldset>
================================================== ================================================== ==================================
<input type="button" name="reset_form" value="cancella" onclick="this.form.reset();">
<input type="button" id="inputsalvacomefile" onclick="saveTextAsFile()" value="save order">
<tr>
<td>
<p>Select a File to Load:</td>
<td><input type="file" id="fileToLoad" name="fileToLoad">
<input type="button" onclick="loadFileAsText()" value="Load file"></td></p>
</tr>
</form>
</div>
</body>
Il codice:
<script type="text/javascript">
<!-- This script thanks to thiscouldbebetter.wordpress --This script saves as text and load -->
function saveTextAsFile()
{
var textToSave = document.getElementById("totalCostTriArm").value;
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputsalvacomefile").valu e;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("totalCostTriArm").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
</script>
Rispondi quotando