Distinguere tra i pulsanti di invio sul modulo HTML con due pulsanti di invio

Question

Sto utilizzando un modulo per inviare informazioni a una pagina php. (usando 'GET') Mi piacerebbe avere due pulsanti sotto il modulo: uno per visualizzare l'anteprima della pagina generata e uno per scaricare la pagina generata.

ho trovato questa soluzione per la parte anteprima:

<script type="text/javascript"> 
$("form").submit(function() { 
$("form").attr('target', '_blank'); 
return true; 
}); 
</script> 

Il che funziona alla grande.

per rendere la pagina generata disponibile per il download, sono stato in genere con un normale pulsante di invio:

<input type="submit" name="submit" id="submit" onClick="myFunction()" value="Download Bonus Page" > 

e sulla pagina php generato, in cima ho aggiunto

<?php 
$filename = 'bonuspage.html'; 
header('Content-disposition: attachment; filename=' . $filename); 
header('Content-type: text/html'); 
// ... the rest of your file 
?> 

I mi chiedo come posso combinare entrambe le funzioni, perché quando clicco su uno dei due pulsanti, è sempre l'anteprima che si apre - Non riesco a scaricare il lavoro ...

Answer 1

Metti due bu ttons come questo:

<script type="text/javascript"> 
    function myFunction(el) { 
     $(el).parents('form').first().attr('target','_blank').find('input[name="what"]').val('download'); 
    } 
</script> 

<form method="GET"> 
    <input type="hidden" name="what" value="preview" /> 
    <input type="submit" value="Preview" /> 
    <input type="button" value="Download" onclick="myFunction(this)" /> 
</form> 

In questo modo, si otterrà una variabile aggiuntiva denominata what che indica quale pulsante è stato premuto.

E nel file PHP, basta fare:

<?php 
$filename = '/complete/path/of/the/file.html'; 
if($_GET['what'] === 'preview') { 
    // 
} else { 
    header('Content-disposition: attachment; filename=' . basename($filename)); 
    header('Content-type: text/html'); 
} 

echo file_get_contents($filename); 

?> 

c'è un altro metodo, con due presentare pulsanti con nomi e valori diversi e si può verificare che nello script PHP, ma è comunque necessario utilizzare Javascript per target="_blank" per il download.

Un approccio migliore è con la sintassi HTML5 <a download>. Controlla this link.

Answer 2

è necessario inviare un parametro aggiuntivo action e verificare nel file gestore PHP (quello riferimento in <form action=) per 2 diversi valori (ad es. 'Scaricare' & 'anteprima').

Dato il seguente codice HTML:

<form method="GET" action="your/handler.php" id="myform"> 
    <input type="hidden" name="action" id="action" value="preview" /> 
    <input type="button" value="preview" id="preview"/> 
    <input type="button" value="download" id="download"/> 
</form> 

È possibile creare facilmente una funzione di commutazione e inviare manualmente il modulo.

function toggleAction(e) { 
    var target = $(e.target); 
    $('#action').val(target.attr('value')); 
    $('#myform').submit(); 
} 
$('#preview').on('click', toggleAction); 
$('#download').on('click', toggleAction); 

Oppure, se si vuole evitare che richiede una pagina di ricarica (con questo approccio, senza bisogno di campo aggiuntivo nascosto):

function toggleAction(e) { 
    var target = $(e.target); 
    $.ajax({ url: 'your/handler.php', data: { action: target.attr('value') }) 
    .done(function(data) { 
     // process returned data (from echo statement in handler) 
    });  
} 

Nel file PHP:

<?php if($_GET['action'] === 'preview') { 
    // preview code 
} else { 
    // download code 
} ?>