2015-11-05 2 views
5

Итак, я создал форму. После отправки этой формы я создал вкладку подтверждения, чтобы пользователь мог подтвердить свои входы. как только пользователь подтвердит ввод, форма будет отправлена.вкладка подтверждения не отображается

Так я добавил JQuery, чтобы отобразить вкладку подтверждения, однако, когда я нажимаю на кнопку, чтобы показать вкладку подтверждения, форма просто очищает и язычок подтверждения не виден ... пожалуйста, найти ниже кодов

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

    }); 
}); 

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

Спасибо!

+0

Когда вы нажимаете кнопку отправки, форма выполняет действие отправки, поэтому код jQuery не выполняется. Изменить '' to ''. –

+0

Или вы можете добавить внутри функции щелчка '$ ('# checkbut'). Click (function (e/* add e parameter, чтобы получить событие click * /) {' - 'e.preventDefault();' –

ответ

1

Когда вы нажимаете кнопку отправки, форма выполняет действие отправки, поэтому код jQuery не выполняется.

Изменить

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

в

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

Другой способ - использовать 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'); 

    }); 
}); 

Однако:

Id селекторы должны быть уникальными на странице. У вас есть две кнопки с одинаковым идентификатором. Вам необходимо правильно переименовать уникальные идентификаторы.

По контексте вашего 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> 

Эти кнопки кажутся выполнять различные действия, так что вам придется переименовать его.

+0

фактически две кнопки с одинаковыми идентификаторами предназначены для одной и той же цели. У меня есть другой Jquery, который определяет, какой из них показан, потому что я хочу, чтобы отображение кнопки основывалось на выборе переключателя ... '$ (function() { $ ('.tradetype'). change (function() { if ($ (this) .val() == 'Купить') {$ ('# Buybut'). show(); $ ('# Sellbut'). hide();} if ($ (this) .val() == 'Sell') {$ ('# Sellbut'). show(); $ ('# Buybut'). hide();} }) }) – miababy

+0

Я думаю, из-за этого вышеприведенный код также не работает ... любые предложения? – miababy

+0

Пожалуйста, можете ли вы обновить свой вопрос всеми код, который у вас есть? Я могу помочь тебе. –

1

Использование event.preventDefault(); в вас функция щелчка.

+0

Это будет работать, но это будет полезно для OP, если вы объясните, почему он будет работать. –

0

Каждый идентификатор должен быть уникальным в документе HTML. Обе ваши кнопки используют id="checkbut", но вызов jQuery $('#checkbut') относится только к одному из них (возможно, первый), а другой не получит обработчик кликов вообще.

Поскольку не ясно определено, как браузер должен вести себя, когда есть два элемента с одним и тем же идентификатором, это поведение может существенно различаться между браузерами.

Вы можете изменить id= на class= HTML, а селектор - на $(".checkbut"), чтобы обратиться к обоим сразу.

+0

Фактически две кнопки с одинаковыми идентификаторами предназначены для той же цели. У меня есть другой JQuery, который определяет, какой из них показан, потому что я хочу, чтобы отображение кнопки основывалось на выборе переключателя ... '$ (function() {$ ('. tradetype '). change (function() { if ($ (this) .val() == 'Купить') {$ ('# Buybut'). show(); $ ('# Sellbut'). hide();} if ($ (this) .val() == 'Sell') {$ ('# Sellbut'). Show(); $ ('# Buybut'). Hide();}});}); ' – miababy

+0

Я думаю, из-за этого выше код тоже не работает ... любые предложения? – miababy

+0

Попробуйте записать/оповестить, сколько элементов выбрано '$ ('# checkbut')', если это только выбирает, только одна из ваших кнопок будет работать. Предоставление им как общего класса, так и выбора по нему должно работать лучше. – Joe

Смежные вопросы