+ Rispondi al Thread
Visualizzazione dei risultati da 1 a 4 su 4

Discussione: [Javascript]Inaspettato submit all'apertura di un popup

  1. #1
    axxel non è in linea Novello
    Post
    13

    [Javascript]Inaspettato submit all'apertura di un popup

    Nel postare la richiesta premetto che sono assolutamente un profano di html, php e soprattutto di javascript.
    Sto cercando di realizzare un form html in cui uno dei campi può essere selezionato dai valori già presenti in db tramite un select oppure - se voglio un valore non ancora presente - inserito attraverso un secondo form popup (attraverso codice js non scritto da me).
    Il problema è che cliccando il tasto per l'inserimento di un nuovo valore ottengo sì il popup voluto, ma contemporaneamente mi parte il submit della pagina principale, cosa che ovviamente non voglio. A che cosa può essere dovuto questo comportamento?
    Posto di seguito i due file html e js:

    new_mov.php
    codice HTML:
    <?php
      include "const.php";
      include "db_parameters.php";
      define("PAGE_TITLE" , "Inserimento movimenti");       // nome della pagina da inserire nel tag title
    
      $connection = mysql_connect(DB_SERVER, DB_USER, DB_PWD)
                    or die("Errore nella connessione al database: ".mysql_error());
      mysql_select_db(DB_NAME, $connection) 
                    or die("Errore nella selezione del db: ".mysql_error());
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <script src="./js/generali.js" type="text/javascript"></script>
        <title>
          Spese <?php echo(SW_VER); ?> - <?php echo(PAGE_TITLE); ?>
        </title>
      </head>
      
      <body>
      
        <div class="form">
    
          <form method="post" action="write_mov.php">
            <div class="subform">
              <label>Dati movimento</label><br />
              <span>
                <label>Data del movimento (GG/MM/AAAA):</label> <input type="text" name="data">
              </span>
            </div>
          
            <div class="subform">
              <label>Negozio</label>
              <select name="negozio">
                <option value="x" selected="selected"> --- </option>
                <?php 
                  $query = "SELECT * FROM negozi";
                  $result = mysql_query($query) 
                            or die('Errore nella lettura della tabella \'negozi\': ' . mysql_error());
                  while ($row = mysql_fetch_assoc($result))
                  { 
                    echo "<option value=\"".$row["nome"]."\">".$row["nome"];
                    if($row["citta"] != "")
                      echo " - ".$row["citta"];
                    echo "</option>";
                  }
                ?>
              </select> 
              <input type="image" name="aggiungi_negozio" src="./img/plus.gif" 
                     alt="Aggiungi negozio" title="Aggiungi negozio" width="20" height="20"
                     onclick = "centerPopUp('./new_neg.php', 'Nuovo negozio', 800, 560, 1);"> 
            </div>
     
            <input type="submit" value="Conferma">[/U]
          </form>
        </div>
      </body>
    </html>
    generali.js
    codice:
      // Apre una nuova finestra di popup centrata nello schermo.  
      function centerPopUp(url, name, width, height, scrollbars)
      // Parametri:
      // - url          :url della pagina da caricare nella nuova finestra;
      // - name         :...;  
      // - width        :larghezza della nuova finestra;
      // - height       :altezza della nuova finestra;
      // - scrollbars   :indica se mostrare le barre di scorrimento. 
      {    
      if(scrollbars == null) scrollbars = "0"
      
      str = "";
      str += "resizable=0,";
      str += "scrollbars=" + scrollbars + ",";
      str += "toolbar=0,";
      str += "location=0,";
      str += "statusbar=0,";
      str += "menubar=0,";
      str += "width=" + width + ",";
      str += "height=" + height + ",";
      
      if (window.screen) 
        {
        var ah = screen.availHeight - 30;
        var aw = screen.availWidth - 10;
      
        var xc = (aw - width) / 2;
        var yc = (ah - height) / 2;
      
        str += ",left=" + xc + ",screenX=" + xc;
        str += ",top=" + yc + ",screenY=" + yc;
        }
        
      window.open(url, name, str);
      }
    Ultima modifica di axxel; 06-01-2012 14:24 

  2. #2
    L'avatar di bottomap
    bottomap non è in linea Moderatore Globale
    Post
    4,130
    Ciao,

    Il problema è molto semplice... l'input type=image è un input di tipo submit a cui si può legare un'immagine, ma pur sempre un submit.
    Come ogni submit, effettua automaticamente l'invio della form al click sul pulsante.
    Per evitare questo comportamento, basta che fai ritornare alla onclick false, prevenendo in tal modo l'invio... in sostanza:
    codice:
     ... onclick = "centerPopUp('./new_neg.php', 'Nuovo negozio', 800, 560, 1); return false;"  ...
    Va da se comunque che alla chiusura della tua popup dovrai fare un refresh della pagina (per poter ripetere la query di popolamento) prima di avere l'oggetto disponibile nella select. Questo spero ti sia già chiaro... è un aspetto importante della programmazione di web application...

    Ciaociao


    Venite a farmi un saluto su http://www.bottomap.com/

    - Come porre domande in modo intelligente
    - Hai mai dato un'occhiata al
    Regolamento del Forum? Se la risposta è no, sarebbe proprio l'ora di farlo...
    - Il Crossposting è vietato dalla Netiquette.

    "Solo Puffin ti darà forza e grinta a volontà" - Charlie O'Brian
    "I gatti sono animali verso cui ho il massimo rispetto. I gatti e i non conformisti mi sembrano davvero i soli esseri in questo mondo che abbiano una coscienza pratica e attiva" - Jerome K. Jerome
    "Dun Dun DUNNN!" - Capitan Caos
    (per chiunque se lo fosse mai chiesto, il nick Bottomap è volutamente sgrammaticato)

  3. #3
    axxel non è in linea Novello
    Post
    13
    Grazie mille bottomap.
    A quanto pare sono più indietro di quanto pensassi in ambito web, ma purtroppo le mie conoscenze in questo campo sono poche e frammentarie.
    Non è possibile quindi - magari usando AJAX - popolare la select senza il refresh?
    Credo di poter risolvere comunque in questo modo, ma sarebbe più "comodo"...

  4. #4
    L'avatar di bottomap
    bottomap non è in linea Moderatore Globale
    Post
    4,130
    Ciao,

    Si, Ajax è una strada pienamente percorribile e l'unica che bene o male ti evita il refresh forzoso della pagina chiamante, l'importante è che tu non immaginassi che la select sulla finestra padre si popolasse "come per magia" (può sembrare una notazione curiosa, ma è un'interpretazione piuttosto diffusa tra i newbies, finché non è ben chiaro "dove" viene interpretato il codice php/asp/jsp e dove invece il codice javascript)...

    Implementare la cosa implica un'ulteriore richiesta (ajax) al server per (ri)popolare con la risposta il contenuto della select. Dovrai ottenere la risposta in un formato comodo e poi popolare una select che sta nella opener della nuova finestra di popup. Niente di molto difficile una volta che hai ben chiari i fondamenti.


    Venite a farmi un saluto su http://www.bottomap.com/

    - Come porre domande in modo intelligente
    - Hai mai dato un'occhiata al
    Regolamento del Forum? Se la risposta è no, sarebbe proprio l'ora di farlo...
    - Il Crossposting è vietato dalla Netiquette.

    "Solo Puffin ti darà forza e grinta a volontà" - Charlie O'Brian
    "I gatti sono animali verso cui ho il massimo rispetto. I gatti e i non conformisti mi sembrano davvero i soli esseri in questo mondo che abbiano una coscienza pratica e attiva" - Jerome K. Jerome
    "Dun Dun DUNNN!" - Capitan Caos
    (per chiunque se lo fosse mai chiesto, il nick Bottomap è volutamente sgrammaticato)

+ Rispondi al Thread

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi