我已经创建了一个表单。提交表单后,我创建了一个确认选项卡,以便用户可以确认他的输入。一旦用户确认了输入,表单将被提交。
我添加了JQuery来显示确认选项卡,但是当我点击按钮显示确认选项卡时,表单就清空了,而且看不到确认选项卡……请查看以下代码:
HTML
我添加了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'];
}
?>
谢谢!
<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