Problema con form: quando apro un popup con Javascript parte il submit

**axxel84** · 06-01-2012, 14:51

Nel postare la richiesta premetto che sono assolutamente un profano di html, php e soprattutto di javascript. Posto in questa sezione ma non sono sicuro che sia esatta, dato che non so se il problema dipende dall'html o dal 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:

<?php
  include "const.php";
  include "db_parameters.php";
  define("PAGE_TITLE" , "Inserimento movimenti");       

  $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>

          <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">
      </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);
  }

**mangusta91** · 06-01-2012, 16:10

Metti questo nella head della tua pagina:

codice:

<script type="text/javascript"> function openWin() { myWindow=window.open('new_neg.php','','width=700,height=400'); myWindow.focus(); } </script>

E nell'onclick al posto di quello che già hai metti:

codice:

onclick="javascript:openWin();"

a me funziona perfettamente

**axxel84** · 06-01-2012, 16:40

Ho appena provato, ma la pagina cerca di caricarmi comunque write_mov.php (che è il target del form principale) e non new_neg.php come popup. In altre parole tutto come prima

**mangusta91** · 06-01-2012, 17:00

hai provato a metterlo fuori dal form? se vuoi che sia collegato in qualche modo a qualcosa puoi passare come parametro della funzione un id, un valore.. in questo modo eviti che invii il form..

**br1** · 06-01-2012, 17:12

Per come e' scitta la pagina al momento del click tu apri una popup che contiene la pagina "new_neg.php" e successivamente ed indipendentemente da questo parte il form che carica la pagina specificata nell'action all'interno della finestra principale.

Mi pare di capire che tu all'interno del popup hai un secondo form nel quale operi una scelta che poi andra' a modificare il form nella pagina chiamante.... per fare questo e' sufficiente non utilizzare un <input type="image" ..> per richiamarlo, dato che quell'oggetto e' stato fatto con il solo scopo di inviare il form

**NonCeLaFaccio+** · 09-01-2012, 15:42

Come fa notare br1 il problema è nel type="image" che equivale, semplificando, ad un tag <IMG> a cui viene associata la funzione di submit.

Se si vuole l'immagine ma non il submit la cosa più semplice sarebbe di utilizzare un <IMG> vero e proprio con un onclick che apre il popup cioè qualcosa del genere (non l'ho testato ma dovrebbe funzionare):

codice:

[img]./img/plus.gif[/img]

Ci sarebbe anche la soluzione di bloccare l'operatività del submit con un return false, così:

codice:

<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);return false;">

ma questa soluzione non funziona in caso di javascript disattivato (il popup non si apre e viene fatta la submit).

Visto che la cosa mi ha incuriosito sono andato a riguardarmi la guida (qui ) e ho trovato una frase interessante ma criptica:

come si può vedere, se non si specifica nulla, l'immagine ha valore di submit.

sarebbe allora interessante sapere se html stesso prevede un parametro o qualcos'altro che eviti che il type="image" equivalga ad un submit, io però ho provato a dare un'occhiata rapida al manuale di html ma non ho trovato nulla.

Discussione: Problema con form: quando apro un popup con Javascript parte il submit

Strumenti discussione

Ricerca discussione

Visualizza

Problema con form: quando apro un popup con Javascript parte il submit

Permessi di invio