#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Location
    Italy
    Posts
    27
    Rep Power
    0

    Jump to section if error


    Ciao,

    I am not expert of Javascript.

    I need to jump to a section in case of error.

    I had wrote this and it's work (ERROR is a string with the error text) :
    Code:
    <div class="alert"> {ERROR} </div>
    
    <script>
    if (!document.location.hash){
        document.location.hash = 'page_five';
    }
    </script>
    .
    .
    .
    <fieldset id="page_five">
    My problem is jump to different section (<fieldset id="page_one">,<fieldset id="page_two">,<fieldset id="page_three">...) checking the error string, for example if the error is "blablabla1" or "blablabla2" --> jump to page_one, and so on...

    Some ideas how change the script before?

    Thanks.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,136
    Rep Power
    120
    You could go about this a couple different ways. One would be to use:
    Code:
    document.location.href = "#page_one";
    Or... alternatively... you could use; the code below, to scroll to a specific location (based on the current location of the fieldset, within the hierarchy of the pages block level element structure):
    Code:
    document.body.scrollTop = 100; // this number represents the current location (in pixels); from the top of the page, to the fieldset element
    Or...
    Code:
    window.scrollTo(0,100); // where the first number (in this global function)..., is your page's X-coordinate and the second number...,  is your page's Y-coordinate
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Location
    Italy
    Posts
    27
    Rep Power
    0
    Originally Posted by web_loone08
    You could go about this a couple different ways. One would be to use:
    Code:
    document.location.href = "#page_one";
    Or... alternatively... you could use; the code below, to scroll to a specific location (based on the current location of the fieldset, within the hierarchy of the pages block level element structure):
    Code:
    document.body.scrollTop = 100; // this number represents the current location (in pixels); from the top of the page, to the fieldset element
    Or...
    Code:
    window.scrollTo(0,100); // where the first number (in this global function)..., is your page's X-coordinate and the second number...,  is your page's Y-coordinate
    Thanks for your time but how I can do this also checking the error?

    I need to jump to "page_one" if the ERROR = message1 or jump to "page_two" if the ERROR = message2 and so on....
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,136
    Rep Power
    120
    You should do an online search for "javascript conditional statements". You will find information on how you can validate your errors with: if...else conditions, switch statements, while...do loops and etc.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Location
    Italy
    Posts
    27
    Rep Power
    0
    OK, now the code is this:

    Code:
    <script language="javascript">
    var errore = "{ERROR}"
    if ((errore == "Indirizzo sede della organizzazione mancante") || 
        (errore == "CAP sede organizzazione mancante") ||
        (errore == "Citt&agrave; sede organizzazione mancante") ||
        (errore == "Provincia sede legale mancante") ||
        (errore == "Regione sede legale mancante") ||
        (errore == "Telefono della sede orgnizzazione mancante") ||
        (errore == "Nome legale rappresentante mancante"))
        {
        document.location.hash = 'page_two';
        }
    if ((errore == "Nome legale rappresentante mancante") || 
        (errore == "Cognome legale rappresentante mancante") ||
        (errore == "Codice fiscale legale rappresentante mancante o errato") ||
        (errore == "Email legale rappresentante mancante") ||
        (errore == "Nome responsabile comunicazione mancante") ||
        (errore == "Email responsabile comunicazione mancante o errato") ||
        (errore == "Telefono persona di riferimento mancante") ||
        (errore == "Ruolo persona di riferimento mancante") ||
        (errore == "Nome responsabile comunicazione mancante") ||
        (errore == "Cognome responsabile comunicazione mancante") ||
        (errore == "Email responsabile comunicazione mancante o errato"))
        {
        document.location.hash = 'page_three';
        }
    if ((errore == "Settore di attivit&agrave; mancante") || 
        (errore == "Area geografica di attivit&agrave; mancante"))
        {
        document.location.hash = 'page_four';
        }
    if ((errore == "Descrizione e Mission mancante") || 
        (errore == "Immagine Logo mancante") ||
        (errore == "Progetto non selezionato") ||
        (errore == "Titolo del progetto mancante") ||
        (errore == "Descrizione del progetto mancante") ||
        (errore == "Nome legale rappresentante mancante"))
        {
        document.location.hash = 'page_five';
        }
    if ((errore == "Il file Atto Costitutivo deve essere in formato PDF") || 
        (errore == "Il file Statuto deve essere in formato PDF") ||
        (errore == "Il file Iscrizione Anagrafe ONLUS deve essere in formato PDF"))
        {
        document.location.hash = 'page_six';
        }
    if ((errore == "Username mancante") || 
        (errore == "Password mancante") ||
        (errore == "La stringa immessa per la verifica di immagine non corrisponde a quanto visualizzato.") ||
        (errore == "La Password deve contenere almeno un numero o almeno una lettera"))
        {
        document.location.hash = 'page_seven';
        }
    </script>
    The script before works, my new problem now is to paint the input field background into red.

    This is a piece of the HTML code:

    Code:
    <fieldset id="page_four">
     <legend>Attivit&agrave; dell'organizzazione</legend>
      <!-- IF COUNTRY -->
      <div class="control-group">
        <label class="control-label" for="">Settore di attivit&agrave; {REQUIRED(4)}</label>
        <div class="controls">
          <select name="TPL_settoreattivita">
            <option value="">{L_251}</option>
         
    								{L_SETTOREATTIVITA}
    
          </select>
        </div>
      </div>
      <!-- ENDIF -->
      <!-- IF COUNTRY -->
      <div class="control-group">
        <label class="control-label" for="">Area geografica d'intervento principale {REQUIRED(4)}</label>
        <div class="controls">
          <select name="TPL_areageografica">
            <option value="">{L_251}</option>
         
    								{L_AREAGEOGRAFICA}
    
          </select>
        </div>
      </div>
      <!-- ENDIF -->
    </fieldset>

    I try to use these two lines but without success, I mean that if I use one or both these instructions stop work also document.location.hash:

    Code:
        document.getElementById("a").focus();
        document.getElementById("a").style.background-color="#ff0000";
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,136
    Rep Power
    120
    You need to use document.location.href and not document.location.hash; because the first actually changes the browser location. While the later; is just checking for the hash, in the address bar.
    Code:
    document.location.href = 'page_two';
    As for styling your input; you would do it like this:
    Code:
    document.getElementById("a").focus();
    document.getElementById("a").style.backgroundColor="#ff0000";
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Location
    Italy
    Posts
    27
    Rep Power
    0
    Ciao, i'm sorry for this long time answer, I am working on others piece of the project and I can try your suggests in the next days...

IMN logo majestic logo threadwatch logo seochat tools logo