Controllo Javascript + Ajax

**elbaforum** · 05-10-2008, 14:33

Ciao a tutti,

ho la necessità di effettuare un controllo js su un modulo che vorrei inviare con XHR ma non riesco ad inserire i controlli sui campi questa è una prova .
Nel modulo che attualmente utilizzo, eseguivo nel onsubmit il controllo dei campi ma in questo modo non mi parte il modulo.

Spero possiate darmi una mano.

questo è il codice:

Codice PHP:


<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Nuova pagina 1</title>

<script type="text/javascript">

function xmlhttpPost(strURL,formname,responsediv,responsemsg) 

{

    var xmlHttpReq = false;

    var self = this;

    if (window.XMLHttpRequest) {

        self.xmlHttpReq = new XMLHttpRequest();

    }

    else if (window.ActiveXObject) {

        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

    }

    self.xmlHttpReq.open('POST', strURL, true);

    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    self.xmlHttpReq.onreadystatechange = function() {

        if (self.xmlHttpReq.readyState == 4) {

            updatepage(self.xmlHttpReq.responseText,responsediv);

        }

        else{

            updatepage(responsemsg,responsediv);

        }

    }

    self.xmlHttpReq.send(getquerystring(formname));

}

function getquerystring(formname) {

    var form = document.forms[formname];

    var qstr = "";

    function GetElemValue(name, value) {

        qstr += (qstr.length > 0 ? "&" : "")

            + escape(name).replace(/\+/g, "%2B") + "="

            + escape(value ? value : "").replace(/\+/g, "%2B");

    }

    var elemArray = form.elements;

    for (var i = 0; i < elemArray.length; i++) {

        var element = elemArray[i];

        var elemType = element.type.toUpperCase();

        var elemName = element.name;

        if (elemName) {

            if (elemType == "TEXT"

                    || elemType == "TEXTAREA"

                    || elemType == "PASSWORD"

                    || elemType == "BUTTON"

                    || elemType == "RESET"

                    || elemType == "SUBMIT"

                    || elemType == "FILE"

                    || elemType == "IMAGE"

                    || elemType == "HIDDEN")

                GetElemValue(elemName, element.value);

            else if (elemType == "CHECKBOX" && element.checked)

                GetElemValue(elemName, 

                    element.value ? element.value : "On");

            else if (elemType == "RADIO" && element.checked)

                GetElemValue(elemName, element.value);

            else if (elemType.indexOf("SELECT") != -1)

                for (var j = 0; j < element.options.length; j++) {

                    var option = element.options[j];

                    if (option.selected)

                        GetElemValue(elemName,

                            option.value ? option.value : option.text);

                }

        }

    }

    return qstr;

}

function updatepage(str,responsediv){

    document.getElementById(responsediv).innerHTML = str;

}

function checkRequiredFields(input)

{

    var requiredFields = new Array("sname", "cognome", "email");

    var fieldNames = new Array("Nome", "Cognome", "Email");

    var fieldCheck   = true;

    var fieldsNeeded = "Attenzione riempire il/i campo/i richiesto/i:\n\n\t";

    for(var fieldNum=0; fieldNum < requiredFields.length; fieldNum++) {

        if ((input.elements[requiredFields[fieldNum]].value == "") ||

            (input.elements[requiredFields[fieldNum]].value == " ")) {

            fieldsNeeded += fieldNames[fieldNum] + "\n\t";

            fieldCheck = false;

        }

    }

    if (fieldCheck == true)

    {

    if(!document.MyForm.consenso.checked)

    {

    alert('Per inoltrare la richiesta è necessario dare il consenso per il trattamento dei dati')

    return false;

    }

    else

    {

    return true;

    }

    }

    else

    {

    alert(fieldsNeeded);

    return false;

    }

}

</script>

</head>



<body>



<form name="MyForm" action="response_normal.asp" method="post" onsubmit="xmlhttpPost('contattainajax.asp?func=2&amp;funcb=send', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">

<table border="0" style="border-collapse: collapse; font-size:8pt; font-family:Tahoma; color:#0066CC" width="100%" id="table1">

<tr><td width="33%" colspan="3">



Richiesta per:


<select class="elba-form" size="1" name="richiesta">

<option value="Preventivo soggiorno">Preventivo soggiorno</option>

<option value="Conoscere disponibilita">Conoscere disponibilita</option>

<option value="Prenotare">Prenotare</option>

</select></p></td><td width="66%" colspan="2">

[b]<font size="1">Attenzione i campi in <font color="#FF0000">ROSSO</font> sono obbligatori</font>[/b]</td>

    </tr>

<tr><td width="33%" colspan="3"><font color="#FF0000">[b]Nome:[/b]</font>


<input class="elba-form" type="text" size="32" name="sname" value=""></td><td width="33%"><font color="#FF0000">[b]Cognome:


    [/b]</font><input class="elba-form" type="text" size="32" name="cognome"></td>

    <td width="33%">[b]<font color="#FF0000">Email:</font>[/b]


    <input class="elba-form" type="text" size="32" name="email" value=""></td></tr>

<tr><td width="11%">[b]<font color="#FF0000">Adulti:


    </font>[/b]<select class="elba-form" size="1" name="adulti">

<option selected></option>

<option>1</option>

<option>2</option>

</select></td>

    <td width="12%">Bamb.:(4-11)


    <select class="elba-form" size="1" name="bambini">

<option selected></option>

<option>1</option>

<option>2</option>

</select> </td>

    <td width="10%">(0-3)


    <select class="elba-form" size="1" name="neonati">

<option selected></option>

<option>1</option>

<option>2</option>

</select></td>

    <td width="33%"><font color="#FF0000">[b]Data di Arrivo[/b]</font>


<select class="elba-form" name="agg">

<option selected></option>

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

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

<option value="3">3</option>

</select> <select class="elba-form" name="amm">

<option selected></option>

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

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

</select> <select class="elba-form" size="1" name="aaa">

<option value="2008" selected>2008</option>

<option value="2009">2009</option></select></td>

<td width="33%">[b]<font color="#FF0000">Data Partenza</font>[/b]


<select class="elba-form" name="pgg">

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

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

</select>

<select class="elba-form" name="pmm">

<option selected></option>

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

</select>

<select class="elba-form" size="1" name="paa">

<option value="2008" selected>2008</option>

<option value="2009">2009</option></select></td></tr>

<tr><td width="33%" colspan="3">Messaggio o richieste particolari:


<input class="elba-form" type="text" name="msg" size="32"></td><td width="66%" colspan="2"><font color="#FF0000">[b]Privacy:[/b]</font>


<INPUT TYPE="checkbox" name="consenso" VALUE="ON" checked>Autorizzo a trattare i dati inviati per le sole finalità sopra espresse.</td></tr>

<tr><td align="center" width="33%" colspan="5"><input class="elba-form" type="submit" value="Invia la richiesta di disponibilità preventivo e o informazioni" name="submit"></td></tr></table></form>

<div id="MyResult"></div>

</body>



</html>

Prima di inviare il form vorrei eseguire la funzione checkRequiredFields ma non trovo la soluzione.

Ciao

**fcaldera** · 05-10-2008, 14:46

tu ha una funzione che controlla i dati del form (chiamiamola controlla_dati())
e un'altra che li invia tramite xmlhttprequest (chiamamola invia_dati_con_ajax())

la prima deve controllare i campi terminando con un return true se tutto è a posto
oppure un return false al primo errore.
La seconda sarà invocata se la prima funzione restituisce true e questa invece dovrà ritornare false alla fine

quindi l'onsubmit diventerà
<form... onsubmit="return (controlla_dati())? invia_dati_con_ajax() : false"

P.s. Nel tuo caso forse la cosa migliore sarebbe usare ajax anche per validare i vari campi, tantopiù che lo stesso controllo lo devi fare comunque anche lato server (o avrai possibili problemi di sicurezza)

**elbaforum** · 05-10-2008, 18:13

Ciao fcaldera,

ho provato come hai scritto, mi il form parte con action e non con ajax,

non capisco il perchè

**fcaldera** · 05-10-2008, 20:05

non so come hai modificato le funzioni riposta il codice e specifica
- con quale browser stai testando
- che messaggio di errore ti riporta la consolle di firefox

P.s. se poi tu riuscissi a postare un codice minimale, ad esempio un solo campo e il javascript minimo per validazione ed invio sarebbe più facile trovare eventuali problemi.

**elbaforum** · 07-10-2008, 19:27

ciao fcaldera,
le sto provando tutte ma non vuole proprio partire,

posto le ultime modifiche, dove ho richiamato l'invio al termine dei controlli dei campi appare l'immagine di caricamento pagina che scompare ma non c'è la risposta.

Codice PHP:


<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Nuova pagina 1</title>

<meta name="GENERATOR" content="Microsoft FrontPage 6.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<script type="text/javascript">



function checkRequiredFields(input)

{

    var requiredFields = new Array("sname", "cognome", "email");

    var fieldNames = new Array("Nome", "Cognome", "Email");

    var fieldCheck   = true;

    var fieldsNeeded = "Attenzione riempire tutti i campi necessari:\n\n\t";

    for(var fieldNum=0; fieldNum < requiredFields.length; fieldNum++) {

        if ((input.elements[requiredFields[fieldNum]].value == "") ||

            (input.elements[requiredFields[fieldNum]].value == " ")) {

            fieldsNeeded += fieldNames[fieldNum] + "\n\t";

            fieldCheck = false;

        }

    }

    if (fieldCheck == true)

    {

    if(!document.MyForm.consenso.checked)

    {

    alert('Per inoltrare la richiesta è necessario dare il consenso per il trattamento dei dati')

    return false;

    }

    else

    {

    document.MyForm.submit.disabled=true;

    document.MyForm.submit.value=' Attendere prego... Elaborazione in corso';

    xmlhttpPost('contattainajax.asp?func=2&amp;funcb=send', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>');

    return false;

    }

    }

    else

    {

    alert(fieldsNeeded);

    return false;

    }

}

function xmlhttpPost(strURL,formname,responsediv,responsemsg) 

{

    var xmlHttpReq = false;

    var self = this;

    if (window.XMLHttpRequest) {

        self.xmlHttpReq = new XMLHttpRequest();

    }

    else if (window.ActiveXObject) {

        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

    }

    self.xmlHttpReq.open('POST', strURL, true);

    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    self.xmlHttpReq.onreadystatechange = function() {

        if (self.xmlHttpReq.readyState == 4) {

            updatepage(self.xmlHttpReq.responseText,responsediv);

        }

        else{

            updatepage(responsemsg,responsediv);

        }

    }

    self.xmlHttpReq.send(getquerystring(formname));

}

function getquerystring(formname) {

    var form = document.forms[formname];

    var qstr = "";

    function GetElemValue(name, value) {

        qstr += (qstr.length > 0 ? "&" : "")

            + escape(name).replace(/\+/g, "%2B") + "="

            + escape(value ? value : "").replace(/\+/g, "%2B");

    }

    var elemArray = form.elements;

    for (var i = 0; i < elemArray.length; i++) {

        var element = elemArray[i];

        var elemType = element.type.toUpperCase();

        var elemName = element.name;

        if (elemName) {

            if (elemType == "TEXT"

                    || elemType == "TEXTAREA"

                    || elemType == "PASSWORD"

                    || elemType == "BUTTON"

                    || elemType == "RESET"

                    || elemType == "SUBMIT"

                    || elemType == "FILE"

                    || elemType == "IMAGE"

                    || elemType == "HIDDEN")

                GetElemValue(elemName, element.value);

            else if (elemType == "CHECKBOX" && element.checked)

                GetElemValue(elemName, 

                    element.value ? element.value : "On");

            else if (elemType == "RADIO" && element.checked)

                GetElemValue(elemName, element.value);

            else if (elemType.indexOf("SELECT") != -1)

                for (var j = 0; j < element.options.length; j++) {

                    var option = element.options[j];

                    if (option.selected)

                        GetElemValue(elemName,

                            option.value ? option.value : option.text);

                }

        }

    }

    return qstr;

}

function updatepage(str,responsediv){

    document.getElementById(responsediv).innerHTML = str;

}

</script>

</head>



<body>

<form name="MyForm" action="response_normal.asp" method="post" onsubmit="return checkRequiredFields(this)">

<table border="0" style="border-collapse: collapse; font-size:8pt; font-family:Tahoma; color:#0066CC" width="100%" id="table1">

<tr><td width="33%" colspan="3">



Richiesta per:


<select size="1" name="richiesta">

<option value="Preventivo soggiorno">Preventivo soggiorno</option>

<option value="Conoscere disponibilita">Conoscere disponibilita</option>

<option value="Prenotare">Prenotare</option>

</select></p></td><td width="66%" colspan="2">

[b]<font size="1">Attenzione i campi in <font color="#FF0000">ROSSO</font> sono obbligatori</font>[/b]</td>

    </tr>

<tr><td width="33%" colspan="3"><font color="#FF0000">[b]Nome:[/b]</font>


<input type="text" size="32" name="sname" value=""></td><td width="33%"><font color="#FF0000">[b]Cognome:


    [/b]</font><input type="text" size="32" name="cognome"></td>

    <td width="33%">[b]<font color="#FF0000">Email:</font>[/b]


    <input type="text" size="32" name="email" value=""></td></tr>

<tr><td width="11%">[b]<font color="#FF0000">Adulti:


    </font>[/b]<select size="1" name="adulti">

<option selected></option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

<option>8</option>

<option>9</option>

<option>10</option>

</select></td>

    <td width="12%">Bamb.:(4-11)


    <select size="1" name="bambini">

<option selected></option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select> </td>

    <td width="10%">(0-3)


    <select size="1" name="neonati">

<option selected></option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select></td>

    <td width="33%"><font color="#FF0000">[b]Data di Arrivo[/b]</font>


<select name="agg">

<option selected></option>

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

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

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

</select> <select name="amm">

<option selected></option>

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

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

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select> <select size="1" name="aaa">

<option value="2008" selected>2008</option>

<option value="2009">2009</option></select></td>

<td width="33%">[b]<font color="#FF0000">Data Partenza</font>[/b]


<select name="pgg">

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

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

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

</select>

<select name="pmm">

<option selected></option>

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

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

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option></select>

<select size="1" name="paa">

<option value="2008" selected>2008</option>

<option value="2009">2009</option></select></td></tr>

<tr><td width="33%" colspan="3">Messaggio o richieste particolari:


<input type="text" name="msg" size="32"></td><td width="66%" colspan="2"><font color="#FF0000">[b]Privacy:[/b]</font>


<INPUT TYPE="checkbox" name="consenso" VALUE="ON" checked>Autorizzo a trattare i dati inviati per le sole finalità sopra espresse.</td></tr>

<tr><td align="center" width="33%" colspan="5"><input type="submit" value="Invia la richiesta di disponibilità preventivo e o informazioni" name="submit"></td></tr></table><div id="MyResult"></div></form>

<div id="MyResult"></div>

</body>



</html>

**stefanomnn** · 07-10-2008, 20:27

scusa ma mi sfugge un concetto:
tu vuoi fare una chiamata ajax e DOPO fare il post del form ? perche ajax serve proprio per evitare di fare post! se vuoi fare questo,

usa un bottone semplice (no type="submit"),
fai i controlli,
chiama ajax,
e NELLA CALLBACK DI AJAX (updatepage direi ) fai la submit del form.

speroo di essermi spiegato, e di aver capito cosa ti serve!

**fcaldera** · 07-10-2008, 20:28

Originariamente inviato da stefanomnn
scusa ma mi sfugge un concetto:
tu vuoi fare una chiamata ajax e DOPO fare il post del form ? perche ajax serve proprio per evitare di fare post! se vuoi fare questo,

no
vuole fare il controllo dei campi
e poi spedire i dati in post con ajax

p.s. Sto provando il primo link che hai fornito
una validazione su tre campi viene eseguita correttamente
e poi parte la chiamata ajax correttamente

**stefanomnn** · 07-10-2008, 20:34

cio che mi fa strano è che ajax si usa per evitare i post completi...
fare entrambe ... boh non l'avevo visto mai fare!

**fcaldera** · 07-10-2008, 20:41

Originariamente inviato da stefanomnn
cio che mi fa strano è che ajax si usa per evitare i post completi...
fare entrambe ... boh non l'avevo visto mai fare!

fare un controllo sui campi prima di fare chiamate sbagliate e/o incomplete ad una risorsa, non è una cattiva idea anche per un motivo di ottimizzazione sul carico di un server (fermo restando che gli stessi controlli li deve comunque fare anche lato server)

**elbaforum** · 07-10-2008, 21:19

Ciao a tutti,

quello che vorrei fare io è fare il controllo dei campi con javascript e poi fare la chiamata con ajax, in ogni caso faccio i controlli anche lato server però siccome avrei intenzione di far sparire il modulo una volta inviato, devo essere sicuro che inseriscano tutti i dati.
Questo form attualmente è inserito nelle pagine del mio sito come iframe che viene ridimensionato automaticamente anche nella risposta (vedi esempio in fondo alla pagina, potete testarlo con email test@test.it), se riesco ad inserire questo modulo tramite ajax elimino il frame che rallenta anche di poco il caricamento della pagina. Inoltre tutti i moduli della pagina sono inseriti sempre con iframe.

Se non faccio i controlli javascript, il modulo funziona correttamente però mi restituisce gli errori lato server, vorrei evitarli per fare in modo che il form scompaia una volta pronto.

spero di essere stato chiaro.
grazie 1000 per l'aiuto.

Discussione: Controllo Javascript + Ajax

Strumenti discussione

Ricerca discussione

Visualizza

Controllo Javascript + Ajax

Permessi di invio