come ripristinare i dati di un form

clodiny · 10 Dic 2015

salve a tutti,

sto cercando di realizzare un form,
che, a seconda della voce selezionata in un input <select>,
attivi un altri campi di input di tipo text.
poi i dati della form sono inviati la medesimo file .php,
che in caso di una errore, deve ricaricare i dati nei rispettivi campi di input,
e riattivare i campi text.

ma facendo un test non riesco a scatenare l'evento che mi attiva i campi di tipo text.

qualcuno mi può aiutare????

grazie in anticipo,
Claudio

criric · 10 Dic 2015

Ciao, posta il codcie che hai scritto, satà più facile aiutarti

clodiny · 10 Dic 2015

file select.php:

PHP:

<?php
$isError='';
$errSelect='';

$field_select='';


if( $_REQUEST && isset($_REQUEST['submit']) ){
    if( $_REQUEST['submit'] == 'send') {

        $errSelect = 'campo obbligatorio, prego selezionare.';

        if(isset($_REQUEST['sendSelect'])){
            if ($_REQUEST['sendSelect']) {
                $field_select = $_REQUEST['sendSelect'];
                $errSelect = '';
            }
        }

        // per test genero un errore
        $isError =  '1' ;
    }
}
?>

HTML:

<HEAD>
    <title>Test 1</title>
    <link rel="stylesheet" type="text/css" href="../dist/css/jquery-ui.min.css">
    <script type="text/javascript" src="../dist/js/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/js/jquery-ui.min.js"></script>

    <!--  script di gestione dei campi della form  -->
    <script type="text/javascript" src="../dist/js/form.js"></script>
</HEAD>

<body >
  <div class="page-content" id="">
    <div class="row widget-box" id="view-input-fields">

      <?php $url = basename($_SERVER['PHP_SELF']); ?>
      <form action="select.php"  method="get" id="form-input">

        <fieldset id="fields-input">
          <div id="field_select">
            <label> Campo Selezione </label>
            <div >
              <div >
                <select  id="input_select" name="sendSelect">
                   <option value="">scegli una voce...</option>
                   <?php echo _popolaSelect($cfg); ?>
                </select>
              </div>
              <?php if($errSelect) echo "<label>$errSelect</label>"; ?>
            </div>
          </div>

          <div id="field_text">
            <label>campi test </label>
              <div >
                <div >
                  <input id="input_text" name="sendText"  <?php if($isError) echo "value=\"$field_text\""; ?>  type="text"  placeholder="999.99">
                </div>
                <?php if($errText) echo "<label>$errText</label>"; ?>
              </div>
            </div>
          </fieldset>

          <fieldset>
            <div class="">
              <button type="submit" id="submitSend" name="submit" value="send">Invia</button>
            </div>
          </fieldset>

        </form>
      </div> 

      <div>
        <p id="t1"></p>
        <p id="t2"></p>
        <p id="t3"></p>
      </div>

    </div>

<?php if($isError){ ?>
    <script type="text/javascript">
    jQuery(function($){
        var selected = $(':selected',  $('#input_select'));
        $("#t1").html( " test1 :"  + selected.val()  );
        input_select_change(selected);
    });

    </script>
<?php } ?>

</body>
</html>

PHP:

<?php  
/*    questa funzine è alla fine del file select.php, dopo il codice html  */
function _popolaSelect($cfg){
  global $isError, $field_select;

  $options = '';
  $table = $cfg['table']['voci'];

  $itemsVoce    = Table::Select("SELECT * FROM {$cfg['table']['voci']} ORDER BY id");

  foreach ($itemsVoce as $item){
    $selected="";
    if( $isError && ($field_select == $item->id) ){
        $selected="  selected=\"\"";
    }

    $options .= "  <option value=\"$item->id\" $selected >  $item->nome   </option>".chr(10);
  }

  return $options;
}
?>

clodiny · 11 Dic 2015

file form.js

PHP:

jQuery(function($) {

    //--------------------------------------------------------
    //    caricamento della pagina    **
    $(document).load("pagecontainerbeforeload", function(){
        $('#form-input').find('fieldset').find('input').prop('disabled', true);
        $('#form-input').find('fieldset').find('select').prop('disabled', true);

        $('#input_select').prop('disabled', false);
    });
    //--------------------------------------------------------



    //--------------------------------------------------------
    //    selezione del campo "select"    **
    $('#input_select').change(function() {
        var selected = $(':selected', this);
        input_select_change(selected);
    });


    function input_select_change(selected) {
        $("#t3").html( " test3 :"  + selected.val()  );
        $("#input_text").prop('disabled', false);
    }
    //--------------------------------------------------------


});

clodiny · 11 Dic 2015

dopo aver premuto il pulsante "invia",
viene aggiunto in calce alla pagina:

PHP:

<script type="text/javascript">
    jQuery(function($){
        var selected = $(':selected',  $('#input_select'));
        $("#t1").html( " test1 :"  + selected.val()  );
        input_select_change(selected);
    });
</script>

perche $isError è vera,

il problema è che non viene chiamata la funzione "input_select_change(selected)"
che mi abilita il campo di input text.

clodiny · 11 Dic 2015

dimenticavo...

la tabella MySql che serve per popolare il select ha 2 campi:

id (int)
nome (char)

Claudio.

marino51 · 11 Dic 2015

ciao Claudio,
la variabile "$cfg" usata per chiamare la "popola select", è orfana, non le viene assegnato valore,
la select è di conseguenza vuota

clodiny · 11 Dic 2015

ciao marino,

ti ringrazio ancora per l'aiuto nell'altro post.

mi è sfuggita quando ho creato l'esempio,
in questo caso non serve a nulla, è usata solo nella query per il nome della tabella da leggere.

la tabella ha due campi, l' ID e il NOME

ciao Claudio

clodiny · 11 Dic 2015

sottopongo la query da lanciare per creare la tabella di test

PHP:

CREATE TABLE IF NOT EXISTS `voci_select` (
  `id` int(10) NOT NULL,
  `nome` varchar(256) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `voci_select` (`id`, `nome`) VALUES
(1, 'voce 1'),
(2, 'voce 2'),
(3, 'voce 3'),
(4, 'voce 4'),
(5, 'voce 5'),
(6, 'voce 6'),
(7, 'voce 7'),
(8, 'voce 8'),
(9, 'voce 9'),
(10, 'voce 10'),
(11, 'voce 11'),
(12, 'voce 12'),
(13, 'voce 13'),
(14, 'voce 14'),
(15, 'voce 15'),
(16, 'voce 16'),
(17, 'voce 17'),
(18, 'voce 18'),
(19, 'voce 19'),
(20, 'voce 20');

--
-- Indici per le tabelle `vociSelect`
--
ALTER TABLE `voci_select`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `id` (`id`);

marino51 · 12 Dic 2015

ciao,
non sono riuscito a riprodurre le funzioni che vuoi realizzare, ma vedi se questo suggerimento ti aiuta nell'impasse dell'evento

PHP:

<HEAD>
    <title>Test 1</title>
    <link rel="stylesheet" type="text/css" href="../___jquery/jquery-ui.min.css">

    <script type="text/javascript" src="../___jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../___jquery/jquery-ui.min.js"></script>

    <script type="text/javascript">
	$(document).ready(function(){
		var selected = '';

		$("select#input_select").change(function(){ ScegliCampi(); });

		function ScegliCampi() 
		{
			selected = $("select#input_select option:selected").attr('value');
			alert('input_select : '+selected);
		        $("#t3").html( "test3 : "+selected );
			return;
		}
	});
    </script>

    <script type="text/javascript" src="form.js"></script>
</HEAD>

<body >
  <div class="page-content" id="">
    <div class="row widget-box" id="view-input-fields">

      <?php $url = basename($_SERVER['PHP_SELF']); ?>
      <form action="select.php"  method="get" id="form-input">

        <fieldset id="fields-input">
          <div id="field_select">
            <label> Campo Selezione </label>
            <div >
              <div >
                <select  id="input_select" name="sendSelect">
                   <option value="">scegli una voce...</option>
                   <?php echo _popolaSelect($cfg); ?>
                </select>
              </div>
              <?php if($errSelect) echo "<label>$errSelect</label>"; ?>
            </div>
          </div>

          <div id="field_text">
            <label>campi test </label>
              <div >
                <div >
                  <input id="input_text" name="sendText"  <?php if($isError) echo "value=\"$field_text\""; ?>  type="text"  placeholder="999.99">
                </div>
                <?php if($errText) echo "<label>$errText</label>"; ?>
              </div>
            </div>
          </fieldset>

          <fieldset>
            <div class="">
              <button type="submit" id="submitSend" name="submit" value="send">Invia</button>
            </div>
          </fieldset>

        </form>
      </div> 

      <div>
        <p id="t1"></p>
        <p id="t2"></p>
        <p id="t3"></p>
      </div>

    </div>

<?php if($isError){ ?>
    <script type="text/javascript">
    jQuery(function($){
	alert('sono qui');
        var selected = $(':selected',  $('#input_select'));
        $("#t1").html( " test1 :"  + selected.val()  );
        input_select_change(selected);
    });

    </script>
<?php } ?>

</body>
</html>

<?php
function _popolaSelect($cfg){
  global $isError, $field_select;

  $options = '';
/*
  $table = $cfg['table']['voci'];

  $itemsVoce    = Table::Select("SELECT * FROM {$cfg['table']['voci']} ORDER BY id");

  foreach ($itemsVoce as $item){
    $selected="";
    if( $isError && ($field_select == $item->id) ){
        $selected="  selected=\"\"";
    }

    $options .= "<option value=\"$item->id\" $selected >  $item->nome</option>".chr(10);
  }
*/
  $options .= "<option value='01'>item_01</option>";
  $options .= "<option value='02'>item_02</option>";
  $options .= "<option value='03'>item_03</option>";
  return $options;
}
?>

clodiny · 13 Dic 2015

quello che voglio ottenere è che alla selezione di una voce del campo select
si abiliti il campo di Text.

alla perssione del pulsante invia, i dati del form vengono eleborati,
(dal codice php in testa al file) e se c'è un errore
(nell'esempio simulato forzando $isError = '1' ),
il valore del select viene ricaricato e di conseguenza il
campo di edit deve venire nuovamente abilitato.
visto che nel select è stato caricato un valore.

dopo l'invio dei dati del form,
riesco a ricaricare il valore nel select,
ma non riesco a richiamare la funzione per abilitare il campo di text.

ho provato con :
$('#input_select').trigger("change");
$('#input_select').change();

ma niente da fare....

hai qualche dritta per risolvere

ciao Claudio

clodiny · 13 Dic 2015

esempio rivisto

ho effettuati i test si su chrome 47 che su firefox 42.0
ed il risultato è il medesimo, al caricamento della pagina dopo la pressione del pulsante "invia",
la funzione "input_select_change(selected)" in form.js non viene richiamata.

per questo ho rivisto l'esempio togliento il caricamento del campo select da DB.
con la speravaza di essere più chiaro.

saluti Claudio

---------------------------------------------------------------
allego un file zip contenente i files di esempio
Vedi l'allegato select.zip

Cerca

Cerca

come ripristinare i dati di un form

clodiny

Nuovo Utente

criric

Super Moderatore

clodiny

Nuovo Utente

clodiny

Nuovo Utente

clodiny

Nuovo Utente

clodiny

Nuovo Utente

marino51

Utente Attivo

clodiny

Nuovo Utente

clodiny

Nuovo Utente

marino51

Utente Attivo

clodiny

Nuovo Utente

clodiny

Nuovo Utente

Discussioni simili