non viene visualizzata

Question

Quindi ho creato un modulo. Dopo aver inviato tale modulo, ho creato una scheda di conferma in modo che l'utente possa confermare i suoi input. una volta che l'utente conferma gli input, il modulo verrà inviato.

Così ho aggiunto jQuery per visualizzare la scheda di conferma tuttavia, quando si fa clic sul pulsante per visualizzare la scheda di conferma, la forma cancella solo su e la scheda di conferma non si vede ... Di seguito riportiamo i codici

HTML

<div class="tab-content"> 
    <fieldset class="tab-pane active" id="form_tab"> 
     <form id="poform" method="GET"> 
     <table> 
       <tr> 
        <th colspan="2"><div class="header_3">Pre-Order Form</div></th> 
       </tr> 
       <tr> 
        <td><label>Account Number:</label></td> 
        <td><input type="text" name="accountnumber" id="accountnumber" value="" required/></td> 
       </tr> 
       <tr> 
        <td><label>Trade:</label></td> 
        <span class="text_11"> 
        <td><input type="radio" id="Buy" name="tradetype" class="tradetype" required value="Buy"/> Buy 
        <input type="radio" id="Sell" name="tradetype" class="tradetype" value="Sell"/> Sell </span></td> 
       </tr> 
       <tr> 
        <td><label>Metal:</label></td> 
        <span class="text_11"> 
        <td><input type="radio" id="Steel" name="metal" class="metal" required value="Steel"/> Steel 
        <input type="radio" id="Iron" name="metal" class="metal" value="Iron"/> Iron </span></td> 
       </tr> 
       <tr> 
        <td class="select"><label>Amount:</label></td> 
        <td><select id="amount" name="amount"> 
        <option value="">Select</option> 
        <?php include_once "selectamount.php"?></td> 
        </select> 
       </tr> 
       <tr> 
        <td class="select"><label>Date:</label></td> 
        <td><select id="date" name="date" id="date"> 
        <option value="">Select</option> 
        <?php include_once "selectdate.php"?></td> 
        </select> 
       </tr> 
       <tr> 
        <td colspan="2" align="center"> 
        <button type="button" id="submit_btn"> 
         <span class="chngetext">Check</span> 
        </button> 
        </td> 
       </tr> 
     </table> 
     </form> 
    </fieldset> 

    <fieldset class="tab-pane" id="conf_tab"> 
    <table> 
     <tr style="text-align:center"> 
      <th colspan="2"><div class="header_3">Pre-Order Ticket Details</div></th> 
     </tr> 
     <tr style="text-align:left"> 
      <td><label>Account Number:</label></td> 
      <td><mgin><span id="confirm_accountnumber"></span></mgin></td> 
     </tr> 
     <tr style="text-align:left"> 
      <td><label>Trade Pre-Order:</label></td> 
      <td><mgin><span id="confirm_tradetype"></span></mgin></td> 
     </tr> 
     <tr> 
      <td><label>Amount:</label></td> 
      <td><mgin><span id="confirm_amount"></span> 9999 Pooled Allocated <span id="confirm_metal"></span> Loco Singapore</mgin></td> 
     </tr> 
     <tr> 
      <td><label>On date:</label></td> 
      <td><mgin><span id="confirm_date"></span></mgin></td> 
     </tr> 
      <td><label>Pre-Order Discount:</label></td> 
      <td><mgin><span id="confirm_data"></span></mgin></td> 
     </tr> 
     <tr> 
      <td><label>Pre-Order Deposit:</label></td> 
      <td><mgin>SGD 5000.00</mgin></td> 
     </tr> 
     <tr> 
      <td><label>Additional follow up order:</label></td> 
      <td><mgin>New Sell Order to be given 2 days before purchase order date.</mgin></td> 
     </tr> 
     <tr> 
      <td colspan="2" align="center"><button type="submit" class="btn btn-default" id="confirm_btn">Confirm Order</button></td> 
     </tr>  
    </table> 
    </fieldset> 
</div> 

Jquery

$(document).ready(function() { 
    $('#submit_btn').click(function() { 

    // Get the value of the field with 'firstname' id. 
    var accountnumber = $('#accountnumber').val(); 
    var tradetype = $('input.tradetype:checked').val(); 
    var amount = $('#amount').val(); 
    var metal = $('input.metal:checked').val(); 
    var date = $('#date').val(); 
    var data = "<?php include 'retrievepremordisc.php'; ?>"; 

    $('#confirm_accountnumber').text(accountnumber); 
    $('#confirm_tradetype').text(tradetype); 
    $('#confirm_amount').text(amount); 
    $('#confirm_metal').text(metal); 
    $('#confirm_date').text(date); 
    $('#confirm_data').text(data); 

    // Hide form tab and show confirmation tab 
    $('#form_tab').removeClass('active'); 
    $('#conf_tab').addClass('active'); 

    }); 
}); 

file PHP (retrievepremordisc.php)

<?php 
include_once "connect.php"; 
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); 

$form=$_GET; 
$trade=$form['tradetype']; 
$metal=$form['metal']; 
$amount=$form['amount']; 
$date=$form['date']; 

$stmt = $conn->query("SELECT Discount FROM Contracts WHERE Trade='$trade' AND Metal='$metal' AND Amount='$amount' AND ExpiryDate='$date'"); 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
    echo $row['Discount']; 
} 
?> 

Grazie!

Answer 1

Quando si fa clic sul pulsante di invio, il modulo esegue un'azione di invio, quindi il codice jQuery non viene eseguito.

Change

<button type="submit" name="submit" id="checkbut">Check Premium</button>

a

<button type="button" name="submit" id="checkbut">Check Premium</button>.

L'altro modo è utilizzare event.preventDefault();.

$(document).ready(function() { 
    $('#checkbut').click(function(e) { 
    e.preventDefault(); // This prevents the action of sending the form. 

    // Get the value of the field with 'firstname' id. 
    var accountnumber = $('#accountnumber').val(); 
    var tradetype = $('#tradetype').val(); 
    var amount = $('#amount').val(); 
    var metal = $('#metal').val(); 
    var date = $('#date').val(); 

    $('#confirm_accountnumber').text(accountnumber); 
    $('#confirm_tradetype').text(tradetype); 
    $('#confirm_amount').text(amount); 
    $('#confirm_metal').text(metal); 
    $('#confirm_date').text(date); 

    // Hide form tab and show confirmation tab 
    $('#form_tab').removeClass('active'); 
    $('#conf_tab').addClass('active'); 

    }); 
}); 

---

Tuttavia:

selettori ID deve essere unico nella pagina. Hai due pulsanti con lo stesso ID. È necessario rinominare correttamente con identificatori univoci.

dal contesto del codice HTML:

<div id="Sellbut" class="toHide" style="display:none"><button type="submit" name="submit" id="checkbut">Check Premium</button></div> 
<div id="Buybut" class="toHide" style="display:none"><button type="submit" name="submit" id="checkbut">Check Discount</button></div> 

Questi tasti sembrano eseguire diverse azioni, quindi avrai bisogno di rinominarlo.

Answer 2

Utilizzare event.preventDefault(); nella funzione fai clic.

Answer 3

Ogni ID deve essere univoco all'interno del documento HTML. Entrambi i pulsanti utilizzano id="checkbut", ma la chiamata jQuery $('#checkbut') si riferirà solo a uno di essi (probabilmente il primo) e l'altro non riceverà affatto un gestore di clic.

Poiché non è chiaramente definito come deve comportarsi un browser quando ci sono 2 elementi con lo stesso id, tale comportamento potrebbe variare in modo significativo tra i browser.

È possibile modificare id= a class= l'HTML e il selettore su $(".checkbut") per fare riferimento a entrambi contemporaneamente.