Karta potwierdzenia nie pojawia się

Question

Więc utworzyłem formularz. Po przesłaniu tego formularza utworzyłem zakładkę potwierdzenia, aby użytkownik mógł potwierdzić swoje dane wejściowe. gdy użytkownik potwierdzi dane wejściowe, formularz zostanie przesłany.

Więc dodałem jQuery, aby wyświetlić kartę potwierdzenia jednak, po kliknięciu przycisku, aby wyświetlić kartę potwierdzenia, forma po prostu czyści się i zakładka potwierdzenie nie widać ... proszę znaleźć poniżej kodów

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'); 

    }); 
}); 

plik 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']; 
} 
?> 

Dziękujemy!

Answer 1

Po kliknięciu przycisku Wyślij formularz wykonuje czynność przesyłania, więc kod jQuery nie zostanie wykonany.

Zmień

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

do

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

Innym sposobem jest użycie 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'); 

    }); 
}); 

---

Jednakże:

Id selektory musi być unikalna na stronie. Masz dwa przyciski z tym samym identyfikatorem. Musisz zmienić nazwę poprawnie za pomocą unikalnych identyfikatorów.

przez kontekst kodu 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> 

Przyciski te wydają się wykonywać różne działania, więc trzeba go zmienić.

Answer 2

Użyj event.preventDefault(); w tobie funkcja kliknij.

Answer 3

Każdy identyfikator musi być unikalny w dokumencie HTML. Oba przyciski używają id="checkbut", ale wywołanie jQuery $('#checkbut') odnosi się tylko do jednego z nich (prawdopodobnie pierwszego), a drugie nie otrzyma w ogóle obsługi kliknięcia.

Ponieważ nie jest jasno określone, jak powinna wyglądać przeglądarka, gdy występują dwa elementy o tym samym identyfikatorze, zachowanie to może się znacznie różnić w zależności od przeglądarki.

Można zmienić kod HTML na id= na class=, a selektor na $(".checkbut"), aby odnieść się do obu naraz.