logo标签列表

确认选项卡未显示。

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

谢谢！

当你点击提交按钮时，表单会执行提交操作，因此jQuery代码不会执行。将<button type="submit" name="submit" id="check but">Check Premium</button>改为<button type="button" name="submit" id="checkbut">Check Premium</button>。 - Danny Fardy Jhonston Bermúdez
或者您可以在点击函数内添加 $('#checkbut').click(function(e /* 添加 e 参数以获取点击事件 */) { - e.preventDefault();。 - Mosh Feu
3个回答
1
当您点击提交按钮时，表单会执行提交操作，因此jQuery代码不会执行。
更改 为 。
另一种方法是使用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选择器必须是唯一的。您有两个具有相同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>

这些按钮似乎执行不同的操作，因此您需要重新命名它。
实际上，具有相同ID的两个按钮是为了相同的目的。我有另一个Jquery，用于确定显示哪一个，因为我想基于单选按钮的选择来显示按钮显示... '$(function() { $('.tradetype').change(function() { if($(this).val() == 'Buy') {$('#Buybut').show(); $('#Sellbut').hide();} if($(this).val() == 'Sell') {$('#Sellbut').show(); $('#Buybut').hide();} }); });' - miababy
我认为是因为这个原因，上面的代码也无法工作...有什么建议吗？ - miababy
请问您能否更新您的问题并提供所有的代码？我可以帮助您。 - Danny Fardy Jhonston Bermúdez
我已经添加了整个代码。在html/php代码的末尾附近有一个span“confirm_data”...这是来自jquery的，我在其中调用了一个php文件。我还在上面包含了检索数据的php文件，该文件根据html/php第一部分表单中的输入从我的数据库中检索数据...但是，当我点击“check”按钮时，此php文件不会运行-->目前我得到<?php include 'retrievepremordisc.php'; ?>作为输出...在不真正提交表单的情况下运行php是否可能？ - miababy
1
在你的点击函数中使用event.preventDefault();。
这样做是可行的，但如果您解释一下为什么它可行，那对OP会很有帮助。 - Gabriel Sadaka
0
每个 id 在 HTML 文档中必须是唯一的。你的两个按钮都使用了 id="checkbut"，但是 jQuery 调用 $('#checkbut') 只会引用其中一个（可能是第一个），而另一个则根本不会得到点击处理程序。
由于并没有明确定义浏览器在有两个具有相同 id 的元素时应该如何行为，因此在不同的浏览器之间行为可能会有很大差异。
你可以将 HTML 中的 id= 更改为 class=，同时将选择器更改为 $(".checkbut")，以一次引用两者。
实际上，具有相同ID的两个按钮是用于相同的目的。我有另一个Jquery，它确定显示哪一个，因为我希望按钮显示基于单选按钮选择... '$（function（）{ $（'.tradetype'）。change（function（）{ if（$（this）.val（）== 'Buy'）{$（'#Buybut'）。show（）; $（'#Sellbut'）。hide（）;} if（$（this）.val（）== 'Sell'）{$（'#Sellbut'）。show（）; $（'#Buybut'）。hide（）;} }）; }）;' - miababy
我认为是因为这个原因，上面的代码也无法工作...有什么建议吗？ - miababy
尝试记录/警报$('#checkbut')选择的元素数量，如果只选择了一个，则只有一个按钮会起作用。给它们都分配一个共同的类并通过该类进行选择应该会更好。 - Joe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接