Ajax colori

[serpanno]

Ciao ragazzi..

<form name="tutto" onsubmit="AjaxCall('tutto', 'POST', 'ciao.php', 'ciao'); return false;">
<div id="ciao"></div>

<?php 

session_start (); 
include ("connessione.php"); 

$nome_utente = $_POST['nome_utente']; 

if ($nome_utente == '')

{
    echo "Non lasciare vuoto!";
    exit;
    
}

E questo script funziona a dovere!
Ora però vorrei invece che "Se il nome utente è vuoto scrivi in quel preciso <div>Non lasciare vuoto</dib>" vorrei che l'input cambiasse colore e diventasse per esempio rosso...
Quindi non voglio aggiungere bensì modificare.. come posso fare?

[cavicchiandrea]

Al callback della chiamata ajax verifichi la risposta if(responseAjax == "Non lasciare vuoto!"){cambia sfondo....}

[serpanno]

Cioé?

// index.html
<form name="tutto" onsubmit="AjaxCall('tutto', 'POST', 'ciao.php', 'ciao'); return false;">
<div id="ciao"></div>

// ciao.php

if ($nome_utente == ' ')
{
    echo 'Non lasciare vuoto';
    exit;
} 

E dopo inserisco nella index.html il responseAjax?

il callback se non sbaglio è la risposta che torna dopo aver letto il codice in php

[cavicchiandrea]

Esatto

[serpanno]

Esatto

Ma dove lo andrò a posizionare?
in uno
<script type="text/javascript">
if(responseAjax == ""){document.GetElementById('nome_utente').classNa me = "rosso";}
</script>
?

[cavicchiandrea]

Dentro alla funzione callback della chiamata ajax, sicuro d'aver capito come funziona ajax?

[serpanno]

Ma io non nessuna funzione callback...
Sinceramente ho capito come aggiungere un messaggio di errore, cioè come ho fatto..
Ma non uso nessuna funzione se non quella dentro onSubmit();

[cavicchiandrea]

In sintesi non conosci minimamente ajax, posta la funzione AjaxCall

[serpanno]

function AjaxCall(AjaxForm, AjaxMethod, AjaxFile, AjaxHtml)
{
    var AjaxObject, AjaxText;
    AjaxText = document.getElementById(AjaxHtml);
    try
    {
        window.XMLHttpRequest ? AjaxObject = new XMLHttpRequest() : AjaxObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
         AjaxText.innerHTML = "AJAX non funziona sul tuo browser";
    }
    AjaxObject.onreadystatechange = function()
    {
        if (AjaxObject.readyState == 4)
        {
            AjaxObject.status == 200 ? AjaxText.innerHTML = AjaxObject.responseText : AjaxText.innerHTML = "Si è verificato un errore nel tentativo di usare AJAX";
            document.body.style.cursor = "default";
        }
        else
        {
            document.body.style.cursor = "wait";
        }
    }
    AjaxObject.open(AjaxMethod, AjaxFile, true);
    if (AjaxMethod == "GET")
    {
        AjaxObject.send(); 
    }
    else
    {
        var AjaxCount = 0;
        var AjaxString = "";
        var AjaxForms = document.forms[AjaxForm];
        var AjaxElements = AjaxForms.elements.length;
        for (AjaxCount=0; AjaxCount<AjaxElements; AjaxCount++)
        {
            var AjaxType = AjaxForms.elements[AjaxCount].type.toLowerCase();
            if (AjaxType != "button" && AjaxType != "submit" && AjaxType != "image" && AjaxType != "reset")
            {
                if (AjaxType == "radio" || AjaxType == "checkbox")
                {
                    if (!AjaxForms.elements[AjaxCount].checked)
                    {
                        AjaxString += AjaxForms.elements[AjaxCount].value;
                    }
                }
                AjaxString += AjaxForms.elements[AjaxCount].name + "=" + encodeURIComponent(AjaxForms.elements[AjaxCount].value);
                if (AjaxCount < AjaxElements) AjaxString += "&";
            }
        }
        AjaxObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        AjaxObject.setRequestHeader("Content-length", AjaxString.length);
        AjaxObject.setRequestHeader("connection", "close");
        AjaxObject.send(AjaxString);
    }
}

[cavicchiandrea]

cambia questo blocco

 if (AjaxObject.readyState == 4)
        {
            AjaxObject.status == 200 ? AjaxText.innerHTML = AjaxObject.responseText : AjaxText.innerHTML = "Si è verificato un errore nel tentativo di usare AJAX";
            document.body.style.cursor = "default";
        }
        else
        {
            document.body.style.cursor = "wait";
        }

con questo

 if (AjaxObject.readyState == 4)
        {
            AjaxObject.status == 200 ? AjaxText.innerHTML = AjaxObject.responseText : AjaxText.innerHTML = "Si è verificato un errore nel tentativo di usare AJAX";
if(AjaxObject.responseText == "Non lasciare vuoto"){document.getElementById('nome_utente').className = "rosso";}
            document.body.style.cursor = "default";
        }
        else
        {
            document.body.style.cursor = "wait";
        }